/* oferta.css — la hoja de /interpretacion-digital, extraida VERBATIM de la pagina que cobra.
 *
 * TICKET: CIELO-OFERTA-A-PAGINA-WC-NATIVA.
 * Generada por memory/scripts/extraer_css_oferta_cielo.py — no se edita a mano: se edita la fuente y se
 * vuelve a extraer, o las dos copias se separan en cuanto una cambia.
 *
 * La banda de abajo es lo UNICO que no venia de la pagina: reemplaza a `.id-wrap`, que alli envolvia todo el
 * documento y aqui no puede existir una vez por seccion sin multiplicar su relleno vertical por ocho.
 */

/* ── La banda: ancho, centrado y relleno lateral de `.id-wrap`, sin su relleno vertical ────────────── */
.id-oferta-banda{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,4vw,3.5rem)}
.id-oferta-banda:first-of-type{padding-top:2rem}
.id-oferta-banda:last-of-type{padding-bottom:2rem}
@media (min-width:1500px){.id-oferta-banda{max-width:1360px}}
@media (min-width:2000px){.id-oferta-banda{max-width:1560px}}
@media (min-width:2800px){.id-oferta-banda{max-width:1800px}}
/* El encabezado ya no lleva `.id-section`: su margen inferior es el que tenia dentro de `.id-wrap`. */
.id-oferta-hero .id-hero{margin-bottom:3.5rem}

/* ── Desde aqui, la hoja de la pagina, textual ──────────────────────────────────────────────────── */
:root{--bg:#07091a;--fg:#f5f5fa;--muted:rgba(245,245,250,.72);--accent:#B8E612;--card:#15152b;--border:rgba(184,230,18,.18);--err:#ff7878}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Poppins,Inter,system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
/* ESCRITORIO Y 4K (2026-08-07 · CIELO-OFERTA-ESCRITORIO-Y-4K · operador: «pantalla 4k no se aprovecha
   espacio»). CAUSA MEDIDA con el navegador sobre la página viva, no supuesta: el relleno era un
   PORCENTAJE del ancho de la ventana, así que cuanto más grande la pantalla más se comía el tope de
   1200 px y el encabezado ENCOGÍA — 1.056 px a 1440, 1.008 a 1920, 944 a 2560, 816 a 3840, con 2.640 px
   de margen muerto y sólo el 31 % del monitor en uso. El relleno pasa a `clamp`, que deja de crecer, y
   el tope sube por tramos.
   Lo que NO se hace, y es el fondo del asunto: una línea de texto de 3.840 px no se lee. El ancho extra
   se gasta en COLUMNAS, no en estirar párrafos — cada bloque de prosa conserva su medida en `ch`.
   ARRASTRE medido a 1440/1920/2560/3840: CONTENEDOR `.id-wrap` → gana ancho sin mover su centro ·
   HERMANOS del encabezado → el texto y la ilustración recuperan proporción en vez de encoger · BLOQUE
   SIGUIENTE → las rejillas `auto-fit` de «Cómo funciona», fichas y catálogo aceptan una columna más sin
   tocar sus reglas · VARIANTE ANGOSTA → intacta, todos los tramos son `min-width` · SUPERFICIE GEMELA
   `.id-form` → sube a 760 px sólo desde 1500 px, y en teléfono conserva sus 680 px. */
.id-wrap{max-width:1200px;margin:0 auto;padding:2rem clamp(1rem,4vw,3.5rem)}
@media (min-width:1500px){
  .id-wrap{max-width:1360px}
  .id-form{max-width:760px}
}
@media (min-width:2000px){
  .id-wrap{max-width:1560px}
  .id-h1{font-size:clamp(2.6rem,2.6vw,3.4rem)}
  .id-lead{font-size:1.2rem}
}
@media (min-width:2800px){
  .id-wrap{max-width:1800px}
  html{font-size:18px}
}
.id-back{color:var(--muted);font-size:.85rem;text-decoration:none;display:inline-block;margin-bottom:2rem;font-weight:500;letter-spacing:.02em}
.id-back:hover{color:var(--accent)}
/* ARRASTRE 2026-08-06: el encabezado pasa de una columna centrada a dos. Los hermanos de abajo ya eran
   rejillas auto-fit y no cambian de reglas; la variante angosta devuelve una columna con la imagen
   primero, que es lo que un teléfono necesita ver antes que el texto. */
.id-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin:0 auto 3.5rem}
.id-hero__text{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;text-align:left;min-width:0}
.id-hero__art{margin:0;min-width:0}
/* ARRASTRE 2026-08-06 · la ilustración pasó del reloj (1200×630) a la rueda de una carta (1600×1200): con
   `aspect-ratio:1200/630` y `object-fit:cover` la rueda quedaba DECAPITADA arriba y abajo, que es el mismo
   defecto de recorte que ya se pagó en la ficha de persona pública. La imagen toma ahora su propia
   proporción 4/3 y `contain`. Dependientes medidos: el CONTENEDOR es la rejilla de dos columnas del
   encabezado y la columna de texto se alinea al centro, así que crece con ella · los HERMANOS de esa rejilla
   son sólo esos dos bloques · el BLOQUE SIGUIENTE es `.id-section`, con margen propio · la VARIANTE ANGOSTA
   (≤900 px) pasa a una columna con la imagen primero y la proporción 4/3 la deja más alta que el reloj, que
   es lo que un teléfono necesita para leer una rueda · la SUPERFICIE GEMELA es `.id-demo__art`, que declara
   la misma proporción. */
/* HIJO DIRECTO, nunca descendiente. La ventana de la captura larga lleva DENTRO una imagen de 900x2625, y esta
   regla —escrita para la rueda suelta— le imponía aspect-ratio 4/3 con object-fit contain: la carta se dibujaba
   angosta en el centro de su propia ventana. Medido sobre la página publicada, no supuesto.
   ARRASTRE: contenedor .id-hero__art → conserva su caja · hermanos del hero (texto y precio) → sin cambio de
   columna · bloque siguiente (el formulario) → arranca donde arrancaba · variante angosta → la ventana es
   fluida y la imagen nunca excede su ancho. */
.id-hero__art>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:16px;border:1px solid var(--border);display:block;background:#0f172a}
.id-hero__art figcaption{font-size:.78rem;color:var(--muted);margin-top:.6rem;line-height:1.45}
.id-pill{display:inline-flex;background:rgba(184,230,18,.08);border:1px solid rgba(184,230,18,.32);color:var(--accent);font-weight:500;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;padding:.45rem 1rem;border-radius:999px}
.id-h1{font-weight:700;font-size:clamp(1.9rem,3.4vw,2.85rem);margin:0;letter-spacing:-.02em;line-height:1.08}
.id-lead{font-size:clamp(1rem,1.2vw,1.15rem);color:var(--muted);margin:0;max-width:60ch;line-height:1.62}
.id-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;padding:1rem 1.4rem;background:rgba(184,230,18,.06);border:1px solid var(--border);border-radius:14px}
.id-price__from{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.15em;font-weight:500}
.id-price__amt{font-size:2.3rem;font-weight:700;color:var(--accent);letter-spacing:-.02em;line-height:1}
.id-price__unit{font-size:1rem;color:var(--muted);font-weight:500;margin-left:.3rem}
.id-price__note{font-size:.82rem;color:var(--muted);font-style:italic;flex-basis:100%}
.id-price__local{font-size:.86rem;color:var(--fg);flex-basis:100%;opacity:.9}
/* ARRASTRE 2026-08-06 · tres bloques nuevos (demostración, escalón, privacidad). Los tres son hermanos de
   `.id-section` y ninguno entra en las rejillas ya existentes (`.id-includes`, `.id-process`),
   de modo que sus reglas quedan intactas · el bloque siguiente a cada uno hereda el mismo margen de sección ·
   la variante angosta colapsa la rejilla de la demostración a una columna, con la rueda primero. */
.id-demo__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:center}
.id-demo__art{margin:0;min-width:0}
.id-demo__art>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:14px;border:1px solid var(--border);display:block;background:#0f172a}
.id-demo__art figcaption{font-size:.78rem;color:var(--muted);margin-top:.6rem;line-height:1.45}
/* LA CARTA COMPLETA, COMO SE VE, RECORRIÉNDOSE SOLA (operador 2026-08-07: «pone imagen estatica pero de captura
   de una carta de ejemplo tal como se ve, y aplica mismo método que agencia cuando visualiza sitios web»).
   Método copiado de los bytes que agencia sirve en la ficha de un sitio entregado: la imagen larga se dibuja
   desde arriba y una animación la desplaza; el puntero encima la detiene para leerla. La ventana lleva la
   barra de tres puntos por la misma razón que allá: dice «esto es una pantalla», no una foto suelta.
   ARRASTRE: contenedor .id-demo__art → mantiene la proporción 4/3 que ya tenía · hermanos de .id-demo__grid →
   el texto de la derecha conserva su columna · bloque siguiente → el proceso arranca donde arrancaba ·
   variante angosta → la ventana es fluida (width:100%) y la imagen nunca excede su ancho. */
.id-demo__pantalla{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--border);background:#0f172a;aspect-ratio:4/3;padding-top:1.5rem}
.id-demo__pantalla::before{content:"";position:absolute;top:.5rem;left:.7rem;width:2.4rem;height:.5rem;border-radius:99px;background:radial-gradient(circle at .25rem 50%,#ff5f57 .2rem,transparent .21rem),radial-gradient(circle at 1.2rem 50%,#febc2e .2rem,transparent .21rem),radial-gradient(circle at 2.15rem 50%,#28c840 .2rem,transparent .21rem);z-index:2}
/* LA DURACIÓN SE RECALCULA CADA VEZ QUE LA CAPTURA CAMBIA DE ALTO (2026-08-08 · CIELO-MUESTRA-LIBRE-SIN-MOTOR).
   La ventana no crece —lleva aspect-ratio fijo y overflow:hidden—, así que una imagen más alta no alarga la
   página: acelera el recorrido. La carta gratuita pasó de 2.625 a 7.177 px al empezar a pintar las siete
   definiciones generales y al abrirse sus cuatro plegables, es decir 2,73 veces, y los 30 s se convierten en
   82 s para conservar la MISMA velocidad de lectura. ARRASTRE medido en esta pasada: el CONTENEDOR
   .id-demo__pantalla conserva su proporción 4/3 y su alto pintado no cambia · los HERMANOS de
   .id-demo__grid no se mueven, porque lo que cambió vive dentro de la ventana · el BLOQUE SIGUIENTE arranca
   donde arrancaba · la VARIANTE ANGOSTA hereda la ventana fluida y tampoco gana reglas · la SUPERFICIE
   GEMELA es la segunda copia de esta misma imagen en la sección de ejemplo, que comparte esta clase y
   por eso hereda la corrección. */
.id-demo__larga{width:100%;height:auto;display:block;object-fit:contain;object-position:top;animation:id-recorrer-carta 82s cubic-bezier(.4,0,.6,1) infinite alternate}
.id-demo__pantalla:hover .id-demo__larga{animation-play-state:paused}
@keyframes id-recorrer-carta{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 240px))}}
@media(prefers-reduced-motion:reduce){.id-demo__larga{animation:none}}
/* MUESTRA DE LO QUE SE COBRA (2026-08-07 · CIELO-OFERTA-TEXTO-COMERCIAL-Y-FOTOS): la ventana de arriba enseña
   la carta GRATUITA; esta enseña, en la misma ventana y con el mismo recorrido, lo que la lectura pagada
   agrega. Es una captura de la carta de ejemplo DE LA CASA, nunca la de un consultante. Medida de nuevo el
   2026-08-08: 3.510 px de alto contra 7.732 de la otra, de modo que ahora es la MÁS CORTA de las dos y su
   recorrido baja de 46 s a 36 s. La regla no cambió, cambió el sentido en que se aplica: la misma velocidad
   de lectura, no la misma duración. ARRASTRE medido en esta pasada: el CONTENEDOR .id-demo mantiene su ancho de sección y esta figura
   entra FUERA de .id-demo__grid, de modo que las dos columnas de arriba no cambian · los HERMANOS de la
   rejilla (ventana gratuita y texto con las siete viñetas) conservan su caja y su proporción 4/3 · el BLOQUE
   SIGUIENTE (el proceso en cuatro pasos) sólo se desplaza hacia abajo, sin cambiar de ancho ni de ritmo · la
   VARIANTE ANGOSTA hereda una sola columna y esta figura ya era de ancho completo, así que no gana reglas
   nuevas · la SUPERFICIE GEMELA .id-hero__art queda intacta porque esta clase no la nombra. */
.id-demo__muestra{margin:2.2rem auto 0;grid-column:1/-1;max-width:560px}
.id-demo__muestra .id-demo__pantalla{aspect-ratio:3/4}
.id-demo__muestra .id-demo__larga{animation-duration:36s}
.id-demo__muestra h3{font-size:1.05rem;margin:0 0 .8rem;color:var(--fg)}
.id-demo__texto p{margin:0 0 1rem;font-size:.98rem;color:var(--muted);line-height:1.62;max-width:60ch}
.id-demo__priv{color:var(--fg)!important}
.id-demo__priv strong{color:var(--accent)}
/* La salida del bloque del ejemplo es un ENLACE, jamás un segundo botón: el botón verde existe una sola
   vez en la página (2026-08-07 · el operador leyó dos botones distintos para la misma acción). */
.id-demo__cta{margin:1.6rem 0 0;text-align:center}
.id-demo__cta a{color:var(--accent);font-weight:600;font-size:.95rem;text-decoration:none;border-bottom:1px solid rgba(184,230,18,.4);padding-bottom:.15rem}
.id-demo__cta a:hover{border-bottom-color:var(--accent)}
/* Lo que agrega la lectura pagada, al lado de la rueda que es gratuita.
   ARRASTRE medido en la misma pasada: el CONTENEDOR .id-demo__grid mantiene sus dos columnas de
   minmax(0,1fr) y align-items:center, así que la columna de texto crece hacia abajo sin empujar a la
   figura · el HERMANO .id-demo__art conserva su aspect-ratio 4/3 y no cambia de alto · el BLOQUE
   SIGUIENTE (.id-section del proceso) sólo baja lo que crece esta lista · la VARIANTE ANGOSTA ya
   colapsa a una columna en la consulta de 908 y la lista hereda ese colapso sin regla propia · la
   medida cómoda vive en el párrafo (60ch), nunca en el contenedor. */
.id-demo__mas{margin:.2rem 0 .5rem!important;color:var(--fg)!important;font-size:.95rem!important}
.id-demo__mas strong{color:var(--accent)}
.id-demo__lista{margin:0 0 1rem;padding-left:1.1rem;max-width:60ch;color:var(--muted);font-size:.94rem;line-height:1.55}
.id-demo__lista li{margin:.3rem 0}
.id-ladder{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.id-ladder__lead{margin:0;color:var(--muted);font-size:.98rem;line-height:1.62;max-width:68ch}
.id-ladder__oferta{margin:0;display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:baseline}
.id-ladder__oferta strong{font-size:1.1rem;color:var(--fg)}
.id-ladder__oferta span{color:var(--accent);font-weight:600}
.id-ladder__cta{color:var(--accent);text-decoration:none;font-weight:600;font-size:.92rem;letter-spacing:.02em}
.id-ladder__cta:hover{text-decoration:underline}
.id-privacy p{margin:0 0 .9rem;color:var(--muted);font-size:.95rem;line-height:1.62;max-width:68ch}
.id-privacy a{color:var(--accent)}
.id-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--accent);color:#0a0a14;font-weight:700;font-size:.95rem;letter-spacing:.04em;padding:.9rem 1.6rem;border-radius:10px;text-decoration:none;text-transform:uppercase;transition:background .25s,transform .25s}
.id-cta:hover{background:#d4f24a;transform:translateY(-2px)}
.id-cta__note{font-size:.8rem;color:var(--muted);margin:0}
.id-section{margin-top:3rem}
.id-h2{font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--fg);margin:0 0 1.5rem;padding-bottom:.8rem;border-bottom:1px solid var(--border)}
.id-h2__sub{display:block;font-size:.85rem;font-weight:400;color:var(--muted);margin-top:.5rem;letter-spacing:0}
/* ARRASTRE 2026-08-06: con 220px el catálogo de cinco puntos caía 4+1 y dejaba una tarjeta huérfana en la
   segunda fila (visto en la captura de escritorio). Con 280px caen 3+2 y la fila de abajo deja de leerse como
   un descuido. Contenedor, hermanos de rejilla y variante angosta revisados en la misma captura: a 390px la
   rejilla ya era de una columna y no cambia. */
.id-includes{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.id-includes li{padding:1rem 1.3rem;background:var(--card);border:1px solid rgba(184,230,18,.1);border-radius:12px;font-size:.95rem;display:flex;align-items:center;gap:.6rem}
.id-includes li::before{content:'✓';color:var(--accent);font-weight:700;font-size:1.1rem;flex-shrink:0}
.id-process{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.id-step{background:var(--card);border:1px solid rgba(184,230,18,.1);border-radius:14px;padding:1.6rem 1.4rem;display:flex;gap:1rem;align-items:flex-start}
.id-step__n{font-weight:700;font-size:1.8rem;color:var(--accent);line-height:1;flex-shrink:0}
.id-step h3{margin:0 0 .4rem;font-size:1.05rem;font-weight:600;color:var(--fg)}
.id-step p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.55}
.id-faq{display:flex;flex-direction:column;gap:.6rem}
.id-faq-item{background:var(--card);border:1px solid rgba(184,230,18,.1);border-radius:12px;padding:1rem 1.4rem;transition:border-color .35s}
.id-faq-item[open]{border-color:rgba(184,230,18,.32)}
.id-faq-item summary{font-weight:600;color:var(--fg);font-size:1rem;cursor:pointer;list-style:none;padding-right:2rem;position:relative;line-height:1.4}
.id-faq-item summary::after{content:'+';position:absolute;right:0;top:.05rem;color:var(--accent);font-size:1.5rem;font-weight:300;line-height:1;transition:transform .25s}
.id-faq-item[open] summary::after{content:'−'}
.id-faq-item p{color:rgba(245,245,250,.8);font-size:.92rem;line-height:1.6;margin:.85rem 0 0;padding-right:2rem;max-width:70ch}
.id-form{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem;max-width:680px;margin:0 auto}
.id-form__h{font-weight:700;font-size:1.4rem;margin:0 0 1.5rem;color:var(--fg)}
.id-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem;position:relative}
.id-field label{font-size:.82rem;font-weight:600;color:var(--fg)}
.id-field input{padding:.7rem .9rem;background:#0a0a14;border:1px solid rgba(184,230,18,.2);border-radius:8px;color:var(--fg);font-family:inherit;font-size:.95rem;width:100%}
.id-field input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.id-field-row{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media (max-width:600px){.id-field-row{grid-template-columns:1fr}}
.id-field__note{font-size:.78rem;color:var(--muted);font-style:italic}
.id-sug{position:absolute;top:100%;left:0;right:0;z-index:40;background:#0a0a14;border:1px solid var(--border);border-radius:10px;margin-top:.25rem;max-height:280px;overflow-y:auto;box-shadow:0 12px 32px rgba(0,0,0,.55);display:none}
.id-sug[data-abierto="1"]{display:block}
.id-sug__item{padding:.7rem .9rem;cursor:pointer;font-size:.9rem;border-bottom:1px solid rgba(255,255,255,.06);line-height:1.35}
.id-sug__item:last-child{border-bottom:0}
.id-sug__item[aria-selected="true"],.id-sug__item:hover{background:rgba(184,230,18,.12)}
.id-sug__meta{display:block;font-size:.75rem;color:var(--muted);margin-top:.15rem}
.id-sug__vacio{padding:.7rem .9rem;font-size:.85rem;color:var(--muted)}
.id-consent{display:flex;align-items:flex-start;gap:.6rem;font-size:.85rem;color:var(--muted);margin:1.2rem 0 .4rem;line-height:1.5}
.id-consent input[type="checkbox"]{margin-top:.2rem;accent-color:var(--accent);flex-shrink:0;width:auto}
.id-legal{font-size:.78rem;margin:0 0 1.2rem}
.id-legal a{color:var(--accent)}
.id-submit{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:.5rem;background:var(--accent);color:#0a0a14;font-weight:700;font-size:1rem;letter-spacing:.05em;padding:1rem 1.5rem;border:0;border-radius:10px;cursor:pointer;text-transform:uppercase;transition:background .25s,transform .25s}
/* CIELO-FORMULARIO-POR-PASOS (#349): sin la clase id-form--pasos TODO se ve, que es lo que entrega el
   servidor y lo que lee un rastreador. Ocultar por paso ocurre sólo cuando el guion enciende el recorrido. */
.id-pasos__barra{display:flex;gap:6px;height:6px;margin:0 0 .5rem}
.id-pasos__barra span{display:block;height:6px;border-radius:3px;background:var(--accent);transition:width .35s cubic-bezier(.22,1,.36,1)}
.id-pasos{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.9rem;margin-bottom:1.4rem}
.id-pasos__barra{background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.id-pasos__cuenta{font-size:.8rem;color:var(--muted);margin:.55rem 0 0;letter-spacing:.04em}
.id-pasos__mandos{display:flex;gap:.7rem;margin:1.2rem 0 .6rem}
.id-paso-btn{flex:1;padding:.85rem 1rem;border-radius:10px;font-size:.92rem;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--muted);transition:border-color .25s,color .25s}
.id-paso-btn--next{background:var(--accent);color:#0a0a14;border-color:var(--accent);flex:2}
.id-paso-btn:disabled{opacity:.4;cursor:not-allowed}
.id-form--pasos .id-paso{display:none}
.id-form--pasos .id-paso.id-paso--activo{display:block}
.id-submit:hover:not(:disabled){background:#d4f24a;transform:translateY(-2px)}
.id-submit:disabled{opacity:.6;cursor:wait}
.id-status{margin-top:1rem;padding:1rem;border-radius:8px;font-size:.9rem;display:none}
.id-status.success{display:block;background:rgba(184,230,18,.1);border:1px solid var(--accent);color:var(--accent)}
.id-status.error{display:block;background:rgba(255,80,80,.1);border:1px solid var(--err);color:var(--err)}
.id-trust{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;align-items:center;margin-top:1.2rem;font-size:.75rem;color:var(--muted)}
.id-trust span{display:inline-flex;align-items:center;gap:.3rem}
/* PÁGINA DE AUTOR (2026-08-07 · CIELO-OFERTA-PAGINA-DE-AUTOR-CON-FOTO · operador: «necesito que la
   página de venta sea cercana también, obviamente también debe llevar mi foto… es como una página de
   autor pero que queda en mi curaduría»). El retrato publicado mide 200×200, así que se dibuja a 112 px
   y nunca más: escalarlo lo ablandaría. */
.id-autor{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;align-items:start;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.8rem}
.id-autor__foto{width:112px;height:112px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);display:block;background:#0f172a}
.id-autor__k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;display:block;margin-bottom:.4rem}
.id-autor__n{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:700;margin:0 0 .3rem;color:var(--fg);line-height:1.15}
.id-autor__rol{font-size:.86rem;color:var(--muted);margin:0 0 .9rem}
.id-autor p{margin:0 0 .8rem;font-size:.96rem;color:var(--muted);line-height:1.62;max-width:66ch}
.id-autor__mas{background:none;border:1px solid var(--border);color:var(--accent);font:inherit;font-size:.9rem;font-weight:600;padding:.55rem 1.1rem;border-radius:999px;cursor:pointer}
.id-autor__mas:hover{border-color:var(--accent)}
@media (max-width:600px){.id-autor{grid-template-columns:1fr;justify-items:start;padding:1.4rem}}
/* `margin:auto` NO es decoración: es lo que CENTRA un diálogo modal, y se declara aquí porque la hoja del
   navegador dejó de ser la única que opina. La página nativa de WC emite un reinicio universal
   `*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}` que también alcanza a <dialog> y borra el
   centrado de fábrica: medido el 2026-08-08, los dos diálogos abrían pegados a la esquina superior izquierda
   (x=0 · y=0) mientras esta misma página suelta los abría centrados (x=360 · y=226 a 1.440 px). Un valor
   apoyado en el ajuste de fábrica se pierde el día que alguien reinicia esa propiedad. En la página suelta
   esta línea no cambia nada, porque ahí ya estaba centrado. */
.id-modal{border:1px solid var(--border);border-radius:18px;background:var(--card);color:var(--fg);padding:0;max-width:min(720px,92vw);width:100%;margin:auto}
.id-modal::backdrop{background:rgba(4,6,20,.82)}
.id-modal__cuerpo{padding:1.8rem}
.id-modal__x{position:absolute;top:.7rem;right:.9rem;background:none;border:0;color:var(--muted);font-size:1.6rem;line-height:1;cursor:pointer}
.id-modal__x:hover{color:var(--accent)}
.id-modal h3{margin:1.4rem 0 .6rem;font-size:1rem;color:var(--fg)}
.id-modal ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.94rem;line-height:1.6}
.id-modal li{margin:.28rem 0}
.id-modal__lugares{font-size:.86rem;color:var(--muted);margin:1rem 0 0}
.id-modal__redes{display:flex;flex-wrap:wrap;gap:.8rem;margin:.7rem 0 0}
.id-modal__redes a{color:var(--accent);font-size:.9rem;text-decoration:none;border-bottom:1px solid rgba(184,230,18,.35)}
/* El formulario dentro del modal pierde su tarjeta: la tarjeta ya es el modal. */
.id-modal .id-form{background:none;border:0;padding:0;max-width:none;margin:0}
.id-oculto-por-modal{display:none}
/* JERARQUÍA EN TELÉFONO (2026-08-07 · CIELO-OFERTA-JERARQUIA-MOVIL-Y-CTAS · operador con capturas:
   «a nivel de jerarquía no se entiende y botones compiten … Carta natal · Interpretación escrita y
   título deberían estar al principio … luego vendría la imagen misma animada. y luego el texto»).
   La regla `.id-hero__art{order:-1}` abría el teléfono con una captura de 900×2625 antes del rótulo y
   del título: el visitante veía una imagen sin saber qué se le ofrece. El orden del DOM ya era el
   correcto para un buscador —el h1 es el primer encabezado del documento y no se mueve una línea—, de
   modo que esto se corrige SOLO en la hoja de estilo.
   `.id-hero__text` pasa a `display:contents` únicamente en esta variante: sus hijos se convierten en
   ítems de la columna del encabezado y cada uno declara su orden. Al desaparecer esa caja, el `gap` y
   la alineación los toma el padre, y por eso el rótulo y el botón declaran `justify-self:start` (sin
   eso un ítem de rejilla se estira a todo el ancho y la píldora verde dejaría de ser una píldora).
   ARRASTRE medido en la forja local a 390 px: CONTENEDOR `.id-hero` → conserva ancho y el margen
   inferior de 3,5rem · HERMANOS de esa rejilla → son los seis hijos reordenados, ninguno cambia de
   caja (el precio sigue envolviendo en una fila y el botón sigue con ancho de contenido) · BLOQUE
   SIGUIENTE → la sección `#solicitar` conserva su `margin-top:3rem` · VARIANTE ANGOSTA → es ésta ·
   SUPERFICIE GEMELA `.id-demo__grid` → intacta: allí la imagen sigue primero porque el encabezado de
   sección ya va arriba y cumple el mismo papel que el h1 cumple aquí. */
@media (max-width:900px){
  .id-hero{grid-template-columns:1fr;gap:1.1rem}
  .id-hero__text{display:contents}
  .id-pill{order:1;justify-self:start;font-size:.72rem;letter-spacing:.12em}
  .id-h1{order:2}
  .id-hero__art{order:3;margin:.3rem 0 0}
  .id-lead{order:4;max-width:none}
  .id-price{order:5}
  .id-cta{order:6;justify-self:start}
  .id-cta__note{order:7}
  .id-demo__grid{grid-template-columns:1fr}
  .id-demo__art{order:-1}
}