/* Frank Huerta — landing “maletín de folders”: una pantalla por pestaña.
   Manual de identidad: Papel domina, Tinta organiza, Rojo firma; Grafito y Arena acompañan.
   Editorial New (titulares) y Neue Montreal (texto); mientras no haya licencia web:
   Instrument Serif y Hanken Grotesk. El nombre solo como logotipo oficial (SVG). */
:root {
  --papel: #f4f1ea;
  --blanco: #ffffff;
  --arena: #c9c0ae;
  --grafito: #4a4742;
  --carbon: #2a2924;
  --humo: #34322c;
  --tinta: #16150f;
  --rojo: #ba1818;

  --display: "PP Editorial New", "Instrument Serif", Georgia, serif;
  --text: "PP Neue Montreal", "Hanken Grotesk", system-ui, sans-serif;

  --m: clamp(20px, 5.55vw, 80px);
  --bar: 72px;
  --tab-h: 46px;

  /* emil-design-eng: ease-out fuerte para lo que entra o responde; ease-in-out para lo que se mueve en pantalla. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tinta); color: var(--tinta); font-family: var(--text); font-size: 1.125rem; line-height: 1.45; }
h1, h2, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button, input, textarea { font: inherit; }
h1, h2, .serif { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; }
h1, h2 { line-height: 1; text-wrap: balance; }
h2 { font-size: clamp(32px, min(4.6cqi, 7.6cqh), 68px); }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
::selection { background: var(--rojo); color: var(--papel); }
.skip { position: absolute; left: var(--m); top: -100px; background: var(--papel); padding: 12px 16px; z-index: 50; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: start; }
.grid--center { align-items: center; }

/* Botón: rectángulo plano y rojo. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px;
  background: var(--rojo); color: var(--papel); border: 0; font-size: 1.0625rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 180ms ease;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #a01414; } }
.btn:focus-visible { outline-color: var(--tinta); }
.screen--inicio .btn:focus-visible { outline-color: var(--papel); }

/* ---------- El menú: la orilla del maletín ---------- */
.case { position: relative; z-index: 30; flex: none; height: var(--bar); background: var(--tinta); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-inline: max(var(--m), calc((100% - 1440px) / 2 + var(--m))); }
.case__logo { flex: none; align-self: center; display: block; }
.case__logo img { width: auto; height: 48px; }
.case__logo-mono { display: none; }
.case__tabs { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.case__tabs li { flex: none; }
.tab {
  position: relative; isolation: isolate; display: flex; align-items: center; height: var(--tab-h); padding: 0 30px;
  color: var(--ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
}
/* Solo el color de la pestaña baja al 50%; la palabra sigue legible. */
.tab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); opacity: 0.5; transition: opacity 200ms ease; }
.tab[aria-current="true"]::before { opacity: 1; }
.tab[aria-current="true"] { color: var(--ink-on, var(--ink)); }
@media (hover: hover) and (pointer: fine) { .tab:hover::before { opacity: 1; } .tab:hover { color: var(--ink-on, var(--ink)); } }
.tab:focus-visible { outline: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tab:focus-visible::before { opacity: 1; }
.tab--inicio { --c: var(--humo); --ink: var(--papel); }
.tab--sobre { --c: var(--papel); --ink: var(--tinta); }
.tab--mentoria { --c: var(--arena); --ink: var(--papel); --ink-on: var(--tinta); }
.tab--preguntas { --c: var(--grafito); --ink: var(--papel); }
.tab--oye { --c: var(--carbon); --ink: var(--papel); }
.tab--empieza { --c: var(--rojo); --ink: var(--papel); }

/* ---------- Pantallas. Sin JavaScript se apilan y las anclas siguen funcionando. ---------- */
.screen--inicio { background: var(--tinta); color: var(--papel); }
.screen--sobre { background: var(--papel); }
.screen--mentoria { background: var(--arena); }
.screen--preguntas { background: var(--grafito); color: var(--papel); }
.screen--oye { background: var(--carbon); color: var(--papel); }
.screen--empieza { background: var(--rojo); color: var(--papel); }
.panel { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(24px, 7cqh, 96px); }

.js, .js body { height: 100%; overflow: hidden; }
.js body { height: min(100%, 100dvh); display: flex; flex-direction: column; }
.js .stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--tinta); }
.js .screen { position: absolute; inset: 0; overflow: hidden auto; overscroll-behavior: contain; container-type: size; visibility: hidden; }
.js .screen.cur, .js .screen.prev { visibility: visible; }
.js .screen:focus { outline: 0; }
.js .panel { min-height: 100%; }
.js .cur { z-index: 2; }
.js .prev { z-index: 1; }

/* El cambio de pestaña: el folder nuevo tapa al anterior, que se aleja más despacio (paralaje). */
.in-down { animation: in-down 800ms var(--ease-in-out) both; }
.in-up { animation: in-up 800ms var(--ease-in-out) both; }
.out-down { animation: out-down 800ms var(--ease-in-out) both; }
.out-up { animation: out-up 800ms var(--ease-in-out) both; }
.in-down .par { animation: par-down 1100ms var(--ease-out) both; }
.in-up .par { animation: par-up 1100ms var(--ease-out) both; }
@keyframes in-down { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes in-up { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes out-down { to { transform: translateY(-30%); filter: brightness(0.55); } }
@keyframes out-up { to { transform: translateY(30%); filter: brightness(0.55); } }
@keyframes par-down { from { transform: translateY(-18%); } to { transform: translateY(0); } }
@keyframes par-up { from { transform: translateY(18%); } to { transform: translateY(0); } }

.foto { width: 100%; height: clamp(240px, 74cqh, 720px); object-fit: cover; }
.foto--sobre { grid-column: 7 / span 6; object-position: 50% 18%; }
.foto--mentoria { grid-column: 7 / span 6; object-position: 40% 50%; }

/* Inicio: el guion es el protagonista; abajo, la pregunta y el botón. */
.panel.inicio { min-height: 100%; padding-block: 0; }
.inicio__voz { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(32px, 6cqh, 80px) clamp(24px, 4cqh, 48px); }
.guion { font-family: var(--display); letter-spacing: -0.01em; font-size: clamp(40px, min(5.8cqi, 10cqh), 104px); line-height: 1.04; max-width: 13em; min-height: 3.12em; transition: opacity 280ms ease; }
.guion__full { font-family: var(--text); font-size: 1.5rem; letter-spacing: 0; display: block; max-width: 40em; line-height: 1.35; }
.guion.is-live { position: relative; }
.guion.is-live .guion__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.guion.is-out { opacity: 0; }
.guion__b { color: var(--rojo); }
.guion__caret { display: inline-block; width: 0.05em; min-width: 3px; height: 0.82em; margin-left: 0.06em; vertical-align: -0.06em; background: var(--rojo); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.inicio__base { padding-bottom: clamp(28px, 6cqh, 72px); }
.inicio__base { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.inicio__base h1 { font-size: clamp(28px, min(3.2cqi, 5.4cqh), 52px); line-height: 1.05; max-width: 16em; }
.inicio__act { display: flex; align-items: center; gap: 16px; }
.voz { width: 56px; height: 56px; display: grid; place-items: center; background: transparent; color: var(--papel); border: 1px solid rgba(244, 241, 234, 0.4); cursor: pointer; transition: transform 160ms var(--ease-out); }
.voz[hidden] { display: none; }
.voz:active { transform: scale(0.97); }
.voz:focus-visible { outline-color: var(--papel); }
.voz__on { display: none; }
.voz[aria-pressed="true"] .voz__on { display: block; }
.voz[aria-pressed="true"] .voz__off { display: none; }

/* Sobre Frank */
.sobre__text { grid-column: 1 / span 5; display: grid; gap: clamp(14px, 3.2cqh, 32px); }
.trazo { display: flex; align-items: center; gap: 10px; }
.trazo span:first-child { width: 168px; height: 5px; background: var(--rojo); }
.trazo span:last-child { width: 10px; height: 10px; border-radius: 50%; background: var(--rojo); }
.sobre__def { color: var(--grafito); max-width: 34em; }
.sobre__def strong { color: var(--rojo); font-weight: 600; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--arena); padding-top: clamp(12px, 2.8cqh, 28px); } /* taste-skill-ignore: línea aprobada en el diseño */
.facts li { display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; color: var(--grafito); }
.facts strong { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5cqh, 48px); line-height: 1; color: var(--tinta); }

/* Mentoría */
.mentoria__text { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 2.8cqh, 28px); }
.mentoria__sub { font-family: var(--display); font-style: italic; font-size: clamp(22px, 3.2cqh, 28px); line-height: 1.2; }
.mentoria__text > p:not(.mentoria__sub) { max-width: 34em; }
.ways { align-self: stretch; border-top: 1px solid rgba(22, 21, 15, 0.25); } /* taste-skill-ignore: línea aprobada en el diseño */
.ways li { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: clamp(8px, 1.8cqh, 18px) 0; border-bottom: 1px solid rgba(22, 21, 15, 0.25); font-size: 1rem; } /* taste-skill-ignore: línea aprobada en el diseño */
.ways strong { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }

/* Preguntas */
.preguntas__head { grid-column: 1 / span 4; display: grid; gap: clamp(12px, 2.8cqh, 28px); }
.foto--agenda { height: clamp(140px, 34cqh, 340px); filter: saturate(0.85) sepia(0.06); }
.qa { grid-column: 6 / span 7; border-top: 1px solid rgba(244, 241, 234, 0.3); } /* taste-skill-ignore: línea aprobada en el diseño */
.qa details { border-bottom: 1px solid rgba(244, 241, 234, 0.3); padding: clamp(10px, 2.4cqh, 28px) 0; } /* taste-skill-ignore: línea aprobada en el diseño */
.qa summary { display: flex; justify-content: space-between; gap: 24px; font-family: var(--display); letter-spacing: -0.01em; font-size: clamp(20px, 3.3cqh, 30px); line-height: 1.15; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font-family: var(--text); font-size: 1.625rem; line-height: 1; }
.qa details[open] summary::after { content: "–"; }
.qa summary:focus-visible { outline-color: var(--papel); }
.qa p { margin-top: 16px; max-width: 36em; color: #e6e1d6; }

/* Oye Frank */
.oye { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(20px, 3cqh, 40px); align-items: center; }
.oye__head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: clamp(16px, 3cqh, 32px); }
.oye__intro { display: flex; flex-direction: column; gap: clamp(10px, 2cqh, 20px); }
.oye__intro p { font-size: 1.25rem; line-height: 1.4; color: #e6e1d6; }
.oye__nav { display: flex; align-items: center; gap: 12px; }
.oye__arrow { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: var(--papel); border: 1px solid rgba(244, 241, 234, 0.4); cursor: pointer; transition: transform 160ms var(--ease-out); }
.oye__arrow:active { transform: scale(0.97); }
.oye__arrow:focus-visible, .oye__all:focus-visible { outline-color: var(--papel); }
.oye__arrow[hidden] { display: none; }
.oye__all { margin-left: 16px; font-weight: 500; font-size: 1rem; }
.oye__arrow[hidden] ~ .oye__all { margin-left: 0; }
.reels { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; scrollbar-width: none; }
.reels::-webkit-scrollbar { display: none; }
.reel { display: flex; flex-direction: column; gap: 10px; min-width: 0; scroll-snap-align: start; }
.reel__frame { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: var(--tinta); }
.reel__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel__play { display: none; position: absolute; inset: 0; place-items: center; padding: 0; background: transparent; border: 0; cursor: pointer; }
.js .reel__play { display: grid; }
.js .reel__play[hidden] { display: none; }
.reel__play svg { transition: transform 200ms var(--ease-out); }
.reel__play circle { fill: var(--papel); }
.reel__play path { fill: var(--tinta); }
.reel__play:active svg { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .reel__play:hover svg { transform: scale(1.08); } }
.reel__play:focus-visible { outline: 3px solid var(--papel); outline-offset: -6px; }
.reel__q { font-family: var(--display); letter-spacing: -0.01em; font-size: clamp(17px, 2.3cqh, 21px); line-height: 1.12; }

/* Empieza aquí: el folder rojo, donde se escribe a Frank */
.empieza__text { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: clamp(12px, 2.8cqh, 28px); }
.screen--empieza h2 { font-size: clamp(48px, min(7cqi, 12cqh), 112px); line-height: 0.95; }
.empieza__lead { font-size: clamp(20px, 3cqh, 24px); line-height: 1.35; }
.empieza__contact { font-style: normal; display: flex; flex-direction: column; gap: clamp(10px, 2cqh, 20px); padding-top: 4px; }
.empieza__contact p { font-size: 1.125rem; line-height: 1.4; }
.empieza__contact span { display: block; font-size: 0.9375rem; }
.empieza__contact a { font-family: var(--display); letter-spacing: -0.01em; font-size: clamp(28px, 4.4cqh, 40px); line-height: 1.05; text-decoration: none; }
.empieza__contact a:focus-visible { outline-color: var(--papel); }
.empieza__firma { width: auto; max-width: 78%; height: clamp(60px, 16cqh, 170px); margin-top: clamp(4px, 2cqh, 24px); margin-left: -6%; }
.lead { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: clamp(14px, 2.6cqh, 28px); background: var(--papel); color: var(--tinta); padding: clamp(24px, 4.5cqh, 48px); }
.field { display: flex; flex-direction: column; gap: 10px; }
.field label { font-size: 0.9375rem; font-weight: 600; }
.field label span { font-weight: 400; color: var(--grafito); }
.lead input, .lead textarea { width: 100%; padding: 14px 16px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--arena); border-radius: 0; font-size: 1.0625rem; }
.lead input { height: 52px; }
.lead textarea { resize: vertical; }
.lead input:focus-visible, .lead textarea:focus-visible { outline-offset: 0; }
.lead__error { color: var(--rojo); font-size: 0.9375rem; font-weight: 600; }
.lead__error[hidden] { display: none; }
.lead__sent { font-size: 0.9375rem; font-weight: 600; }
.lead__sent[hidden] { display: none; }
.lead__note { font-size: 0.875rem; color: var(--grafito); }

/* Pie: va al final del último folder. */
.foot { background: var(--tinta); color: var(--papel); padding-block: 48px 32px; }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; }
.foot__logo { width: auto; height: 48px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 1rem; }
.foot a:focus-visible { outline-color: var(--papel); }
.foot__fine { flex-basis: 100%; font-size: 0.8125rem; color: var(--arena); }

@media (prefers-reduced-motion: reduce) {
  .in-down, .in-up, .out-down, .out-up, .par { animation: none !important; }
  .guion, .tab::before { transition: none; }
  .guion__caret { animation: none; }
  .btn, .voz, .oye__arrow, .reel__play svg { transition: none; }
  .btn:active, .voz:active, .oye__arrow:active { transform: none; }
}

/* Laptop con pantalla baja: cada folder sigue cabiendo completo. */
@container (max-height: 720px) and (min-width: 900px) {
  .panel { padding-block: 20px; }
  .foto--sobre, .foto--mentoria { height: 82cqh; }
  .foto--agenda { height: clamp(120px, 30cqh, 240px); }
  .sobre__def, .mentoria__text > p:not(.mentoria__sub) { font-size: 1rem; }
  .mentoria__text { grid-column: 1 / span 7; }
  .foto--mentoria { grid-column: 8 / span 5; }
  .ways li { grid-template-columns: 220px 1fr; font-size: 0.9375rem; }
  .ways strong { font-size: 1.25rem; }
  .btn { min-height: 48px; }
  .empieza__firma { display: none; }
  .lead input { height: 44px; }
  .lead textarea { height: 64px; }
}

/* ---------- Menú en iPad y laptop chica ---------- */
@media (max-width: 1100px) {
  .tab { padding: 0 22px; font-size: 0.875rem; }
}
@media (max-width: 1000px) {
  .case { gap: 8px; }
  .case__logo-full { display: none; }
  .case__logo-mono { display: block; }
  .case__logo img { height: 32px; }
  .case__tabs { gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .case__tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 0 clamp(16px, 2.3vw, 24px); font-size: clamp(0.8125rem, 1.7vw, 0.9375rem); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%); }
}

/* En pantalla táctil se desliza con el dedo; las flechas sobran. */
@media (pointer: coarse) {
  .oye__arrow { display: none; }
  .oye__all { margin-left: 0; }
}

/* iPad horizontal: los videos necesitan más ancho. */
@media (max-width: 1180px) {
  .oye__head { grid-column: 1 / span 3; }
  .reels { grid-column: 4 / -1; gap: 12px; }
  .oye__intro p { font-size: 1rem; }
}

/* ---------- iPad vertical: una columna, y cada folder sigue cabiendo en la pantalla ---------- */
@media (max-width: 899px), (max-width: 1100px) and (orientation: portrait) {
  h2 { font-size: clamp(36px, 6.4cqi, 72px); }
  .screen--empieza h2 { font-size: clamp(56px, 9cqi, 112px); }
  .panel { padding-block: clamp(20px, 4cqh, 64px); }
  .panel.inicio { padding-block: 0; }
  .grid { row-gap: clamp(20px, 2.8cqh, 40px); }
  .sobre__text, .mentoria__text, .empieza__text, .lead, .preguntas__head, .qa, .foto--mentoria { grid-column: 1 / -1; }

  .guion { font-size: clamp(40px, min(8.5cqi, 12cqh), 96px); max-width: none; min-height: 4.16em; }
  .inicio__base h1 { font-size: clamp(30px, 5.4cqi, 60px); }

  /* El retrato de Frank es vertical: va a un lado del texto, sin recortarle la cabeza. */
  .foto--sobre { grid-column: 1 / span 5; grid-row: 1; height: auto; aspect-ratio: 3 / 4; }
  .sobre__text { grid-column: 6 / span 7; grid-row: 1; }
  .facts { grid-template-columns: 1fr; gap: clamp(10px, 1.6cqh, 18px); }
  .facts li { flex-direction: row; align-items: baseline; gap: 12px; }
  .facts strong { flex: none; min-width: 3.2em; }

  /* La foto del grupo es horizontal: abre el folder a todo lo ancho. */
  .foto--mentoria { order: -1; height: clamp(160px, 24cqh, 480px); }
  .ways li { font-size: clamp(0.9375rem, 1.5cqh, 1.125rem); }
  .mentoria__text > p:not(.mentoria__sub) { max-width: none; }

  .preguntas__head { grid-template-columns: 1fr; }
  .foto--agenda { order: -1; height: clamp(140px, 20cqh, 420px); }
  .qa details { padding-block: clamp(10px, 1.8cqh, 24px); }
  .qa summary { font-size: clamp(22px, 2.8cqh, 34px); }

  .oye__head, .reels { grid-column: 1 / -1; }
  .oye__intro p { font-size: 1.25rem; }
  .oye__head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
  .oye__intro { max-width: 40em; }

  .empieza__contact { flex-direction: row; flex-wrap: wrap; gap: 16px 56px; }
  .empieza__firma { display: none; }
  .empieza__lead { font-size: clamp(20px, 2.5cqh, 28px); }
  .lead { gap: clamp(12px, 1.8cqh, 24px); padding: clamp(20px, 3cqh, 40px); }
  .lead textarea { height: clamp(64px, 8cqh, 120px); }
  .lead .btn { width: 100%; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 700px) {
  :root { --bar: 58px; --tab-h: 44px; }
  body { font-size: 1.0625rem; }

  /* Las seis pestañas no caben: la fila se recorre y la abierta queda al centro. */
  .case { padding-left: var(--m); padding-right: 0; }
  .case__tabs { padding-inline: 12px var(--m); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 24px), transparent); } /* taste-skill-ignore: máscara del scroll de pestañas, no un relleno */
  .tab { padding: 0 18px; font-size: 0.8125rem; }

  h2 { font-size: clamp(32px, 9.4cqi, 44px); }
  .screen--empieza h2 { font-size: clamp(48px, 14cqi, 64px); }
  .grid { row-gap: 28px; }
  .panel { justify-content: flex-start; padding-block: 32px 40px; }
  .lead textarea { height: 88px; }
  .panel.inicio { padding-block: 0; }

  .inicio__voz { padding-block: 24px; }
  .guion { font-size: clamp(36px, min(11cqi, 7.4cqh), 52px); min-height: 5.2em; }
  .guion__full { font-size: 1.25rem; }
  .inicio__base { gap: 20px; padding-bottom: clamp(20px, 4cqh, 32px); }
  .inicio__base h1 { font-size: clamp(28px, 8cqi, 36px); }
  .inicio__act, .inicio__act .btn { width: 100%; }

  /* Frank primero, a todo lo ancho; el texto corre abajo. */
  .foto--sobre { grid-column: 1 / -1; aspect-ratio: auto; height: clamp(220px, 38cqh, 340px); object-position: 50% 16%; }
  .sobre__text { grid-column: 1 / -1; grid-row: 2; }
  .facts strong { font-size: 1.75rem; }

  .foto--mentoria { height: clamp(180px, 28cqh, 260px); }
  .ways li { grid-template-columns: 1fr; gap: 4px; padding-block: 12px; }
  .mentoria__text { align-items: stretch; }
  .mentoria__text .btn { width: 100%; }

  .foto--agenda { display: none; }
  .qa summary { font-size: 1.375rem; }
  .qa p { font-size: 1rem; }

  /* Oye Frank vuelve a ser carrusel: se desliza de lado. */
  .reels { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80%, calc(58cqh * 9 / 16)); gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; margin-right: calc(-1 * var(--m)); padding-right: var(--m); scroll-padding-inline-end: var(--m); }
  .oye__intro p { font-size: 1.125rem; }

  .empieza__contact { flex-direction: column; gap: 14px; }
  .lead { padding: 24px 20px; }
  .foot { padding-block: 36px 28px; }
}

/* ---------- Teléfono acostado: muy poca altura ---------- */
@container (max-height: 480px) {
  h2 { font-size: 2rem; }
  .panel { padding-block: 20px 24px; }
  .inicio__voz { padding-block: 12px; }
  .guion { min-height: 2.08em; }
  .inicio__base { flex-wrap: nowrap; align-items: center; padding-bottom: 16px; }
  .inicio__base h1 { font-size: 1.625rem; }
  .inicio__act { width: auto; flex: none; }
}