/* ÍTACA · «Horizonte» — piel de marca (spec itaca.md §1, portafolio §3.5).
   Territorio exclusivo de ÍTACA: dos fondos de color (cielo y reflejo), bloques ámbar a sangre,
   píldoras, radio 20-28 px, semicírculo y tres franjas decrecientes, movimiento continuo con el scroll.
   Nada de otra marca: ni serif, ni radio 0 o 12, ni tiquete dentado, ni haz de luz. */

/* ---------- Fuentes autoalojadas (subconjunto latin) ---------- */
@font-face { font-family:'Barlow Semi Condensed'; font-weight:700; font-display:swap;
  src:url('fuentes/barlow-semicondensed-700.woff2') format('woff2'); }
@font-face { font-family:'Barlow Semi Condensed'; font-weight:600; font-display:optional;
  src:url('fuentes/barlow-semicondensed-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:400; font-display:swap;
  src:url('fuentes/barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:600; font-display:swap;
  src:url('fuentes/barlow-600.woff2') format('woff2'); }
@font-face { font-family:'B612 Mono'; font-weight:400; font-display:swap;
  src:url('fuentes/b612-mono-400.woff2') format('woff2'); }
@font-face { font-family:'B612 Mono'; font-weight:700; font-display:optional;
  src:url('fuentes/b612-mono-700.woff2') format('woff2'); }
/* Respaldos métricos: si la fuente tarda, el texto no salta */
@font-face { font-family:'ITACA Cond Fallback'; src:local('Arial Narrow'), local('Arial');
  size-adjust:88%; ascent-override:96%; descent-override:24%; line-gap-override:0%; }
@font-face { font-family:'ITACA Barlow Fallback'; src:local('Arial'), local('Helvetica');
  size-adjust:97%; ascent-override:94%; descent-override:24%; line-gap-override:0%; }

/* ---------- Contrato de tokens (portafolio §6.1) con los valores de ÍTACA ---------- */
:root {
  --fondo: #F4F4F3;           /* cielo */
  --fondo-alt: #FFFFFF;       /* tarjetas, marcos, campos */
  --tinta: #141414;           /* 16,74:1 sobre cielo · 9,96:1 sobre ámbar */
  --apoyo: #6A7078;           /* 4,54:1 */
  --noche: #1C4F9A;           /* reflejo */
  --sobre-noche: #FFFFFF;     /* 7,97:1 */
  --sobre-noche-alt: #FFDFA8; /* 6,21:1 */
  --sobre-noche-apoyo: #F4F4F3;
  --ambar: #FFAE33;           /* bloques y píldora primaria; encima solo tinta */
  --ambar-claro: #FFDFA8;     /* resaltador y chips; nunca fondo de página */
  --mar: #1A7FDB;             /* SOLO gráfico: ruta, pictogramas, barras */
  --acento-texto: #9A6200;    /* 4,63:1 sobre cielo */
  --acento-grafico: var(--ambar);
  --horizonte: #1C4F9A;
  --filete: rgba(20, 20, 20, .12);
  --borde-control: rgba(20, 20, 20, .24);
  --foco: #1C4F9A;

  --radio-s: 20px; --radio: 24px; --radio-l: 28px; --pildora: 999px;
  --linea: 2px;
  --sombra-flota: 0 18px 40px -24px rgba(20, 20, 20, .45);

  --curva: cubic-bezier(.45, 0, .55, 1);
  --dur-corta: 350ms; --dur-media: 400ms; --dur-larga: 450ms; --paso-franja: 90ms;

  --fuente-titular: 'Barlow Semi Condensed', 'ITACA Cond Fallback', 'Arial Narrow', Arial, sans-serif;
  --fuente-cuerpo: 'Barlow', 'ITACA Barlow Fallback', Arial, sans-serif;
  --fuente-datos: 'B612 Mono', ui-monospace, 'Courier New', monospace;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 24px; --e7: 34px; --e8: 44px; --e9: 64px;
  --lateral: 64px;
  --h: 62%;                   /* posición del horizonte, la escribe el movimiento */
}
@media (max-width: 1279px) { :root { --lateral: 40px; } }
@media (max-width: 767px)  { :root { --lateral: 20px; } }

body { background: var(--fondo); color: var(--tinta); font-family: var(--fuente-cuerpo); }
::selection { background: var(--ambar-claro); color: var(--tinta); }

.envoltura { max-width: calc(1240px + var(--lateral) * 2); margin-inline: auto; padding-inline: var(--lateral); }

/* ---------- Tipografía ---------- */
h1, h2, h3, .cifra-mec, .precio { font-family: var(--fuente-titular); }
.t-h1 { font-weight: 700; font-size: clamp(3rem, 5.8vw, 5.25rem); line-height: .95; letter-spacing: -.005em; }
.t-h2 { font-weight: 700; font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: .98; }
.t-h3 { font-weight: 600; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.75rem); line-height: 1.05; }
.t-cuerpo { font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem); line-height: 1.5; max-width: 60ch; }
.t-menor { font-size: .9375rem; line-height: 1.45; color: var(--apoyo); }
.dato, .t-dato { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }
.rotulo {
  font-family: var(--fuente-datos); font-size: .8125rem; letter-spacing: .02em; color: var(--noche);
  display: inline-flex; align-items: center; gap: var(--e2);
}
.rotulo::before {            /* semicírculo de 12 px: parada de la ruta */
  content: ''; width: 12px; height: 6px; background: var(--ambar);
  border-radius: 12px 12px 0 0; display: block;
}
.cifra-mec { font-weight: 700; font-size: clamp(3rem, 4.4vw, 4.5rem); line-height: .9; font-variant-numeric: tabular-nums; }
.resaltador { background: var(--ambar-claro); color: var(--tinta); padding: 0 .12em; border-radius: 4px; }
.sobre-noche { color: var(--sobre-noche); }
.sobre-noche .t-menor, .sobre-noche .rotulo { color: var(--sobre-noche-apoyo); }
.sobre-noche .rotulo { color: var(--sobre-noche-alt); }

/* ---------- Retícula de 6 columnas, composición 4+2 y 2+4 ---------- */
.tramo { padding-block: var(--e6); position: relative; scroll-margin-top: 76px; }
.rejilla { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--e6); align-items: start; }
.c1-4 { grid-column: 1 / 5; } .c5-6 { grid-column: 5 / 7; }
.c1-2 { grid-column: 1 / 3; } .c3-6 { grid-column: 3 / 7; }
.c1-6 { grid-column: 1 / 7; }
@media (max-width: 900px) {
  .tramo { padding-block: var(--e5); }
  .rejilla { grid-template-columns: 1fr; gap: var(--e5); }
  .c1-4, .c5-6, .c1-2, .c3-6, .c1-6 { grid-column: 1; }
}
@media (max-width: 767px) { .tramo { padding-block: 28px; } }

/* La línea de horizonte: eje de cada tramo */
.horizonte { height: var(--linea); background: var(--horizonte); border: 0; margin: 0; }

/* ---------- Barra ---------- */
.it-barra {
  position: sticky; top: 0; z-index: 50; background: var(--fondo);
  border-bottom: var(--linea) solid var(--horizonte);
}
.it-barra__fila { height: 72px; display: flex; align-items: center; gap: var(--e5); }
.it-barra__fila img { height: 40px; width: auto; }
.it-barra nav { display: flex; align-items: center; gap: var(--e5); margin-left: auto; }
.it-barra nav a, .it-barra nav button { color: var(--tinta); text-decoration: none; font-size: 1rem; }
.it-barra nav a:hover, .it-barra nav button:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.it-barra__movil { margin-left: auto; display: none; gap: var(--e3); align-items: center; }
@media (max-width: 900px) {
  .it-barra__fila { height: 64px; }
  .it-barra nav { display: none; }
  .it-barra__movil { display: flex; }
}
.it-panel { border-bottom: var(--linea) solid var(--horizonte); background: var(--fondo); }
.it-panel__filas { display: grid; gap: var(--e3); padding-block: var(--e5); }

/* ---------- Botones en píldora (forma exclusiva de ÍTACA) ---------- */
.it-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 52px; padding-inline: 28px; border-radius: var(--pildora);
  font-family: var(--fuente-cuerpo); font-weight: 600; font-size: 1.0625rem; text-decoration: none;
}
.it-boton--primario { background: var(--ambar); color: var(--tinta); border: 2px solid var(--ambar); }
.it-boton--primario:hover { background: var(--ambar-claro); border-color: var(--ambar-claro); }
.it-boton--secundario { background: transparent; color: var(--tinta); border: 2px solid var(--tinta); }
.it-boton--secundario:hover { background: var(--ambar-claro); border-color: var(--ambar-claro); }
.sobre-noche .it-boton--secundario { color: var(--sobre-noche-alt); border-color: var(--sobre-noche-alt); }
.sobre-noche .it-boton--secundario:hover { background: var(--sobre-noche-alt); color: var(--tinta); }
@media (max-width: 767px) { .it-boton { min-height: 48px; width: 100%; } }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }
a.it-enlace { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; }
.sobre-noche a.it-enlace { color: var(--sobre-noche-alt); }
.chip {
  display: inline-block; background: var(--ambar-claro); color: var(--tinta);
  border-radius: var(--pildora); padding: 4px 12px; font-family: var(--fuente-datos); font-size: .8125rem;
}

/* ---------- Hero partido por el horizonte ---------- */
.hero { position: relative; padding-block: var(--e8) 0; }
.hero__cielo { padding-bottom: var(--e8); }
.hero__reflejo { background: var(--noche); color: var(--sobre-noche); padding-block: var(--e5); }
.hero__linea { height: var(--linea); background: var(--horizonte); }
.hero__condicion { font-family: var(--fuente-datos); font-size: .8125rem; color: var(--sobre-noche); }

/* Semicírculo: forma derivada de la marca. REGLA ANTI-ISOTIPO (spec §1.5): nunca se dibuja
   en la misma vertical que el reflejo azul, porque sol + horizonte + reflejo reconstruye el
   isotipo de ÍTACA. Por eso vive solo como parada de la ruta (::before de .rotulo) y en los
   marcos, nunca suelto sobre una franja noche. */
.semicirculo {
  width: min(320px, 70%); aspect-ratio: 2 / 1; background: var(--ambar);
  border-radius: 999px 999px 0 0; margin-left: auto;
}
.hero .semicirculo { display: none; }

/* Tarjeta de viaje que cruza el horizonte */
.it-tarjeta-viaje {
  background: var(--fondo-alt); color: var(--tinta); border-radius: var(--radio);
  box-shadow: var(--sombra-flota); padding: var(--e5); max-width: 440px; margin-left: auto;
  position: relative; z-index: 2;
}
.it-tarjeta-viaje h3 { margin-bottom: var(--e3); }
.it-tarjeta-viaje dl { display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e4); margin-top: var(--e3); }
.it-tarjeta-viaje dt { color: var(--apoyo); font-size: .9375rem; }
.it-tarjeta-viaje dd { margin: 0; font-family: var(--fuente-datos); text-align: right; }
.it-tarjeta-viaje .total { font-size: 1.25rem; font-weight: 700; }

/* ---------- Bloque ámbar a sangre ---------- */
.it-bloque {
  background: var(--ambar); color: var(--tinta);
  border-radius: var(--radio-l) var(--radio-l) 0 0;
  padding-block: var(--e7);
}
.it-bloque--cierre { border-radius: 0 0 var(--radio-l) var(--radio-l); }
.it-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e5); margin-top: var(--e5); }
.it-cifras > div { border-top: var(--linea) solid var(--tinta); padding-top: var(--e3); }
.it-cifras p { max-width: 42ch; }
.it-cifras details { margin-top: var(--e2); }
.it-cifras summary { font-family: var(--fuente-datos); font-size: .8125rem; cursor: pointer; list-style: none; }
.it-cifras summary::-webkit-details-marker { display: none; }
@media (max-width: 1100px) { .it-cifras { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .it-cifras { grid-template-columns: 1fr; gap: var(--e4); } }

/* ---------- Puertas de segmento (filas cruzadas por su horizonte) ---------- */
.it-puerta {
  display: grid; grid-template-columns: 2fr 3fr auto; gap: var(--e5); align-items: center;
  padding-block: var(--e5); border-top: var(--linea) solid var(--horizonte); text-decoration: none; color: inherit;
}
.it-puerta:hover { border-top-width: 4px; }
.it-puerta h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); font-weight: 700; }
.it-puerta .frase { color: var(--acento-texto); font-style: normal; }
@media (max-width: 900px) { .it-puerta { grid-template-columns: 1fr; gap: var(--e3); } }

/* ---------- Firma «El horizonte» ---------- */
.escena { position: relative; }
.escena__cielo { background: var(--fondo); padding-block: var(--e7); }
.escena__linea { height: var(--linea); background: var(--horizonte); position: relative; }
.escena__reflejo { background: var(--noche); color: var(--sobre-noche); padding-block: var(--e7); }
.it-franjas { display: grid; gap: var(--e3); }
.it-franja {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 223, 168, .35);
  border-radius: var(--radio-s); padding: var(--e4) var(--e5);
  clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-corta) var(--curva);
}
.it-franja[data-abierta="si"] { clip-path: inset(0); }
.it-franja:nth-child(1) { width: 100%; }
.it-franja:nth-child(2) { width: 66%; }
.it-franja:nth-child(3) { width: 33%; min-width: 320px; }
@media (max-width: 900px) { .it-franja:nth-child(2), .it-franja:nth-child(3) { width: 100%; min-width: 0; } }
.it-franja h3 { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: 1.0625rem; color: var(--sobre-noche-alt); }
.it-franja table { width: 100%; margin-top: var(--e3); font-family: var(--fuente-datos); font-size: .9375rem; }
.it-franja th, .it-franja td { text-align: left; padding: 6px 0; border-bottom: 1px solid rgba(255, 223, 168, .2); }
.it-franja td:last-child, .it-franja th:last-child { text-align: right; }
.it-franja tr[data-aviso="si"] { background: var(--ambar-claro); color: var(--tinta); }
.it-franja tr[data-aviso="si"] td { padding-inline: var(--e2); }

.it-control {
  display: inline-flex; align-items: center; gap: var(--e3);
  background: var(--fondo-alt); border-radius: var(--pildora); padding: 6px 16px;
}
.it-control input[type="range"] { width: 120px; }
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--noche); border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--noche); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px;
  background: var(--ambar); border: 2px solid var(--tinta); border-radius: var(--pildora);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; background: var(--ambar); border: 2px solid var(--tinta); border-radius: var(--pildora);
}

/* ---------- Orígenes: pestañas y tarjetas que se reordenan ---------- */
.it-pestanas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.it-pestanas button {
  border-radius: var(--pildora); padding: 10px 20px; border: 2px solid var(--noche);
  color: var(--noche); font-weight: 600; background: transparent;
}
.it-pestanas button[aria-selected="true"] { background: var(--noche); color: var(--sobre-noche); }
.it-origenes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); margin-top: var(--e5); }
.it-origen {
  background: var(--fondo-alt); border-radius: var(--radio); padding: var(--e5);
  border: 2px solid transparent; transition: transform var(--dur-media) var(--curva);
}
.it-origen[data-activo="si"] { border-color: var(--noche); }
.it-origen .precio-origen { font-family: var(--fuente-datos); font-weight: 700; font-size: 1.375rem; }
@media (max-width: 900px) { .it-origenes { grid-template-columns: 1fr; } }

/* ---------- Vende y cobra (tramo en azul noche) ---------- */
.it-noche { background: var(--noche); color: var(--sobre-noche); }
.it-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); margin-block: var(--e6); }
.it-paso { border-top: var(--linea) dashed var(--sobre-noche-alt); padding-top: var(--e3); }
.it-paso .num { font-family: var(--fuente-datos); color: var(--sobre-noche-alt); }
.it-paso h3 { font-size: 1.5rem; font-weight: 600; }
@media (max-width: 900px) { .it-pasos { grid-template-columns: 1fr; } }

/* ---------- Tablas y tarjetas blancas ---------- */
.it-tabla { background: var(--fondo-alt); color: var(--tinta); border-radius: var(--radio); overflow: hidden; }
.it-tabla table { width: 100%; }
.it-tabla th, .it-tabla td { text-align: left; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--filete); }
.it-tabla thead th { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: .9375rem; }
.it-tabla td.num, .it-tabla th.num { text-align: right; font-family: var(--fuente-datos); }
.it-tabla tr[data-destacada="si"] { background: var(--ambar-claro); }
.tabla-envoltura { overflow-x: auto; }

/* ---------- Precio ---------- */
.it-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); align-items: start; }
.it-plan { background: var(--fondo-alt); border-radius: var(--radio); padding: var(--e5); position: relative; }
.it-plan[data-destacado="si"]::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 48px;
  background: var(--ambar); border-radius: var(--radio) var(--radio) 0 0;
}
.it-plan[data-destacado="si"] { padding-top: calc(48px + var(--e5)); }
.it-plan .precio { font-weight: 700; font-size: clamp(2.5rem, 2rem + 1.4vw, 3.5rem); font-variant-numeric: tabular-nums; }
.it-plan ul { display: grid; gap: var(--e2); margin-top: var(--e4); }
.it-plan li { padding-left: var(--e4); position: relative; font-size: .9375rem; }
.it-plan li::before { content: '·'; position: absolute; left: 4px; color: var(--noche); font-weight: 700; }
@media (max-width: 900px) { .it-planes { grid-template-columns: 1fr; } }

.it-conmutador { display: inline-flex; border-radius: var(--pildora); border: 2px solid var(--noche); overflow: hidden; }
.it-conmutador button { padding: 10px 20px; color: var(--noche); font-weight: 600; }
.it-conmutador button[aria-pressed="true"] { background: var(--noche); color: var(--sobre-noche); }

.it-sellos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); }
.it-sello {
  border: 2px solid var(--noche); border-radius: var(--pildora); padding: 8px 18px;
  font-weight: 600; font-size: .9375rem;
}

/* Calculadora */
.it-calc { display: grid; grid-template-columns: 2fr 3fr; gap: var(--e6); align-items: start; margin-top: var(--e6); }
.it-calc__controles { display: grid; gap: var(--e5); }
.it-calc__controles label { display: grid; gap: var(--e2); }
.it-calc__fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); }
.it-calc__casillas { display: grid; gap: var(--e3); }
.it-calc__casillas label { grid-template-columns: 20px 1fr; align-items: center; }
.it-calc__casillas input[type="checkbox"] {
  appearance: none; width: 20px; height: 20px; border: 2px solid var(--borde-control);
  border-radius: 6px; background: var(--fondo-alt);
}
.it-calc__casillas input[type="checkbox"]:checked { background: var(--noche); border-color: var(--noche); box-shadow: inset 0 0 0 3px var(--fondo-alt); }
@media (max-width: 900px) { .it-calc { grid-template-columns: 1fr; } }

/* ---------- Marco de captura montado sobre el horizonte ---------- */
.it-marco { position: relative; }
.it-marco__caja {
  background: var(--fondo-alt); border: 1px solid var(--filete); border-radius: var(--radio);
  overflow: hidden; position: relative; z-index: 1;
}
.it-marco__caja img { width: 100%; display: block; }
.it-marco--vacio .it-marco__caja {
  min-height: 240px; display: grid; place-items: center; text-align: center; padding: var(--e5);
  color: var(--apoyo); font-family: var(--fuente-datos); font-size: .8125rem;
  background: repeating-linear-gradient(135deg, rgba(28,79,154,.06) 0 10px, transparent 10px 20px);
}
.it-marco__rotulo { font-family: var(--fuente-datos); font-size: 12px; color: var(--apoyo); margin-bottom: var(--e2); }

/* ---------- Preguntas ---------- */
.zt-faq details { border-bottom: var(--linea) solid var(--horizonte); }
.zt-faq summary {
  font-family: var(--fuente-titular); font-weight: 600; font-size: 1.5rem;
  display: flex; justify-content: space-between; gap: var(--e4); align-items: center;
}
.zt-faq summary::after {
  content: ''; width: 16px; height: 8px; background: var(--ambar);
  border-radius: 16px 16px 0 0; transform: rotate(180deg); flex: none;
}
.zt-faq details[open] summary::after { transform: none; }

/* ---------- Formulario ---------- */
.it-formulario { display: grid; gap: var(--e4); background: var(--fondo-alt); border-radius: var(--radio); padding: var(--e5); }
.it-formulario label { font-weight: 600; font-size: .9375rem; }
.it-formulario input, .it-formulario select, .it-formulario textarea {
  min-height: 52px; border-radius: var(--radio-s); border: 2px solid var(--borde-control);
  background: var(--fondo-alt); padding-inline: var(--e3); width: 100%; font-family: var(--fuente-cuerpo);
}
.it-formulario textarea { min-height: 96px; padding: var(--e3); }
.it-formulario input:focus, .it-formulario select:focus, .it-formulario textarea:focus { border-color: var(--noche); }
@media (min-width: 901px) { .it-formulario--fijo { position: sticky; top: 96px; } }

/* ---------- Bloque común y pie ---------- */
.it-comun { border-top: var(--linea) solid var(--horizonte); padding-block: var(--e8); }
.it-comun__sellos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.it-comun__sello { border: 2px solid var(--noche); border-radius: var(--radio); padding: var(--e4); }
@media (max-width: 900px) { .it-comun__sellos { grid-template-columns: 1fr; } }
.endoso {
  font-family: 'Barlow', Arial, sans-serif; font-size: 12px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--apoyo);
}
.it-pie { border-top: var(--linea) solid var(--horizonte); padding-block: var(--e7); }
.it-pie a { color: var(--tinta); text-decoration: none; }
.it-pie a:hover { text-decoration: underline; }

/* ---------- Movimiento reducido: estado final, nada corriendo ---------- */
@media (prefers-reduced-motion: reduce) {
  .it-franja { clip-path: inset(0) !important; transition: none !important; }
  .it-origen { transition: none !important; }
}


/* Guarda de desborde: un hijo de retícula con contenido ancho (una tabla, una cifra larga)
   no estira su columna. Sin esto, la página se sale a la derecha en móvil. */
.rejilla > *, .folio__reticula > *, .dos-columnas > *, .it-planes > *, .zt-fichas > * { min-width: 0; }
.tabla-envoltura { min-width: 0; max-width: 100%; }
table { max-width: 100%; }


/* ---------- Compactación 13-sep: mismo horizonte, menos aire (tope 7.500 / 12.000) ---------- */
.it-panel__filas { padding-block: var(--e4); }
.it-puerta { padding-block: var(--e4); }
.escena__cielo, .escena__reflejo { padding-block: var(--e6); }
.it-comun { padding-block: var(--e6); }
.it-pie { padding-block: var(--e6); }
.hero { padding-block: var(--e7) 0; }
.it-cifras { padding-block: var(--e6); }

@media (max-width: 900px) {
  .rejilla { gap: var(--e4); }
  .it-planes { gap: var(--e4); }
  .it-pasos { gap: var(--e3); }
  .escena__cielo, .escena__reflejo { padding-block: var(--e5); }
  .it-comun, .it-pie { padding-block: var(--e5); }
  .zt-faq summary { padding-block: var(--e3); }
  .zt-faq details > :not(summary) { padding-bottom: var(--e3); }
}
@media (max-width: 720px) {
  body { line-height: 1.45; }
  .it-puerta { padding-block: var(--e3); }
  .it-panel__filas { padding-block: var(--e3); gap: var(--e2); }
  .it-cifras { padding-block: var(--e5); gap: var(--e4); }
  .zt-faq summary { padding-block: var(--e2); }
  .zt-faq details > :not(summary) { padding-bottom: var(--e2); }
  .formulario { gap: var(--e2); }
  .formulario input, .formulario select { height: 42px; }
  .formulario textarea { min-height: 64px; }
  .it-tabla th, .it-tabla td { padding: var(--e2) var(--e3); }
  /* Las tablas no se encogen hasta partir cada celda en cinco líneas */
  .tabla-envoltura > table, .it-tabla-env > table { max-width: none; min-width: 600px; }
}

/* Los tres desplegables del precio comparten fila: mismo contenido, un tercio del alto */
.it-desplegables { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); margin-top: var(--e5); align-items: start; }
.it-desplegables > * { min-width: 0; }
@media (max-width: 900px) { .it-desplegables { grid-template-columns: 1fr; gap: var(--e2); margin-top: var(--e4); } }

/* Densidad: franjas del reflejo, planes, calculadora y formulario */
.it-franja table td { padding-block: 4px; }
.it-franja h3 { line-height: 1.2; }
.it-franja + .it-franja { margin-top: var(--e3); }
@media (max-width: 720px) {
  .it-franja table td { padding-block: 3px; font-size: .875rem; }
  .it-tarjeta-viaje dl { gap: 2px var(--e3); }
  .it-plan { padding: var(--e4); }
  .it-plan li { line-height: 1.35; font-size: .9375rem; }
  .it-plan ul { gap: var(--e1); }
  .it-calc { gap: var(--e4); }
  .it-calc__controles { gap: var(--e3); }
  .it-calc__casillas { gap: var(--e2); }
  .it-tabla { padding: var(--e3) !important; }
  .it-sello { font-size: .8125rem; }
  .t-h2 { line-height: 1.05; }
  .t-h3 { line-height: 1.15; }
  .it-cifra { line-height: 1; }
  .rejilla { gap: var(--e3); }
}
/* Último ajuste de ritmo: el tramo y la escena bajan un escalón */
.tramo { padding-block: var(--e5); }
.escena__cielo, .escena__reflejo { padding-block: var(--e5); }
.it-plan { padding: var(--e4); }
.it-plan ul { gap: var(--e2); }
.it-plan li { line-height: 1.4; }
.it-calc { gap: var(--e5); }
.it-calc__controles { gap: var(--e4); }
.zt-faq summary { padding-block: var(--e3); }
@media (max-width: 900px) {
  .tramo { padding-block: var(--e4); }
  .escena__cielo, .escena__reflejo { padding-block: var(--e4); }
  .it-comun, .it-pie { padding-block: var(--e4); }
}
@media (max-width: 720px) {
  .tramo { padding-block: 22px; }
  .it-plan { padding: var(--e3); }
  .hero { padding-block: var(--e5) 0; }
  .it-cifras { padding-block: var(--e4); }
  .formulario label { font-size: .875rem; }
  .it-pasos { gap: var(--e2); }
  .it-puerta { padding-block: var(--e2); }
}
/* El tramo, medido en píxeles: --e5 y --e6 quedaron iguales al bajar la escala */
.tramo { padding-block: 20px; }
.escena__cielo, .escena__reflejo { padding-block: 20px; }
.it-comun { padding-block: 24px; }
.it-pie { padding-block: 24px; }
@media (max-width: 900px) { .tramo, .escena__cielo, .escena__reflejo { padding-block: 18px; } }
@media (max-width: 720px) { .tramo, .escena__cielo, .escena__reflejo { padding-block: 16px; } .it-comun, .it-pie { padding-block: 20px; } }

/* ---------- Densidad en móvil, componente por componente (tope 12.000 a 390) ---------- */
@media (max-width: 720px) {
  /* Las cuatro cifras: el número manda, la explicación va apretada */
  .it-cifras { gap: var(--e3); }
  .it-cifras > div p { line-height: 1.35; font-size: .9375rem; margin-top: var(--e1); }
  .it-cifras details { margin-top: var(--e1); }
  .it-cifras summary { font-size: .75rem; }
  .cifra-mec { line-height: .95; }

  /* Orígenes, pestañas y marcos */
  .it-origen { padding: var(--e3); }
  .it-origenes { gap: var(--e2); }
  .it-pestanas { gap: var(--e1); }
  .it-marco--vacio .it-marco__caja { min-height: 130px; padding: var(--e3); }

  /* Puertas, pasos y sellos */
  .it-puerta { padding-block: var(--e2); gap: var(--e2); }
  .it-paso { padding: var(--e3); }
  .it-sellos { gap: var(--e1); }

  /* Precio y calculadora */
  .it-plan h3 { line-height: 1.1; }
  .it-plan .precio { line-height: .95; }
  .it-plan p { line-height: 1.35; }
  .it-calc__salida, .it-calc .it-tabla { padding: var(--e3) !important; }
  .it-calc__fila { line-height: 1.3; }

  /* Preguntas y formulario */
  .zt-faq summary { font-size: 1rem; line-height: 1.25; }
  .formulario .dos { gap: var(--e2); }
  .formulario textarea { min-height: 56px; }
  .it-boton { height: 46px; }

  /* Franjas del reflejo: la escena sigue siendo tres franjas, con menos aire */
  .it-franja h3 { font-size: .9375rem; }
  .it-franja + .it-franja { margin-top: var(--e2); }

  /* Titulares y cuerpo */
  .t-cuerpo { line-height: 1.4; }
  .t-menor { line-height: 1.35; }
  .rotulo { line-height: 1.3; }
}
/* Cierre del ajuste: el último escalón de aire */
.hero { padding-block: 28px 0; }
.it-cifras { padding-block: 20px; }
.it-panel__filas { padding-block: var(--e3); }
@media (max-width: 720px) {
  .tramo, .escena__cielo, .escena__reflejo { padding-block: 14px; }
  .hero { padding-block: 18px 0; }
  .it-cifras { padding-block: var(--e3); }
  .rejilla { gap: var(--e3); }
  .it-planes { gap: var(--e3); }
  .it-desplegables { margin-top: var(--e3); }
  .it-tarjeta-viaje { padding: var(--e3); }
  .it-control { margin-top: var(--e3) !important; }
  .it-comun__sellos { gap: var(--e2); }
  .it-pie p { line-height: 1.35; }
}
.tramo { padding-block: 16px; }
.escena__cielo, .escena__reflejo { padding-block: 16px; }
@media (max-width: 720px) {
  .tramo, .escena__cielo, .escena__reflejo { padding-block: 12px; }
  .it-origen p, .it-paso p { line-height: 1.35; font-size: .9375rem; }
  .it-plan li { font-size: .875rem; }
  .zt-faq details > :not(summary) { font-size: .9375rem; line-height: 1.4; }
}
@media (max-width: 720px) {
  .it-cifras > div p { font-size: .875rem; }
  .it-cifras summary { line-height: 1.3; }
  .hero__cielo .t-cuerpo { line-height: 1.35; }
  .it-marco--vacio .it-marco__caja { min-height: 110px; }
  .it-puerta p { line-height: 1.3; font-size: .9375rem; }
  .it-sello { padding-block: 4px; }
  .formulario input, .formulario select { height: 40px; }
}
@media (max-width: 720px) { .it-pie { padding-block: 16px; } .it-comun { padding-block: 16px; } .footer, .it-pie p { margin-top: var(--e2); } }
@media (max-width: 720px) { .it-barra__fila { height: 56px; } .it-desplegables summary { line-height: 1.3; } }