/* ============================================================================
   UTILIDADES DE LA MAQUETA · el subconjunto de Tailwind que su marcado usa.

   Se generan a mano porque no se puede compilar Tailwind sin red y no queremos
   su CDN en producción: la página de entrada no debe depender de un servidor
   ajeno para pintarse.

   Los valores son los de Tailwind con la configuración de la maqueta —colores
   base/card/ink/cyan/gris/micro/rojo— y la escala en rem, que con la base de
   18px del sitio da las mismas proporciones que ella.

   Este archivo crece: aquí están las 40 más frecuentes, que cubren el 81% del
   marcado. El resto se añade conforme se porte cada página. Inventario completo
   y por frecuencia en docs/utilidades-maqueta.txt.
   ============================================================================ */

/* --- Tipografía --------------------------------------------------------- */
.text-xs   { font-size: .75rem;   line-height: 1rem; }
.text-sm   { font-size: .875rem;  line-height: 1.25rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }
.text-6xl  { font-size: 3.75rem;  line-height: 1; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: .05em; }
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* --- Color. Los nombres son los de la maqueta, no los del sitio. --------- */
/* `base` es un color en la maqueta, no un tamaño: al declararlo en el tema de
   Tailwind, `text-base` deja de ser la utilidad de 1rem y pasa a pintar el
   color del fondo. Es lo que le da letra oscura a los botones cian, y lo que
   deja que `text-sm` mande el tamaño en el botón de la barra. */
.text-base  { color: #0A0B0D; }
.text-ink   { color: #F2F4F7; }
.text-cyan  { color: #22D3EE; }
.text-gris  { color: #9AA1AB; }
.text-micro { color: #7C828C; }
.text-rojo  { color: #D9534F; }
.bg-base    { background-color: #0A0B0D; }
.bg-card    { background-color: #101216; }
.bg-card2   { background-color: #13161B; }
.bg-cyan    { background-color: #22D3EE; }

/* --- Caja --------------------------------------------------------------- */
.p-3  { padding: .75rem; }
.p-6  { padding: 1.5rem; }
.p-7  { padding: 1.75rem; }
.p-8  { padding: 2rem; }
.px-4 { padding-left: 1rem;    padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-10{ padding-left: 2.5rem;  padding-right: 2.5rem; }
.py-3 { padding-top: .75rem;   padding-bottom: .75rem; }
.py-5 { padding-top: 1.25rem;  padding-bottom: 1.25rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-10{ margin-top: 2.5rem; }
.mt-auto { margin-top: auto; }
.mb-3 { margin-bottom: .75rem; }
.mb-8 { margin-bottom: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-3xl { max-width: 48rem; }

/* --- Disposición -------------------------------------------------------- */
.flex     { display: flex; }
.grid     { display: grid; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }

/* --- Bordes y esquinas -------------------------------------------------- */
.rounded-lg  { border-radius: .5rem; }
.rounded-xl  { border-radius: .75rem; }
.rounded-2xl { border-radius: 1rem; }

/* --- Estados. En Tailwind son variantes; aquí, reglas normales. --------- */
.transition {
    transition-property: color, background-color, border-color,
                         text-decoration-color, fill, stroke, opacity,
                         box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}
.hover\:text-ink:hover     { color: #F2F4F7; }
.hover\:opacity-90:hover   { opacity: .9; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }

/* --- Punto de quiebre de la maqueta: md = 768px ------------------------- */
@media (min-width: 768px) {
    .md\:text-5xl { font-size: 3rem; line-height: 1; }
}

/* --- Segunda tanda: lo que pide el marcado del inicio ------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }
.overflow-hidden { overflow: hidden; }
.opacity-60 { opacity: .6; }
.hidden { display: none; }
.gap-3 { gap: .75rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.flex-1 { flex: 1 1 0%; }
.w-px { width: 1px; }
.leading-6 { line-height: 1.5rem; }
.leading-none { line-height: 1; }
.rotate-90 { transform: rotate(90deg); }
.bg-white\/10 { background-color: rgba(255, 255, 255, .1); }
.bg-card2\/40 { background-color: rgba(19, 22, 27, .4); }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-2 > * + * { margin-top: .5rem; }
/* Como en Tailwind: `divide-color` pinta los cuatro lados y `divide-y` solo
   enciende el de arriba. Los ocultos no cuentan como hermanos. */
.divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255, 255, 255, .1); }
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; border-bottom-width: 0; }
.max-w-xs  { max-width: 20rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-md { max-width: 28rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: .25rem; }
.mt-3 { margin-top: .75rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-16 { margin-top: 4rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-24 { padding-top: 6rem; }
.pt-8 { padding-top: 2rem; }
.pb-20 { padding-bottom: 5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.p-5 { padding: 1.25rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }

@media (min-width: 640px) {
    .sm\:block { display: block; }
    .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
    .sm\:text-sm { font-size: .875rem; line-height: 1.25rem; }
    .sm\:border-hair-l { border-left: 1px solid rgba(242, 244, 247, .1); }
    .sm\:text-5xl { font-size: 3rem; line-height: 1; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
    .md\:text-7xl { font-size: 4.5rem; line-height: 1; }
    .md\:text-xl  { font-size: 1.25rem; line-height: 1.75rem; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:pt-32 { padding-top: 8rem; }
    .md\:pb-28 { padding-bottom: 7rem; }
    .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
    .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
    .md\:p-8 { padding: 2rem; }
    .md\:p-9 { padding: 2.25rem; }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-\[minmax\(0\,0\.85fr\)_auto_minmax\(0\,2fr\)\] {
        grid-template-columns: minmax(0, .85fr) auto minmax(0, 2fr);
    }
    .lg\:flex { display: flex; }
    .lg\:flex-col { flex-direction: column; }
    .lg\:block { display: block; }
    .lg\:rotate-0 { transform: rotate(0deg); }
}

/* --- Tercera tanda: lo que piden recursos y la guía --------------------- */
.gap-x-8 { column-gap: 2rem; }
.gap-y-3 { row-gap: .75rem; }
.object-cover { object-fit: cover; }
.object-top { object-position: top; }
.justify-between { justify-content: space-between; }
.bg-black { background-color: #000; }
.block { display: block; }
.inline-block { display: inline-block; }
@media (min-width: 768px) {
    .md\:grid-cols-\[260px_1fr\] { grid-template-columns: 260px 1fr; }
    .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
}
/* El cuerpo de la guía sale de la base de datos como HTML simple, así que sus
   párrafos no llevan clases: se les da forma aquí. */
/* El cuerpo de la guía llega desde la base como `<p>` pelados, así que el
   estilo va por descendencia. Los valores son los de `mt-4 text-gris text-lg`,
   que es como los escribe la maqueta. */
.rc-cuerpo p { margin-top: 1rem; color: #9AA1AB; font-size: 1.125rem; line-height: 1.75rem; }
.rc-cuerpo strong { color: #F2F4F7; font-weight: 700; }

/* --- Cuarta tanda: la barra de la maqueta ------------------------------- */
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }
.bg-base\/95 { background-color: rgba(10, 11, 13, .95); }
.h-16 { height: 4rem; }
.h-10 { height: 2.5rem; }
.w-10 { width: 2.5rem; }
.w-11 { width: 2.75rem; }
.h-11 { height: 2.75rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.gap-2 { gap: .5rem; }
.text-\[7px\]  { font-size: 7px; }
.text-\[10px\] { font-size: 10px; }
.tracking-tight { letter-spacing: -.025em; }
.whitespace-nowrap { white-space: nowrap; }
.border { border-width: 1px; border-style: solid; }
.border-cyan\/70 { border-color: rgba(34, 211, 238, .7); }
.hover\:bg-cyan\/10:hover { background-color: rgba(34, 211, 238, .1); }
@media (min-width: 640px) {
    .sm\:inline { display: inline; }
    .sm\:flex { display: flex; }
    .sm\:gap-3 { gap: .75rem; }
}
@media (min-width: 768px) { .md\:flex { display: flex; } }

/* Los enlaces de la barra no llevan decoración ni color de visitado: en la
   maqueta el color lo pone la utilidad y nada más.

   Antes esto era un `all: unset` sobre las clases viejas de la barra, y se
   llevó por delante el estilo base de los enlaces: salían subrayados y en
   morado. `unset` no distingue entre lo que sobra y lo que sostiene. */
header a, header a:visited { text-decoration: none; color: inherit; }
header a.text-cyan, header a.text-cyan:visited { color: #22D3EE; }
header .bg-cyan, header .bg-cyan:visited { color: #0A0B0D; }
header button { font-family: inherit; cursor: pointer; background: none; }

.gap-4 { gap: 1rem; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; }

/* Utilidades del panel. */
.flex-wrap { flex-wrap: wrap; }
.gap-8 { gap: 2rem; }
.overflow-x-auto { overflow-x: auto; }
.pt-5 { padding-top: 1.25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.top-24 { top: 6rem; }
.space-y-1 > :not([hidden]):not([type="hidden"]) ~ :not([hidden]):not([type="hidden"]) { margin-top: .25rem; }
.space-y-5 > :not([hidden]):not([type="hidden"]) ~ :not([hidden]):not([type="hidden"]) { margin-top: 1.25rem; }
@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-\[240px_1fr\] { grid-template-columns: 240px minmax(0, 1fr); }
    .lg\:grid-cols-\[320px_1fr\] { grid-template-columns: 320px minmax(0, 1fr); }
    .lg\:grid-cols-\[2fr_1fr\] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .lg\:sticky { position: sticky; }
}

/* Utilidades del flujo de la calculadora. */
.col-span-2 { grid-column: span 2 / span 2; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.underline { text-decoration-line: underline; }
.underline-offset-4 { text-underline-offset: 4px; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

.bg-transparent { background-color: transparent; }
.min-w-0 { min-width: 0; }
.select-none { user-select: none; }
.rounded-full { border-radius: 9999px; }
.tracking-widest { letter-spacing: .1em; }
.w-1\/2 { width: 50%; }
.h-\[10px\] { height: 10px; }
.p-\[2px\] { padding: 2px; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* `space-y` separa hermanos, no envuelve: el primero no lleva margen. Los
   campos ocultos no cuentan —el token CSRF abre todos los formularios de aquí y
   si contara, el primer campo visible arrancaría con un hueco de más. */
.space-y-6 > :not([hidden]):not([type="hidden"]) ~ :not([hidden]):not([type="hidden"]) {
    margin-top: 1.5rem;
}
.space-y-7 > :not([hidden]):not([type="hidden"]) ~ :not([hidden]):not([type="hidden"]) {
    margin-top: 1.75rem;
}
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:border-cyan\/60:focus { border-color: rgba(34, 211, 238, .6); }
.focus-within\:border-cyan\/60:focus-within { border-color: rgba(34, 211, 238, .6); }
.placeholder\:text-micro::placeholder { color: #5A616B; }
.disabled\:opacity-30:disabled { opacity: .3; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
@media (min-width: 768px) {
    .md\:p-7 { padding: 1.75rem; }
    .md\:p-10 { padding: 2.5rem; }
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

/* Utilidades de «Quiénes somos». */
.gap-10 { gap: 2.5rem; }
.gap-14 { gap: 3.5rem; }
.items-start { align-items: flex-start; }
.h-auto { height: auto; }
.invisible { visibility: hidden; }
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:block { display: block; }
    .md\:mt-8 { margin-top: 2rem; }
}

/* En claro, `theme.css` fija el color del texto con `html[data-theme] body`, que
   pesa más que el `body.light` de la maqueta: el texto salía azulado (#16202B) y
   no el casi negro de la maqueta. Barra y pie entran aparte porque son marcado
   de la maqueta también donde el cuerpo todavía no lo es. */
html[data-theme="light"] body.maqueta,
html[data-theme="light"] header,
html[data-theme="light"] footer { color: #0A0B0D; }

/* Aviso legal: el texto está escrito a mano en la plantilla y el estilo va por
   descendencia. Los valores son los de la maqueta —`text-gris text-lg` para el
   cuerpo, `h-black text-xl` para los apartados—, no los de la tarjeta con
   sombra que tenía el sitio antes. */
.legal-cuerpo h2 { margin-top: 2.5rem; font-weight: 900; letter-spacing: -.02em; line-height: .96; font-size: 1.25rem; color: #F2F4F7; }
.legal-cuerpo h3 { margin-top: 1.5rem; font-weight: 900; font-size: 1.125rem; color: #F2F4F7; }
.legal-cuerpo p { margin-top: 1rem; color: #9AA1AB; font-size: 1.125rem; line-height: 1.75rem; }
.legal-cuerpo ul { margin-top: 1rem; padding-left: 1.25rem; list-style: disc; }
.legal-cuerpo li { color: #9AA1AB; font-size: 1.125rem; line-height: 1.75rem; }
.legal-cuerpo strong { color: #F2F4F7; font-weight: 700; }
.legal-cuerpo a { color: #22D3EE; text-decoration: underline; text-underline-offset: 4px; }

/* La tabla del costo de postergar. Va aparte porque una tabla no se arma con
   utilidades sueltas sin llenar cada celda de clases. */
.costo-tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.costo-tabla th {
    text-align: left;
    padding: .75rem 1rem;
    color: #7C828C;
    font-size: .75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
.costo-tabla td { padding: .875rem 1rem; color: #F2F4F7; white-space: nowrap; }
.costo-tabla tbody tr + tr td { border-top: 1px solid rgba(242, 244, 247, .06); }
.costo-tabla .num { text-align: right; }
.costo-tabla tr.ahora td { color: #22D3EE; }

/* Menú de teléfono. Por debajo de 768 px la maqueta esconde las secciones y no
   pone nada en su lugar: desde un móvil no había manera de llegar a Recursos ni
   al Glosario salvo por el pie. El botón las despliega bajo la barra.

   El panel no se enciende con `display` —eso aparece de golpe y no se puede
   animar—: está siempre puesto y entra con opacidad y desplazamiento. Se saca
   del alcance con `visibility`, que sí espera a que la salida termine, para que
   cerrado no capture pulsaciones. */
@media (max-width: 767px) {
    header nav#nav-secciones {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: .5rem 1.25rem 1rem;
        background: #0A0B0D;
        border-bottom: 1px solid rgba(242, 244, 247, .1);
        box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);

        opacity: 0;
        transform: translateY(-10px);
        visibility: hidden;
        pointer-events: none;
        transition: opacity .18s ease,
                    transform .28s cubic-bezier(.16, 1, .3, 1),
                    visibility 0s .28s;
    }
    header nav#nav-secciones.abierto {
        opacity: 1;
        transform: none;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .18s ease,
                    transform .28s cubic-bezier(.16, 1, .3, 1),
                    visibility 0s;
    }
    body.light header nav#nav-secciones {
        background: #F2F4F7;
        border-bottom-color: rgba(10, 11, 13, .12);
        box-shadow: 0 18px 40px -20px rgba(10, 11, 13, .25);
    }
    header nav#nav-secciones a,
    header nav#nav-secciones button { padding: .75rem 0; font-size: 1rem; }

    /* Los renglones entran uno tras otro. Es lo que hace que se lea como una
       app y no como un bloque que aparece: el ojo sigue la secuencia. */
    header nav#nav-secciones > * {
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .26s cubic-bezier(.16, 1, .3, 1);
    }
    header nav#nav-secciones.abierto > * { opacity: 1; transform: none; }
    header nav#nav-secciones.abierto > :nth-child(1) { transition-delay: .04s; }
    header nav#nav-secciones.abierto > :nth-child(2) { transition-delay: .07s; }
    header nav#nav-secciones.abierto > :nth-child(3) { transition-delay: .10s; }
    header nav#nav-secciones.abierto > :nth-child(4) { transition-delay: .13s; }
    header nav#nav-secciones.abierto > :nth-child(5) { transition-delay: .16s; }
    header nav#nav-secciones.abierto > :nth-child(6) { transition-delay: .19s; }
    header nav#nav-secciones.abierto > :nth-child(7) { transition-delay: .22s; }
    header nav#nav-secciones.abierto > :nth-child(8) { transition-delay: .25s; }
    header nav#nav-secciones.abierto > :nth-child(n+9) { transition-delay: .28s; }

    /* Las dos rayas del botón se cruzan al abrir. */
    #menu-movil .raya {
        transform-origin: center;
        transition: transform .28s cubic-bezier(.16, 1, .3, 1), opacity .18s ease;
    }
    #menu-movil[aria-expanded="true"] .raya-1 { transform: translateY(5px) rotate(45deg); }
    #menu-movil[aria-expanded="true"] .raya-2 { opacity: 0; }
    #menu-movil[aria-expanded="true"] .raya-3 { transform: translateY(-5px) rotate(-45deg); }
}

/* Quien pide menos movimiento no lo tiene: el menú sigue abriendo y cerrando,
   pero sin recorrido. */
@media (prefers-reduced-motion: reduce) {
    header nav#nav-secciones,
    header nav#nav-secciones > *,
    #menu-movil .raya { transition-duration: .01ms; transition-delay: 0s; }
}
@media (min-width: 768px) { .md\:hidden { display: none; } }

/* La marca tiene dos archivos, uno por tema: el turquesa lleva el fondo negro
   incrustado y sobre el tema claro se veía un disco negro. Se sirven los dos y
   aquí se decide cuál se ve, para que no haya un parpadeo al cargar. */
.logo-dia { display: none; }
body.light .logo-noche { display: none; }
body.light .logo-dia { display: block; }

/* El enlace de la sección activa se pintaba de blanco también en claro, o sea
   invisible: en el tema claro va del color del texto. */
body.light .navlink.on { color: #0A0B0D; }

/* Reinicio de la maqueta. Tailwind lo trae de fábrica (su "preflight") y todo
   su espaciado da por hecho que los márgenes de origen del navegador ya no
   están: sin esto el `h1` conserva su medio em de margen y cada sección baja
   un renglón de más.

   Acotado a `body.maqueta` porque `app.css` —el panel y las páginas que
   todavía no se portan— sí se apoya en los márgenes de origen. La barra y el
   pie se marcan con `data-maqueta` y entran aparte: son marcado de la maqueta
   en todas las páginas. Marcarlos, y no coger cualquier `header`, importa:
   hay pantallas que no extienden `base.html` y traen la barra anterior.

   El `:where()` deja el selector con peso cero para que cualquier utilidad lo
   gane. Sin él, `body.maqueta h1` pesa más que `.text-7xl` y aplastaría el
   tamaño de los títulos, que es justo lo contrario de lo que hace Tailwind. */
:where(body.maqueta, [data-maqueta]) h1, :where(body.maqueta, [data-maqueta]) h2, :where(body.maqueta, [data-maqueta]) h3,
:where(body.maqueta, [data-maqueta]) h4, :where(body.maqueta, [data-maqueta]) h5, :where(body.maqueta, [data-maqueta]) h6 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}
:where(body.maqueta, [data-maqueta]) p, :where(body.maqueta, [data-maqueta]) figure,
:where(body.maqueta, [data-maqueta]) blockquote, :where(body.maqueta, [data-maqueta]) dl,
:where(body.maqueta, [data-maqueta]) dd, :where(body.maqueta, [data-maqueta]) pre { margin: 0; }
:where(body.maqueta, [data-maqueta]) ul, :where(body.maqueta, [data-maqueta]) ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
:where(body.maqueta, [data-maqueta]) hr { border-top-width: 1px; height: 0; color: inherit; }
:where(body.maqueta, [data-maqueta]) a { color: inherit; text-decoration: inherit; }
:where(body.maqueta, [data-maqueta]) button, :where(body.maqueta, [data-maqueta]) input,
:where(body.maqueta, [data-maqueta]) select, :where(body.maqueta, [data-maqueta]) textarea {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}
:where(body.maqueta, [data-maqueta]) :where(button, [type="button"], [type="submit"]) {
    background-color: transparent;
    background-image: none;
    cursor: pointer;
    padding: 0;
    border: 0;
}
/* Tailwind apaga el borde de todo y lo vuelve a encender por utilidad; sin
   esto, los `input` y `select` salen con el marco gris del navegador. */
:where(body.maqueta, [data-maqueta]) *, :where(body.maqueta, [data-maqueta]) *::before, :where(body.maqueta, [data-maqueta]) *::after {
    border-width: 0;
    border-style: solid;
    border-color: #E5E7EB;
}
:where(body.maqueta, [data-maqueta]) img, :where(body.maqueta, [data-maqueta]) svg, :where(body.maqueta, [data-maqueta]) video,
:where(body.maqueta, [data-maqueta]) canvas { display: block; vertical-align: middle; }
:where(body.maqueta, [data-maqueta]) img, :where(body.maqueta, [data-maqueta]) video { max-width: 100%; height: auto; }
:where(body.maqueta, [data-maqueta]) table { border-collapse: collapse; }