/* =========================================================================
   Fenómenus · landing de la carta digital
   Mobile-first. Los @media son SIEMPRE min-width: se añade, no se parchea.
   Paleta y tipografías tomadas de la marca original.
   ========================================================================= */

/* ----------------------------- Tipografías ----------------------------- */
@font-face{
  font-family:"General Sans";
  src:url("../fuentes/GeneralSans-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"General Sans";
  src:url("../fuentes/GeneralSans-Semibold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
/* Serif de acento, la misma que usa la marca. Solo para citas y frases
   destacadas: da carácter editorial sin ensuciar la lectura. */
@font-face{
  font-family:"Gambetta";
  src:url("../fuentes/Gambetta-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ------------------------------ Variables ------------------------------ */
:root{
  /* Marca */
  --negro:#141414;
  /* Superficies translúcidas en vez de grises opacos: así los halos del fondo
     se ven a través de las secciones y las tarjetas, y la página deja de
     parecer una pila de rectángulos grises. */
  --negro-superficie:rgba(255,255,255,.028);
  --negro-tarjeta:rgba(255,255,255,.045);
  --borde:#3f3f3f;
  --gris:#939393;
  --hueso:#f0f0f1;
  --blanco:#fff;
  --coral:#ff7d50;
  --coral-suave:#ff9b7a;
  --azul:#3858e9;
  --azul-claro:#5872e8;
  --azul-noche:#06102f;

  /* Ritmo vertical: crece con la pantalla */
  --aire: clamp(4.5rem, 11vw, 10rem);
  --ancho: 1200px;
  --radio: 24px;
  --radio-grande: 28px;
}

/* ------------------------------ Cimientos ------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  min-height:100svh;                 /* evita el scroll blanco de Safari iOS */
  overscroll-behavior-y:none;
  background:var(--negro);
  color:var(--hueso);
  position:relative;
  font-family:"General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Halos de color repartidos por toda la página. Van en CSS (no en imágenes de
   fondo como el original) para que pesen cero y no se pixelen en pantallas
   grandes. Se fijan al documento, no a cada sección, para que el degradado
   nunca corte justo en el borde de un bloque. */
body::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(700px 420px at 88% 22%, rgba(255,125,80,.055), transparent 62%),
    radial-gradient(760px 460px at 6% 42%,  rgba(56,88,233,.075),  transparent 64%),
    radial-gradient(680px 400px at 92% 62%, rgba(56,88,233,.06),   transparent 62%),
    radial-gradient(720px 430px at 10% 82%, rgba(255,125,80,.045), transparent 64%);
}

img,svg{max-width:100%; height:auto; display:block}
a{color:inherit}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3{margin:0; line-height:1.15; font-weight:600; letter-spacing:-.02em}
p{margin:0}
strong,b{font-weight:600}

/* Foco visible y sobrio, para navegación por teclado */
:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; border-radius:4px }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--coral); color:#141414; padding:.7rem 1.1rem;
  font-weight:600; border-radius:0 0 8px 0;
}
.saltar:focus{ left:0 }

/* ------------------------------ Utilidades ------------------------------ */
.contenedor{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto }
.estrecho{ max-width:760px }
.centro{ text-align:center; margin-inline:auto }
.acento{ color:var(--coral) }
.solo-pc{ display:none }

.etiqueta{
  display:inline-block;
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral); margin:0 0 1rem;
}
/* Al ser inline-block, "centro" por sí sola no la centraba: necesita ser bloque. */
.etiqueta.centro{ display:block }
.etiqueta--punto{
  border:1px solid rgba(255,125,80,.4); border-radius:999px;
  padding:.4rem .95rem; letter-spacing:.04em; text-transform:none;
  font-size:.8rem; color:var(--coral-suave);
}
.etiqueta--punto::before{
  content:""; display:inline-block; width:7px; height:7px; margin-right:.5rem;
  background:var(--coral); border-radius:50%; vertical-align:middle;
}

.titulo-seccion{
  font-size:clamp(1.85rem, 1.05rem + 3.9vw, 3.9rem);
  margin:0 0 1.15rem;
}
.parrafo{ color:var(--gris); font-size:clamp(1rem,.97rem + .18vw,1.1rem); margin:0 0 1rem; max-width:62ch }
.centro .parrafo{ margin-inline:auto }

/* ------------------------------- Botones ------------------------------- */
.boton{
  display:inline-block; text-decoration:none; font-weight:600;
  padding:.95rem 1.7rem; border-radius:12px; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.boton:hover{ transform:translateY(-2px) }
.boton:active{ transform:translateY(0) }
.boton--azul{
  position:relative; overflow:hidden; isolation:isolate;
  color:#fff;
  background:linear-gradient(180deg, var(--azul-claro), var(--azul));
  box-shadow:0 6px 22px rgba(56,88,233,.35), inset 0 1px 0 rgba(255,255,255,.22);
}
/* Destello que recorre el botón cada pocos segundos: llama la atención sobre
   la llamada a la acción sin moverla ni hacerla parpadear. */
.boton--azul::after{
  content:""; position:absolute; z-index:-1; top:-20%; left:-70%;
  width:45%; height:140%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-22deg);
  animation:destello 5s ease-in-out infinite;
}
@keyframes destello{ 0%,55%{left:-70%} 100%{left:140%} }
.boton--azul:hover{ box-shadow:0 12px 32px rgba(56,88,233,.5) }

.boton--coral{
  color:#1a0d07; background:var(--coral);
  box-shadow:0 6px 22px rgba(255,125,80,.28);
}
.boton--coral:hover{ background:var(--coral-suave); box-shadow:0 12px 30px rgba(255,125,80,.4) }
.boton--ancho{ display:block; width:100% }

@media (prefers-reduced-motion: reduce){
  .boton{transition:none}
  .boton:hover{transform:none}
  .boton--azul::after{ animation:none; display:none }
}

/* ---------------------------- Banner de promo --------------------------- */
.promo{
  background:linear-gradient(90deg, var(--azul-noche), var(--azul));
  color:#fff; text-align:center; padding:.6rem 1rem; font-size:.85rem;
}
.promo__texto{ display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:center; justify-content:center }
.promo__cuenta{ font-variant-numeric:tabular-nums; opacity:.9 }
.promo__enlace{ font-weight:600; text-decoration:underline; text-underline-offset:3px; white-space:nowrap }

/* ------------------------------- Cabecera ------------------------------- */
.cabecera{
  position:sticky; top:0; z-index:50;
  background:rgba(20,20,20,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(63,63,63,.5);
}
.cabecera__fila{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0 }
.cabecera__logo img{ width:clamp(120px, 28vw, 150px) }
.cabecera__nav{ display:flex; gap:clamp(.9rem, 3vw, 1.8rem); font-size:.9rem }
.cabecera__nav a{ text-decoration:none; color:var(--hueso); opacity:.85 }
.cabecera__nav a:hover{ opacity:1; color:var(--coral) }

/* --------------------------------- Hero --------------------------------- */
.hero{ position:relative; overflow:hidden; padding:calc(var(--aire) * .8) 0 var(--aire) }
/* Halo azul del hero. La altura va en px (no en vh) a propósito: con vh, en
   pantallas muy altas el halo se estiraba y teñía de azul todo el bloque. */
.hero__aurora{
  position:absolute; inset:-180px -20% auto -20%; height:760px; pointer-events:none;
  background:
    radial-gradient(42% 55% at 50% 0%, rgba(56,88,233,.5), transparent 68%),
    radial-gradient(28% 38% at 76% 8%, rgba(88,114,232,.22), transparent 70%);
  filter:blur(24px);
}
.hero__rejilla{ position:relative; display:grid; gap:clamp(2.5rem, 8vw, 4rem) }
.hero__titulo{
  font-size:clamp(2.2rem, 1.05rem + 5.2vw, 4.1rem);
  margin:0 0 1.25rem; text-wrap:balance;
}
.hero__sub{ color:var(--gris); font-size:clamp(1.05rem,.98rem + .35vw,1.2rem); margin:0 0 2rem; max-width:36ch }
.hero__sub strong{ color:var(--hueso) }

.hero__visual{ display:grid; gap:2rem; justify-items:center }
.hero__movil{ width:min(78%, 300px); filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) }

.hero__puntos{ display:grid; gap:1.15rem; width:100% }
.hero__puntos li{ display:flex; gap:.85rem; align-items:flex-start }
.hero__puntos img{ flex:0 0 auto; margin-top:.15rem }
.hero__puntos b{
  display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blanco); margin-bottom:.15rem;
}
.hero__puntos span{ display:block; color:var(--gris); font-size:.92rem; line-height:1.5 }

/* --------------------------- Cinta de marcas --------------------------- */
.marcas{ border-block:1px solid rgba(63,63,63,.5); padding:1.6rem 0; overflow:hidden }
.marcas__cinta{ display:flex; gap:3rem; width:max-content; animation:desfile 40s linear infinite }
.marcas__cinta img{ height:34px; width:auto; opacity:.65 }
@keyframes desfile{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){
  .marcas__cinta{ animation:none; width:100%; justify-content:center; overflow-x:auto }
}

/* ------------------------------- Métricas ------------------------------- */
.metricas{ padding:var(--aire) 0 0 }
.metricas__lista{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; text-align:center;
}
.metricas__lista b{
  display:block; color:var(--coral); font-size:clamp(1.6rem, 1rem + 3vw, 2.6rem); line-height:1.1;
}
.metricas__lista span{ display:block; color:var(--gris); font-size:.82rem; margin-top:.25rem }
.metricas__pie{ text-align:center; color:var(--gris); margin-top:1.6rem; font-size:.95rem }

/* ------------------------------- Problema ------------------------------- */
.problema{ padding:var(--aire) 0 }

/* -------------------------- Bloques de beneficio ------------------------ */
.bloque{ padding:calc(var(--aire) * .6) 0 }
.bloque__rejilla{ display:grid; gap:2.5rem; align-items:center }
.bloque__foto{
  width:100%; border-radius:var(--radio-grande); border:1px solid rgba(63,63,63,.5);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}

.ventajas{ display:grid; gap:1.1rem; margin-top:1.8rem }
.ventajas li{ display:flex; gap:.8rem; align-items:flex-start }
.ventajas img{ flex:0 0 auto; margin-top:.2rem }
.ventajas b{
  display:block; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blanco); margin-bottom:.1rem;
}
.ventajas span{ display:block; color:var(--gris); font-size:.92rem; line-height:1.5 }

/* Comparador antes / después */
.comparador{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
.comparador__lado{ margin:0; position:relative }
.comparador__lado img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:18px; border:1px solid rgba(63,63,63,.5);
}
.comparador__lado--mal img{ filter:saturate(.75) }
.comparador__lado figcaption{
  position:absolute; top:.6rem; left:.6rem;
  display:flex; align-items:center; gap:.35rem;
  background:rgba(20,20,20,.82); backdrop-filter:blur(6px);
  border-radius:999px; padding:.3rem .7rem;
  font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.marca--mal{ color:#ff6b6b }
.marca--bien{ color:#51cf66 }
.comparador__nota{ color:var(--gris); font-size:.9rem; margin-top:.9rem; text-align:center }

/* --------------------------- Cuentas son claras -------------------------- */
.cuentas{ padding:var(--aire) 0 }
.cuentas__caja{
  margin-top:2.5rem; padding:clamp(1.75rem, 5vw, 3.25rem);
  background:var(--negro-tarjeta); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radio-grande);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
/* En móvil la operación se lee en vertical (así el "=" no se queda descolgado
   al final de una línea); a partir de 600 px pasa a leerse en horizontal. */
.cuentas__operacion{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; margin-bottom:1.5rem;
}
.cuentas__dato{ text-align:center }
.cuentas__dato b{ display:block; font-size:clamp(1.5rem, 1rem + 2.6vw, 2.4rem); line-height:1.1 }
.cuentas__dato small{ display:block; color:var(--gris); font-size:.78rem; margin-top:.2rem }
.cuentas__signo{ color:var(--gris); font-size:1.4rem }
.cuentas__dato--total b{ font-size:clamp(2rem, 1.2rem + 4vw, 3.4rem) }
.cuentas__frase{ color:var(--hueso); margin-bottom:.8rem }
.cuentas__letra{ color:var(--gris); font-size:.78rem; margin-bottom:1.6rem }

/* ------------------------------- La lógica ------------------------------- */
.logica{ padding:var(--aire) 0; background:var(--negro-superficie) }
.logica__lista{ display:grid; gap:2rem; margin-top:2.5rem }
.logica__lista b{ display:block; font-size:clamp(2rem, 1.4rem + 3vw, 2.8rem); line-height:1 }
.logica__lista h3{
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  margin:.5rem 0 .6rem; color:var(--blanco);
}
.logica__lista p{ color:var(--gris); font-size:.95rem }
.logica__pie{ text-align:center; color:var(--gris); margin-top:2.5rem; font-size:.9rem }

/* --------------------------------- Casos --------------------------------- */
.casos{ padding:var(--aire) 0 }
.casos__lista{ display:grid; gap:1.2rem; margin-top:2.5rem }
.caso{
  background:var(--negro-tarjeta); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radio-grande); overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  display:flex; flex-direction:column; gap:.7rem;
  padding:0 1.5rem 1.5rem;
}
/* Vídeo del caso: sin controles a propósito. Los reproductores incrustados
   enseñan el botón de pausa cada vez que reinician el bucle; así no. */
.caso__video{ margin:0 -1.5rem .4rem }
.caso__video video{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  background:var(--negro-superficie);
}
.caso__cabeza{ display:flex; justify-content:space-between; align-items:center; gap:1rem }
.caso__ciudad{ color:var(--gris); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase }
.caso__nota{ font-weight:600; font-size:.9rem; white-space:nowrap }
.caso__estrella{ color:#ffc107 }
.caso__nombre{ font-size:1.3rem }
.caso__cita{
  margin:0; color:var(--hueso); flex:1;
  font-family:"Gambetta", Georgia, serif;
  font-size:1.08rem; line-height:1.5; opacity:.9;
}
.caso__enlace{
  color:var(--coral); text-decoration:none; font-weight:600; font-size:.9rem;
  align-self:flex-start;
}
.caso__enlace:hover{ text-decoration:underline; text-underline-offset:3px }

/* -------------------------------- Garantía -------------------------------- */
.garantia{ padding:var(--aire) 0; background:var(--negro-superficie) }
.garantia__icono{ margin:0 auto 1.2rem }
.garantia__cierre{ color:var(--coral); font-weight:600; margin-top:1rem }

/* --------------------------- Comparativa de mesas -------------------------- */
.mesas{ padding:var(--aire) 0 }
.mesas__intro{ display:grid; gap:1rem; margin:2rem auto 2.5rem; max-width:900px }
.mesas__par{ display:grid; gap:1.2rem }
.mesa{
  background:var(--negro-tarjeta); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radio-grande); padding:1.8rem;
  box-shadow:0 18px 44px rgba(0,0,0,.3);
}
.mesa h3{ font-size:1.1rem; margin:.8rem 0 1rem }
.mesa ul{ display:grid; gap:.55rem; color:var(--gris); font-size:.95rem }
.mesa li{ padding-left:1.1rem; position:relative }
.mesa li::before{ content:"·"; position:absolute; left:.25rem; color:var(--borde); font-weight:700 }
.mesa__total{ margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--borde); font-size:1.05rem }
.mesa__total b{ font-size:1.25rem }
.mesa--despues{ border-color:rgba(255,125,80,.45) }

/* -------------------------------- Fundador -------------------------------- */
.fundador{ padding:var(--aire) 0; background:var(--negro-superficie) }
.fundador__rejilla{ display:grid; gap:2rem; align-items:center }
.fundador__foto{ position:relative; justify-self:center; max-width:340px }
.fundador__firma{
  position:absolute; left:0; right:0; bottom:.5rem; text-align:center;
  font-size:clamp(1.3rem,5vw,1.8rem); font-weight:600; color:var(--coral);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.fundador__frase{
  font-family:"Gambetta", Georgia, serif;
  font-size:clamp(1.35rem, .95rem + 1.9vw, 2.1rem);
  font-weight:400; line-height:1.35; margin:0 0 1.3rem;
}
.fundador blockquote{ margin:0 }
.fundador__cargo{ margin-top:1.2rem; font-size:.9rem }
.fundador__cargo b{ display:block; color:var(--blanco) }
.fundador__cargo span{ color:var(--gris) }

/* --------------------------------- Precio --------------------------------- */
.precio{ padding:var(--aire) 0 }
.precio__rejilla{ display:grid; gap:1.5rem; margin-top:2.5rem }
.precio__incluye{ display:grid; gap:.75rem; align-content:start }
.precio__incluye li{
  padding:.85rem 1rem .85rem 2.4rem; position:relative;
  background:var(--negro-tarjeta); border:1px solid rgba(255,255,255,.08); border-radius:14px;
  font-size:.92rem; letter-spacing:.02em;
}
.precio__incluye li::before{
  content:"✓"; position:absolute; left:1rem; color:var(--coral); font-weight:700;
}
.precio__tarjeta{
  background:linear-gradient(180deg, rgba(56,88,233,.12), rgba(255,255,255,.045));
  border:1px solid rgba(255,125,80,.35); border-radius:var(--radio-grande);
  box-shadow:0 28px 70px rgba(0,0,0,.4);
  padding:clamp(1.5rem, 5vw, 2.2rem); text-align:center;
}
.precio__titulo{ color:var(--gris); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase }
.precio__cifra{ display:flex; align-items:baseline; justify-content:center; gap:.3rem; margin:.6rem 0 1.2rem }
.precio__cifra b{ font-size:clamp(3.5rem, 2rem + 8vw, 5.5rem); line-height:1; color:var(--coral) }
.precio__cifra span{ font-size:1.1rem; color:var(--hueso) }
.precio__sin{ display:grid; gap:.4rem; color:var(--gris); font-size:.9rem; margin-bottom:1.5rem }
.precio__regalo{
  border-top:1px solid var(--borde); padding-top:1.2rem; margin-bottom:1.5rem;
}
.precio__regalo strong{ color:var(--coral) }
.precio__oferta{ color:var(--gris); font-size:.85rem; margin-top:.2rem }
.precio__letra{ color:var(--gris); font-size:.72rem; margin-top:.5rem; opacity:.8 }

/* ----------------------------------- FAQ ----------------------------------- */
.faq{ padding:var(--aire) 0; background:var(--negro-superficie) }
.faq__lista{ display:grid; gap:.8rem; margin-top:2.5rem }
.faq__item{
  background:var(--negro-tarjeta); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:1.2rem 1.4rem;
  transition:border-color .2s ease;
}
.faq__item[open]{ border-color:rgba(255,125,80,.35) }
.faq__item summary{
  cursor:pointer; font-weight:600; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{
  content:"+"; color:var(--coral); font-size:1.4rem; line-height:1; flex:0 0 auto;
}
.faq__item[open] summary::after{ content:"−" }
.faq__item p{ color:var(--gris); font-size:.95rem; margin-top:.9rem }

/* ------------------------------------ Pie ----------------------------------- */
.pie{ border-top:1px solid var(--borde); padding:2.5rem 0 6rem }
.pie__fila{ display:grid; gap:1rem; justify-items:center; text-align:center }
.pie__claim{ color:var(--gris); font-size:.9rem; max-width:46ch }
.pie__legal{ color:var(--gris); font-size:.78rem; opacity:.75 }

/* ------------------------------ Botón flotante ------------------------------ */
.flotante{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:60;
  background:linear-gradient(180deg, var(--azul-claro), var(--azul)); color:#fff;
  text-align:center; text-decoration:none; font-weight:600;
  padding:.95rem 1.5rem; border-radius:12px;
  box-shadow:0 8px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  transition:opacity .25s ease, transform .25s ease;
}
.flotante[hidden]{ display:none }
.flotante.oculto{ opacity:0; transform:translateY(120%); pointer-events:none }

/* ===========================================================================
   ESCRITORIO — se añade a partir de aquí, nunca se parchea lo anterior
   =========================================================================== */

@media (min-width:600px){
  .comparador{ gap:1rem }
  .casos__lista{ grid-template-columns:repeat(2,1fr) }
  .mesas__par{ grid-template-columns:repeat(2,1fr) }
  .cuentas__operacion{ flex-direction:row; flex-wrap:wrap; gap:.8rem 1.4rem }
}

@media (min-width:900px){
  .solo-pc{ display:inline }

  /* Hero a dos columnas, con el móvil grande a la derecha */
  .hero{ padding:clamp(4rem,7vw,6rem) 0 var(--aire) }
  .hero__rejilla{ grid-template-columns:1.08fr 1fr; align-items:center; gap:2.5rem }
  .hero__texto{ padding-right:1rem }
  .hero__visual{
    grid-template-columns:auto 1fr; align-items:center; gap:2rem; justify-items:start;
  }
  .hero__movil{ width:min(100%, 290px) }
  .hero__puntos{ gap:1.6rem }

  /* Bloques alternos: texto a un lado, imagen al otro */
  .bloque__rejilla{ grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,5rem) }
  .bloque--invertido .bloque__texto{ order:2 }
  .bloque--invertido .bloque__visual{ order:1 }

  .casos__lista{ grid-template-columns:repeat(3,1fr) }
  .logica__lista{ grid-template-columns:repeat(3,1fr); gap:2.5rem }
  .mesas__intro{ grid-template-columns:1fr 1fr; gap:2.5rem }

  /* Precio: lista a la izquierda, tarjeta a la derecha */
  .precio__rejilla{ grid-template-columns:1.15fr .85fr; gap:2.5rem; align-items:start }
  .precio__incluye{ grid-template-columns:1fr 1fr }

  .fundador__rejilla{ grid-template-columns:.85fr 1.15fr; gap:3.5rem }
  .fundador__foto{ justify-self:start; max-width:100% }

  .pie__fila{
    grid-template-columns:auto 1fr auto; justify-items:start; text-align:left; gap:2rem;
    align-items:center;
  }
  .pie__legal{ justify-self:end }

  /* En escritorio el botón flotante se recoge a la derecha */
  .flotante{ left:auto; right:1.5rem; bottom:1.5rem; padding:.9rem 1.6rem }
  .pie{ padding-bottom:3rem }
}

@media (min-width:1100px){
  .hero__movil{ width:min(100%, 330px) }
  .metricas__lista{ gap:2rem }
}