/* =========================================================================
   GastroView · Bloque 1 · Hero
   Izquierda: título + bajada + CTAs. Derecha: celular con la carta REAL.
   Fondo: marfil + luz cálida tenue + forma orgánica crema + retícula casi invisible + grano.
   La comida vive solo dentro de la pantalla: afuera, sistema de marca.
   ========================================================================= */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: calc(var(--cab-alto) + env(safe-area-inset-top)) 0 0;
}

.hero__contenedor {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
  max-width: var(--ancho);
  min-height: calc(100svh - var(--cab-alto));
  margin: 0 auto;
  padding: clamp(20px, 3vh, 40px) var(--margen) clamp(56px, 8vh, 96px);
}

/* ---------- Texto ---------- */
.hero__texto { max-width: 44rem; }

.hero__titulo {
  font-family: var(--f-titulos);
  font-size: clamp(2.2rem, 1.05rem + 4.6vw, 5.2rem);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--espresso);
  text-wrap: balance;
}

.hero__bajada {
  max-width: 30em;
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: clamp(1.125rem, 0.98rem + 0.5vw, 1.4rem);
  line-height: 1.6;
  color: var(--taupe-texto);
  text-wrap: pretty;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: clamp(28px, 3.4vw, 40px);
}

/* ---------- Beneficios: una línea fina, parte del Hero ---------- */
.beneficios {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.72fr) minmax(0, 1fr);   /* el del medio tiene el título más largo */
  max-width: 42rem;
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgb(var(--espresso-rgb) / 0.1);
  list-style: none;
}
.beneficio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 8px;
  row-gap: 4px;
  padding: 0 20px;
  border-left: 1px solid rgb(var(--espresso-rgb) / 0.1);
  text-align: left;
}
.beneficio:first-child { padding-left: 0; border-left: 0; }
.beneficio:last-child { padding-right: 0; }
.beneficio__ico {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  fill: none;
  stroke: rgb(var(--espresso-rgb) / 0.62);   /* v12: el terracota se reserva para acento y acción */
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.beneficio__titulo {
  font-size: clamp(0.875rem, 0.62rem + 0.36vw, 1rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--espresso);
}
.beneficio__texto {
  grid-column: 1 / -1;
  font-size: clamp(0.875rem, 0.8rem + 0.12vw, 0.9375rem);
  line-height: 1.5;
  color: var(--taupe-texto);
  text-wrap: pretty;
}

/* Continuidad hacia el Bloque 2: sin línea ni forma, el marfil pasa al tono siguiente */
.hero__continuidad {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 16vh, 180px);
  z-index: -1;
  background: linear-gradient(to bottom, rgb(243 236 225 / 0), var(--fondo-bloque2));
  pointer-events: none;
}

/* ---------- Fondo ---------- */
.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Luz cálida tenue detrás del celular */
.hero__luz {
  position: absolute;
  top: 50%;
  left: 74%;
  width: min(900px, 90vw);
  aspect-ratio: 1;
  transform: translate(-50%, -46%);
  background: radial-gradient(closest-side, rgb(215 165 116 / 0.22), rgb(215 165 116 / 0.08) 55%, transparent 100%);
}

/* Forma orgánica crema, muy desenfocada */
.hero__forma {
  position: absolute;
  top: 50%;
  left: 71%;
  width: min(640px, 64vw);
  transform: translate(-50%, -44%) rotate(-8deg);
  fill: var(--crema);
  opacity: 0.35;
  filter: blur(42px);
}

/* Retícula de líneas finas: el único gesto "tecnológico" del fondo */
.hero__reticula {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(var(--espresso-rgb) / 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--espresso-rgb) / 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 34% 48% at 73% 52%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 34% 48% at 73% 52%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
  opacity: 0.6;
}

/* Textura casi imperceptible */
.hero__grano {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .18 0 0 0 0 .15 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   Celular
   Todas las medidas internas salen de --u (1 px de la carta a su ancho real de 390 px),
   así la pantalla conserva la proporción exacta del prototipo (390 × 844).
   ========================================================================= */
.hero__producto { position: relative; margin: 0; justify-self: center; }

/* Escenario: un plano crema de la paleta GastroView donde se apoya el producto */
.hero__escenario {
  position: absolute;
  inset: 15% -20% -4% -20%;
  z-index: -1;
  border-radius: 48px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(255 252 248 / 0.55), transparent 60%),
    linear-gradient(165deg, #F1E6D6 0%, #EADCC8 100%);
  box-shadow: inset 0 0 0 1px rgb(var(--espresso-rgb) / 0.05);
}
.hero__escenario::after {           /* filete terracota fino en la base: el acento de marca */
  content: "";
  position: absolute;
  left: 22%; right: 22%; bottom: 16px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgb(198 106 69 / 0.55), transparent);
}

.telefono {
  --pantalla-ancho: clamp(260px, calc((100svh - 190px) * 0.4621), 356px);
  --u: calc(var(--pantalla-ancho) / 390);
  --bisel: calc(13 * var(--u));
  position: relative;
  width: calc(var(--pantalla-ancho) + 2 * var(--bisel));
}

.telefono__flota { animation: flotar 9s ease-in-out infinite alternate; }

.telefono__cuerpo {
  position: relative;
  padding: var(--bisel);
  border-radius: calc(68 * var(--u));
  background:
    linear-gradient(150deg, #4A3A32 0%, #1C1512 22%, #120D0B 60%, #2A201B 100%);
  box-shadow:
    inset 0 0 0 calc(1.4 * var(--u)) rgb(255 255 255 / 0.1),
    inset 0 0 0 calc(3.5 * var(--u)) rgb(0 0 0 / 0.55),
    0 60px 90px -48px rgb(var(--espresso-rgb) / 0.55),
    0 26px 48px -30px rgb(var(--espresso-rgb) / 0.4),
    0 2px 6px rgb(var(--espresso-rgb) / 0.12);
}
/* Botones laterales, discretos */
.telefono__cuerpo::before,
.telefono__cuerpo::after {
  content: "";
  position: absolute;
  width: calc(3.5 * var(--u));
  border-radius: 2px;
  background: #2A201B;
}
.telefono__cuerpo::before { left: calc(-2.5 * var(--u)); top: 22%; height: 11%; box-shadow: 0 calc(-60 * var(--u)) 0 0 #2A201B; }
.telefono__cuerpo::after { right: calc(-2.5 * var(--u)); top: 27%; height: 15%; }

.telefono__pantalla {
  position: relative;
  width: var(--pantalla-ancho);
  height: calc(844 * var(--u));
  overflow: hidden;
  border-radius: calc(55 * var(--u));
  background: #F6F0E8;              /* fondo de la carta */
  isolation: isolate;
  transform: translateZ(0);         /* recorte redondeado estable en Safari */
}

/* Barra de estado del teléfono (parte del dispositivo, no de la carta) */
.telefono__estado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(47 * var(--u));
  padding: calc(4 * var(--u)) calc(30 * var(--u)) 0 calc(44 * var(--u));
  background: #F6F0E8;
  color: #2B211B;
  font-family: -apple-system, "SF Pro Text", var(--f-ui);
  font-size: calc(16 * var(--u));
  font-weight: 600;
  letter-spacing: -0.01em;
}
.telefono__iconos { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.telefono__iconos svg { height: calc(11.5 * var(--u)); width: auto; fill: currentColor; }

.telefono__isla {
  position: absolute;
  top: calc(11 * var(--u));
  left: 50%;
  width: calc(120 * var(--u));
  height: calc(35 * var(--u));
  border-radius: calc(20 * var(--u));
  transform: translateX(-50%);
  background: #0B0908;
}

/* Ventana de la carta: 390 × 797 px del prototipo, escalados */
.telefono__vista {
  position: relative;
  height: calc(797 * var(--u));
  overflow: hidden;
}
.telefono__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.telefono__vista iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 797px;
  border: 0;
  transform: scale(var(--k, 0.8));
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 700ms var(--ease);
  background: #F6F0E8;
}
.telefono.is-viva .telefono__vista iframe { opacity: 1; }

/* En pantallas táctiles la carta del Hero es solo demostración:
   no captura toques ni el scroll de la página. El acceso es "Ver menú demo". */
@media (hover: none), (pointer: coarse) {
  .telefono__vista iframe { pointer-events: none; }
}

/* Indicador de toque del recorrido automático */
.telefono__toque {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  margin: calc(-23 * var(--u)) 0 0 calc(-23 * var(--u));
  border-radius: 50%;
  background: rgb(var(--espresso-rgb) / 0.16);
  box-shadow: 0 0 0 calc(1.5 * var(--u)) rgb(255 255 255 / 0.85), 0 4px 14px rgb(var(--espresso-rgb) / 0.18);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.telefono__toque.is-activo { animation: toque 900ms var(--ease) forwards; }

.telefono__sombra {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -26px;
  height: 36px;
  border-radius: 50%;
  background: rgb(var(--espresso-rgb) / 0.22);
  filter: blur(18px);
  z-index: -1;
  animation: sombra 9s ease-in-out infinite alternate;
}

@keyframes flotar { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes sombra { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(0.94); opacity: 0.82; } }
@keyframes toque {
  0% { opacity: 0; transform: scale(0.55); }
  30% { opacity: 1; transform: scale(1); }
  70% { opacity: 0.9; transform: scale(0.92); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* ---------- Entrada ---------- */
[data-entra] { animation: entrar 700ms var(--ease) both; }
.hero__bajada[data-entra] { animation-delay: 80ms; }
.hero__acciones[data-entra] { animation-delay: 160ms; }
.beneficios[data-entra] { animation-delay: 240ms; }
.hero__producto[data-entra] { animation: entrar-producto 900ms var(--ease) 180ms both; }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } }
@keyframes entrar-producto { from { opacity: 0; transform: translateY(24px); } }

/* =========================================================================
   Responsive
   ========================================================================= */

/* Escritorios bajos: se achica la pantalla antes que cortar el celular */
@media (min-width: 1024px) and (max-height: 700px) {
  .hero__contenedor { padding-block: 20px 36px; }
}

/* Tablet y celular: una columna. Texto centrado → CTAs → celular */
@media (max-width: 1023px) {
  .hero__contenedor {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: clamp(44px, 8vw, 64px);
    min-height: 0;
    padding-top: clamp(28px, 7vw, 56px);
    padding-bottom: clamp(56px, 10vw, 88px);
    text-align: center;
  }
  .hero__texto { max-width: 40rem; }
  .hero__bajada { margin-inline: auto; }
  .beneficios { margin-inline: auto; }
  .hero__acciones { justify-content: center; }

  .telefono { --pantalla-ancho: 310px; }
  .hero__escenario { inset: 14% -22% -4% -22%; border-radius: 40px; }

  .hero__luz { left: 50%; top: 72%; width: min(760px, 130vw); }
  .hero__forma { left: 54%; top: 74%; width: min(560px, 110vw); }
  .hero__reticula {
    -webkit-mask-image: radial-gradient(ellipse 60% 34% at 50% 74%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 60% 34% at 50% 74%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
  }
}

@media (max-width: 767px) {
  /* En celulares se ve primero el producto funcionando; después título, CTA y beneficios */
  .hero__producto { order: -1; }
  .hero__contenedor { padding-top: 18px; gap: 36px; }
}

@media (max-width: 599px) {
  .telefono { --pantalla-ancho: min(68vw, 268px); }
  .hero__escenario { inset: 14% -12% -4% -12%; border-radius: 32px; }
  .hero__escenario::after { bottom: 14px; }
  .hero__salto { display: none; }
  .hero__acciones { flex-direction: column; align-items: stretch; max-width: 360px; margin-inline: auto; }
  .hero__acciones .boton { width: 100%; min-height: 50px; }

  /* Beneficios apilados: ícono a la izquierda, filetes horizontales finos */
  .beneficios { grid-template-columns: minmax(0, 1fr); max-width: 360px; padding-top: 4px; }
  .beneficio { grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; border-left: 0; border-top: 1px solid rgb(var(--espresso-rgb) / 0.08); }
  .beneficio:first-child { border-top: 0; }
  .beneficio__ico { grid-row: 1 / span 2; width: 20px; height: 20px; }
  .beneficio__texto { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .telefono__flota, .telefono__sombra { animation: none; }
}

/* Notebooks angostas (1024-1199): la columna de texto no alcanza para tres; lista apilada y prolija */
@media (min-width: 1024px) and (max-width: 1199px) {
  .beneficios { grid-template-columns: minmax(0, 1fr); max-width: 30rem; padding-top: 6px; }
  .beneficio { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; padding: 12px 0; border-left: 0; border-top: 1px solid rgb(var(--espresso-rgb) / 0.08); }
  .beneficio:first-child { border-top: 0; }
  .beneficio__ico { grid-row: 1 / span 2; }
  .beneficio__texto { grid-column: 2; }
}
@media (min-width: 360px) and (max-width: 599px) { .hero__titulo { font-size: 2.5rem; } }

/* =========================================================================
   v4 · Hero con más lujo (18/09/2026)
   - El Bloque 2 «tostado» asoma al entrar: el Hero deja lugar a la ola (--asomo).
   - Arco espresso detrás del celular, con luz terracota, retícula marfil y filete caramelo.
   - Acento en cursiva terracota en el título (mismo gesto que «en un solo plan.» del Bloque 2).
   - Invitación a bajar, discreta, que se va al empezar a bajar.
   ========================================================================= */
:root { --asomo: clamp(84px, 13vh, 140px); }

.hero__contenedor {
  min-height: calc(100svh - var(--cab-alto) - var(--asomo));
  padding-bottom: clamp(20px, 3vh, 36px);
}
.telefono { --pantalla-ancho: clamp(250px, calc((100svh - 150px - var(--asomo)) * 0.4621), 356px); }

.hero__acento {
  font-style: italic;
  font-weight: 400;
  color: var(--terracota-cta);
}

/* Fondo: la forma crema se retira; el arco toma su lugar */
.hero__forma { display: none; }
.hero__luz { background: radial-gradient(closest-side, rgb(198 106 69 / 0.16), rgb(215 165 116 / 0.08) 55%, transparent 100%); }

/* Arco espresso */
.hero__escenario {
  inset: -4% -21% -3% -21%;
  border-radius: 999px 999px 40px 40px;
  background:
    radial-gradient(70% 45% at 50% 8%, rgb(198 106 69 / 0.38), transparent 70%),
    radial-gradient(90% 40% at 50% 100%, rgb(215 165 116 / 0.16), transparent 70%),
    linear-gradient(to right, rgb(248 243 234 / 0.05) 1px, transparent 1px) center / 40px 40px,
    linear-gradient(to bottom, rgb(248 243 234 / 0.05) 1px, transparent 1px) center / 40px 40px,
    linear-gradient(170deg, #4A372D 0%, #3E2E26 38%, #2B1F19 100%);
  box-shadow:
    inset 0 1px 0 rgb(248 243 234 / 0.1),
    0 50px 80px -50px rgb(43 31 25 / 0.75);
}
.hero__escenario::after {               /* piso de luz caramelo bajo el celular */
  left: 18%; right: 18%; bottom: 26px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgb(215 165 116 / 0.7), transparent);
}
.hero__arco-filete {                    /* filete caramelo interior: el detalle de joyería */
  position: absolute;
  inset: 14px;
  border-radius: 999px 999px 28px 28px;
  box-shadow: inset 0 0 0 1px rgb(215 165 116 / 0.32);
  pointer-events: none;
}
/* Sobre el oscuro, el celular gana un canto de luz */
.telefono__cuerpo {
  box-shadow:
    inset 0 0 0 calc(1.4 * var(--u)) rgb(255 255 255 / 0.14),
    inset 0 0 0 calc(3.5 * var(--u)) rgb(0 0 0 / 0.55),
    0 0 0 1px rgb(215 165 116 / 0.18),
    0 60px 90px -40px rgb(0 0 0 / 0.6),
    0 26px 48px -30px rgb(0 0 0 / 0.45);
}
.telefono__sombra { background: rgb(0 0 0 / 0.35); }

/* Invitación a bajar */
.hero__bajar {
  position: absolute;
  left: 50%;
  bottom: calc(var(--asomo) * 0.18);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border-radius: 50%;
  background: rgb(255 252 248 / 0.85);
  box-shadow: inset 0 0 0 1px rgb(var(--espresso-rgb) / 0.14), 0 10px 24px -14px rgb(var(--espresso-rgb) / 0.5);
  color: var(--espresso);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease), background-color var(--t) var(--ease);
}
.hero__bajar svg { width: 20px; height: 20px; animation: bajar 2.4s var(--ease) infinite; }
.hero__bajar:hover { background: #FFFCF8; }
.cab.is-bajada ~ main .hero__bajar { opacity: 0; transform: translateY(8px); pointer-events: none; }
@keyframes bajar {
  0%, 20% { transform: translateY(-3px); opacity: 1; }
  60% { transform: translateY(4px); opacity: 0.35; }
  100% { transform: translateY(-3px); opacity: 1; }
}

@media (max-width: 1023px) {
  .hero__contenedor { min-height: 0; padding-bottom: clamp(56px, 10vw, 88px); }
  .telefono { --pantalla-ancho: 310px; }
  .hero__escenario { inset: -3% -20% -3% -20%; }
  .hero__bajar { display: none; }        /* en columna el contenido sigue a la vista: no hace falta */
}
@media (max-width: 599px) {
  .telefono { --pantalla-ancho: min(68vw, 268px); }
  .hero__escenario { inset: -3% -13% -3% -13%; border-radius: 999px 999px 30px 30px; }
  .hero__arco-filete { inset: 10px; border-radius: 999px 999px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bajar svg { animation: none; }
}


/* =========================================================================
   v14 · Orden en celular: título + bajada → celular → CTA → beneficios
   .hero__texto se disuelve (display: contents) para que sus partes sean piezas
   de la grilla del Hero y puedan intercalarse con el producto.
   ========================================================================= */
@media (max-width: 767px) {
  .hero__contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0;
    padding-top: 22px;
  }
  .hero__texto { display: contents; }
  .hero__titulo    { order: 1; text-align: center; }
  .hero__bajada    { order: 2; margin-top: 16px; text-align: center; }
  .hero__producto  { order: 3; margin-top: 30px; }
  .hero__acciones  { order: 4; margin-top: 32px; width: min(100%, 360px); }
  .beneficios      { order: 5; margin-top: 34px; }
}



/* =========================================================================
   v18 · Cuatro beneficios: la prueba gratuita entra como uno más
   Mismo peso tipográfico que los otros tres; se distingue por el color del
   título y un ícono de verificación, sin fondo ni cápsula.
   ========================================================================= */
/* Cuatro beneficios en 2×2: con cuatro columnas los títulos se partían.
   La grilla se arma con filetes finos, como una hoja de datos. */
.beneficios {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 40rem;
  padding-top: 20px;
}
.beneficio {
  padding: 14px 20px;
  border-left: 0;
  border-top: 1px solid rgb(var(--espresso-rgb) / 0.08);
}
.beneficio:nth-child(-n+2) { border-top: 0; padding-top: 2px; }
.beneficio:nth-child(2n) { border-left: 1px solid rgb(var(--espresso-rgb) / 0.08); }
.beneficio:nth-child(2n+1) { padding-left: 0; }
.beneficio__titulo { font-size: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem); }
.beneficio__texto { font-size: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem); }

.beneficio--prueba .beneficio__titulo { color: var(--terracota-cta); }
.beneficio--prueba .beneficio__ico { stroke: var(--terracota-cta); }

@media (min-width: 1024px) and (max-width: 1199px) {
  .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
  .beneficio { padding: 12px 14px; border-left: 0; border-top: 1px solid rgb(var(--espresso-rgb) / 0.08); }
  .beneficio:nth-child(-n+2) { border-top: 0; }
  .beneficio:nth-child(2n) { border-left: 1px solid rgb(var(--espresso-rgb) / 0.08); }
}
@media (max-width: 1023px) {
  .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 36rem; }
  .beneficio { padding: 12px 14px; }
}
@media (max-width: 599px) {
  .beneficios { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
  .beneficio { padding: 14px 0; }
}

/* =========================================================================
   v19 · El celular, sin el arco marrón
   Se saca el marco que lo rodeaba: el celular queda apoyado sobre el marfil
   del Hero, con la luz cálida y la retícula que ya estaban. Se revierten los
   dos ajustes que existían SOLO por el fondo oscuro (el canto de luz del
   cuerpo y la sombra negra), para que no se vean duros sobre el claro.
   ========================================================================= */
.hero__escenario,
.hero__arco-filete { display: none; }

.telefono__cuerpo {
  box-shadow:
    inset 0 0 0 calc(1.4 * var(--u)) rgb(255 255 255 / 0.1),
    inset 0 0 0 calc(3.5 * var(--u)) rgb(0 0 0 / 0.5),
    0 44px 72px -40px rgb(var(--espresso-rgb) / 0.5),
    0 18px 34px -24px rgb(var(--espresso-rgb) / 0.32);
}
.telefono__sombra { background: rgb(var(--espresso-rgb) / 0.2); }

/* Sin el arco, la luz cálida es la que sostiene al celular */
.hero__luz {
  background: radial-gradient(closest-side, rgb(215 165 116 / 0.26), rgb(198 106 69 / 0.1) 55%, transparent 100%);
}