/* ============================================================
   laOra · HOME — hoja propia
   ------------------------------------------------------------
   Traspaso 1:1 del boceto de diseño de la home. Es una hoja
   AUTÓNOMA: la home NO carga `laora.css`, porque aquella define
   `.eyebrow`, `.brand`, `.button`, `footer` y `.footer-links` con
   otro diseño y pisaría esta maqueta clase por clase.

   Lo único que se comparte con el resto del sitio es
   `cabecera.css`, que va sin tocar.

   El boceto venía sobre Tailwind, así que el bloque de abajo
   replica su «preflight» (margen/relleno a cero y line-height 1.5).
   Sin él, decenas de medidas del boceto se descuadran.
   ============================================================ */

*,::before,::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
button{font:inherit;color:inherit;background:transparent;cursor:pointer}
img,svg,video{display:block}
img{width:100%;max-width:100%}

:root{
  --ink:#0b0b0a;
  --ink-soft:#171714;
  --paper:#eee9df;
  --cream:#f7f4ed;
  --gold:#d3a943;
  --gold-soft:#e0c579;
  --line:rgba(16,16,14,.18);
  /* el ámbar del triángulo del logo: es EL oro de la marca */
  --gold-brand:#D4A94B;
  /* contorno oscuro con el que ese oro se lee sobre fondo claro */
  --gold-stroke:#3f3108;
  /* gris de párrafo sobre fondo claro: 7,3:1 (el #666158 del boceto daba 5) */
  --muted:#4e4943;
  /* gris de párrafo sobre fondo oscuro: 9:1 (el #8f8e87 del boceto daba 6) */
  --muted-dark:#b5b3ab;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif;
  /* la cabecera usa su propio ámbar; se le da el del boceto para que
     el logo y el menú vayan a juego con la página */
  --ambar:#d3a943;
}

body{background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* ---------- «club laOra» en el menú ----------
   La palabra «laOra» NO se escribe: se dibuja con el logotipo canónico
   (`.cb-marca` de cabecera.css — Nunito Sans, la O con su triángulo). Lo
   único que se le toca es el CUERPO, para que case con el menú; todas sus
   medidas son en em, así que el dibujo se conserva intacto.

   Aquí va todo en amarillo, también el triángulo: por eso se le pasa a
   `currentColor` en vez de dejarlo en el ámbar fijo de cabecera.css, y así
   además acompaña al hover.

   Las reglas llevan `.cb-menu a.cb-club` delante porque cabecera.css se
   carga DESPUÉS que esta hoja: hace falta más especificidad para ganarle. */
.cb-menu a.cb-club{color:var(--gold-brand);display:inline-flex;align-items:baseline;gap:.36em}
.cb-menu a.cb-club:hover{color:var(--gold-soft)}
.cb-menu a.cb-club .cb-marca{font-size:17px;color:inherit}
.cb-menu a.cb-club .cb-marca .o::before{border-top-color:currentColor}

/* La cabecera real es `position:fixed` en cuanto se hace scroll
   (`cabecera.js` le pone `.cb-pegada`), así que los saltos por anclaje
   tienen que dejarle sitio o tapa el principio de la sección. */
section{scroll-margin-top:92px}

/* ---------- héroe ---------- */
.hero{min-height:790px;height:100svh;position:relative;color:#fff;background:#050505;overflow:hidden}
.hero-media{position:absolute;inset:0;background-image:url("/assets/img/acto4-web.jpg");
  background-size:cover;background-position:center;transform:scale(1.01)}
.hero-overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.86) 40%,rgba(0,0,0,.28) 72%,rgba(0,0,0,.16)),
             linear-gradient(0deg,rgba(0,0,0,.7),transparent 44%)}
.hero-copy{position:absolute;z-index:2;left:7.5vw;top:51%;transform:translateY(-45%);max-width:820px}
.eyebrow{margin:0 0 26px;text-transform:uppercase;letter-spacing:2.2px;font-size:13px;font-weight:700}
.eyebrow.light{color:var(--gold-soft)}

/* ---------- EL ORO DE LA MARCA SOBRE FONDO CLARO ----------
   El ámbar del logo (#D4A94B) sobre crema da 2:1: solo con color no se lee.
   En vez de oscurecerlo hasta volverlo marrón, se le pone un contorno oscuro
   y se pinta el trazo DEBAJO del relleno (`paint-order`), así la letra
   conserva su oro y gana el borde que la separa del fondo.
   El grosor sube con el cuerpo: a 13 px un trazo grueso emborrona. */
.eyebrow:not(.light){color:var(--gold-brand);-webkit-text-stroke:.62px var(--gold-stroke);
  paint-order:stroke fill;text-shadow:0 1px 1.5px rgba(0,0,0,.22)}
/* los navegadores sin -webkit-text-stroke se quedarían con el oro pelado a
   2:1: ahí se cae a un halo oscuro, que sí entienden todos */
@supports not (-webkit-text-stroke:1px #000){
  .eyebrow:not(.light),.section-heading h2 em,.world-selector button span,
  .workshop li span,.stars,.faq-list summary span{
    text-shadow:0 0 2px var(--gold-stroke),0 1px 2px rgba(0,0,0,.55)}
}
.hero h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.045em}
.hero h1{font-size:clamp(54px,5.65vw,88px);line-height:.92;margin:0}
.hero h1 em,h2 em{color:var(--gold-soft);font-weight:400;font-style:italic}
.hero-lead{max-width:700px;font-family:var(--serif);font-size:17px;line-height:1.55;color:#c9c5bd;margin:28px 0 0}
/* blanco puro, con cuerpo y peso: va sobre la foto, así que además lleva
   sombra para que el blanco se vea rotundo y no lavado */
.hero-nearby{max-width:700px;border-left:3px solid var(--gold);padding-left:18px;margin:20px 0 0;
  color:#fff;font-size:17px;font-weight:600;line-height:1.55;letter-spacing:.2px;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 16px rgba(0,0,0,.6)}
.hero-actions{display:flex;align-items:center;gap:34px;margin-top:32px}
/* gap 24 y no 42 como el boceto: aquello estaba calculado para un texto de
   10 px; con 14 px el botón se iba de ancho y partía el rótulo en dos líneas */
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 26px;
  text-transform:uppercase;letter-spacing:1.1px;font-size:14px;font-weight:700;white-space:nowrap;
  transition:transform .2s,background .2s}
.button:hover{transform:translateY(-2px)}
.button-gold{background:var(--gold);color:var(--ink)}
.button-gold:hover{background:#e0bc61}
.button-dark{background:var(--ink);color:#fff}
.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;width:fit-content;
  padding-bottom:8px;border-bottom:1px solid currentColor;text-transform:uppercase;letter-spacing:1.1px;
  font-size:14px;font-weight:700}
.light-link{color:#fff}
.hero-model{position:absolute;z-index:2;right:5vw;bottom:54px;display:grid;gap:5px;text-align:right;
  text-transform:uppercase;font-size:13px;letter-spacing:1.2px;color:#ddd9d1}
.hero-model strong{font-family:var(--serif);text-transform:none;letter-spacing:0;color:#fff;font-size:26px;font-weight:400}
.scroll-cue{position:absolute;z-index:3;left:7.5vw;bottom:38px;display:flex;align-items:center;gap:14px;
  font-size:13px;text-transform:uppercase;letter-spacing:1.2px}
.scroll-cue span{display:block;height:1px;width:54px;background:var(--gold)}

/* ---------- lo que te encuentras ahí fuera ---------- */
.market-section{background:var(--ink-soft);color:#fff;padding:34px 4.5vw 0}
.market-heading{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:6vw}
.market-kicker{margin:0 0 8px;color:var(--gold);text-transform:uppercase;letter-spacing:2px;font-size:13px;font-weight:700}
.market-heading h2{margin:0;font-size:clamp(28px,3vw,44px);line-height:1;letter-spacing:-.035em}
/* la pregunta, compuesta como un titular de periódico: filete doble arriba,
   antetítulo en versales, titular en negrita con interlineado corto y
   entradilla en cursiva bajo un filete fino. Todo en blanco sobre el fondo
   oscuro de la sección, sin tarjeta. */
.market-question{margin:0;max-width:560px;color:#fff;font-family:var(--serif);
  border-top:4px double rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.22);padding:14px 0 16px}
.mq-antetitulo{display:block;font-family:var(--sans);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:2.4px;color:var(--gold-soft);margin-bottom:11px}
.mq-titular{margin:0;font-size:19px;font-weight:700;line-height:1.22;letter-spacing:-.015em}
.mq-titular strong{font-size:1.15em;font-weight:700;color:#fff}
.mq-entradilla{margin:11px 0 0;padding-top:11px;border-top:1px solid rgba(255,255,255,.18);
  font-size:16px;font-style:italic;line-height:1.4;color:#ddd9d1}
.market-grid{display:grid;grid-template-columns:repeat(5,1fr);margin-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.market-card{min-height:164px;position:relative;padding:23px 20px 20px;border-right:1px solid rgba(255,255,255,.16)}
.market-card:last-child{border-right:0}
.market-card-featured{background:rgba(255,255,255,.045)}
/* Los cuerpos de estas tarjetas van al mayor tamaño que cabe en la caja de
   164 px sin tocarla, y en claro: el boceto los dejaba en 8–13 px y en grises
   (#6d695f, #96948e) que sobre este fondo no se leen. */
.market-number{position:absolute;top:14px;right:15px;color:var(--gold-soft);font-size:13px;
  font-weight:700;letter-spacing:1px}
.market-price{display:block;margin:0 0 10px;color:var(--gold);font-family:var(--serif);font-size:34px;
  line-height:1;font-weight:400}
/* en oro de marca: aquí el fondo es oscuro, así que no necesita contorno
   (da 8:1 tal cual) */
.market-card h3{max-width:190px;margin:24px 0 9px;font-family:var(--sans);font-size:13px;line-height:1.25;
  letter-spacing:.6px;text-transform:uppercase;font-weight:700;color:var(--gold-brand)}
.market-card-featured h3{margin-top:0}
/* mismo tamaño, color y peso en las cinco tarjetas: en el boceto la destacada
   iba en negrita y parecía de otro cuerpo */
.market-card p{max-width:205px;margin:0;color:#fff;font-family:var(--serif);font-size:16px;line-height:1.4}
/* Los tres elementos SIEMPRE en una sola fila: `nowrap` lo impone y la frase
   del centro es la única que cede (flex:1 1 auto + min-width:0), así que
   nunca empuja al remate a una segunda línea. El cuerpo escala con el ancho
   para que además quepa en un solo renglón en pantallas de escritorio.
   Por debajo de 900 px ya no hay sitio y pasa a columna (más abajo). */
.market-answer{margin:0 -4.5vw;padding:18px 4.5vw;display:flex;align-items:center;flex-wrap:nowrap;
  gap:14px 24px;background:var(--gold);color:var(--ink)}
.market-answer span{flex:0 0 auto;text-transform:uppercase;letter-spacing:1.4px;font-size:13px;font-weight:700}
.market-answer strong{flex:1 1 auto;min-width:0;font-family:var(--serif);
  font-size:clamp(16px,1.55vw,22px);line-height:1.3;font-weight:400}
/* el remate, a la derecha: chapa oscura sobre el dorado, en mayúsculas */
.market-punch{margin-left:auto;flex:0 0 auto;background:var(--ink);color:#fff;
  padding:12px 18px;text-transform:uppercase;font-family:var(--sans);
  font-size:clamp(13px,1.1vw,15px);font-weight:700;letter-spacing:1.2px;white-space:nowrap}

/* ---------- encuentra tu laOra (los cuatro mundos) ---------- */
.worlds-section{background:var(--cream);padding:130px 7vw 150px}
.section-heading{display:grid;grid-template-columns:1.55fr .65fr;gap:9vw;align-items:end}
.section-heading h2{font-size:clamp(52px,6vw,88px);line-height:.95;margin:0}
/* el ámbar claro del boceto daba aquí 1,5:1 */
.section-heading h2 em{color:var(--gold-brand);-webkit-text-stroke:1.7px var(--gold-stroke);
  paint-order:stroke fill;text-shadow:0 2px 4px rgba(0,0,0,.2)}
.section-heading>p{font-family:var(--serif);line-height:1.65;font-size:18px;color:var(--muted);margin:0 0 10px}
.world-selector{display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.world-selector button{border:0;border-right:1px solid var(--line);background:transparent;padding:22px 20px;
  text-align:left;text-transform:uppercase;font-size:13px;font-weight:700;letter-spacing:.8px;
  line-height:1.3;color:var(--muted);cursor:pointer;transition:background .25s,color .25s}
.world-selector button:last-child{border-right:0}
.world-selector button span{display:block;color:var(--gold-brand);-webkit-text-stroke:.7px var(--gold-stroke);
  paint-order:stroke fill;margin-bottom:10px;font-family:var(--serif);font-size:18px}
.world-selector button.active{background:var(--ink);color:#fff}
.world-selector button.active span{color:var(--gold)}
.world-result{display:grid;grid-template-columns:1.65fr .75fr;min-height:630px;background:#e4ded2}
.world-image-wrap{position:relative;overflow:hidden}
.world-image-wrap img{width:100%;height:100%;object-fit:cover;animation:imageIn .45s ease both}
@keyframes imageIn{from{opacity:.4;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
/* va sobre la foto, que puede ser clara: sin la sombra no hay contraste que valga */
.image-index{position:absolute;left:24px;bottom:22px;color:#fff;font-size:13px;font-weight:700;
  letter-spacing:1.4px;text-shadow:0 1px 5px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.7)}
.world-copy{display:flex;flex-direction:column;justify-content:center;padding:7vw 5vw}
.world-copy h3{font-size:clamp(42px,4vw,66px);line-height:1;margin:0 0 26px}
/* este panel va sobre #e4ded2, más oscuro que el crema del resto: los tonos
   generales se quedan en 6,6:1 aquí, así que se bajan un punto más */
.world-copy>p:not(.eyebrow){font-family:var(--serif);font-size:17px;line-height:1.6;color:#484440}
.world-copy>strong{margin:24px 0 38px;font-family:var(--serif);font-size:20px;font-weight:400}

/* ---------- modelo destacado ---------- */
.flagship{display:grid;grid-template-columns:.85fr 1.15fr;min-height:760px;background:var(--paper)}
.flagship-copy{padding:10vw 7vw;display:flex;flex-direction:column;justify-content:center}
.model-code{margin:0;text-transform:uppercase;letter-spacing:1.3px;color:var(--muted);font-size:13px;font-weight:700}
.flagship h2{font-size:clamp(70px,7vw,112px);line-height:.9;margin:18px 0 28px}
.flagship-claim{max-width:520px;font-family:var(--serif);font-size:25px;line-height:1.25;margin:0 0 24px}
.flagship-body{max-width:510px;font-family:var(--serif);font-size:17px;line-height:1.65;color:var(--muted)}
.spec-row{display:flex;margin-top:34px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-transform:uppercase;font-size:13px;font-weight:700;letter-spacing:1px}
.spec-row span{padding:0 22px;border-right:1px solid var(--line)}
.spec-row span:first-child{padding-left:0}
.spec-row span:last-child{border:0}
/* wrap: si el precio y el botón no caben juntos en la columna, el botón baja
   entero en vez de estrujarse */
.price-row{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:26px 24px;margin-top:35px}
.price-row small,.price-row strong{display:block}
.price-row strong{white-space:nowrap}
.price-row small{text-transform:uppercase;letter-spacing:1px;font-size:13px;font-weight:700;color:var(--muted)}
.price-row strong{margin-top:4px;font-family:var(--serif);font-size:30px;font-weight:400}
.flagship-image{position:relative;overflow:hidden;min-height:650px}
.flagship-image img{height:100%;object-fit:cover}
.flagship-image>span{position:absolute;right:30px;top:28px;color:#fff;font-family:var(--serif);font-size:22px;
  text-shadow:0 1px 5px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.7)}

/* ---------- la diferencia ocurre antes del envío ---------- */
.value-section{background:var(--ink);color:#fff;padding:140px 7vw}
.value-intro{display:grid;grid-template-columns:1fr 2.25fr 1fr;gap:5vw;align-items:end}
.value-intro .eyebrow{align-self:start}
.value-intro h2{font-size:clamp(50px,5.3vw,82px);line-height:.98;margin:0}
.value-intro>p:last-child{font-family:var(--serif);color:#aaa79e;line-height:1.65;font-size:16px}
.value-grid{margin-top:100px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.18)}
.value-grid article{padding:30px 25px 0 0;border-right:1px solid rgba(255,255,255,.18);min-height:230px}
.value-grid article:not(:first-child){padding-left:25px}
.value-grid article:last-child{border-right:0}
.value-grid article>span{display:block;color:var(--gold);font-size:13px;font-weight:700;margin-bottom:52px}
.value-grid strong{font-family:var(--serif);font-size:38px;font-weight:400}
.value-grid p{color:var(--muted-dark);line-height:1.55;font-size:15px;max-width:240px}

/* ---------- el taller ---------- */
.workshop{display:grid;grid-template-columns:1.2fr .8fr;background:var(--cream)}
.workshop-image{min-height:760px}
.workshop-image img{height:100%;object-fit:cover;filter:saturate(.75)}
.workshop-copy{padding:9vw 7vw}
.workshop-copy h2{font-size:clamp(62px,6vw,92px);line-height:.9;margin:0 0 35px}
.workshop-copy>p:not(.eyebrow){font-family:var(--serif);color:var(--muted);font-size:17px;line-height:1.65}
.workshop ol{list-style:none;padding:0;margin:46px 0;border-top:1px solid var(--line)}
.workshop li{padding:16px 0;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:1px;
  font-size:13px;font-weight:700}
.workshop li span{color:var(--gold-brand);-webkit-text-stroke:.62px var(--gold-stroke);
  paint-order:stroke fill;display:inline-block;width:54px}

/* ---------- testimonio ---------- */
.quote-section{text-align:center;padding:140px 12vw;background:var(--paper)}
.stars{color:var(--gold-brand);-webkit-text-stroke:1px var(--gold-stroke);paint-order:stroke fill;
  font-size:26px;letter-spacing:7px;line-height:1;margin:0 0 34px}
.quote-section blockquote{max-width:980px;margin:0 auto;font-family:var(--serif);
  font-size:clamp(34px,4.2vw,63px);line-height:1.14;letter-spacing:-.035em}
.quote-author{margin-top:34px;text-transform:uppercase;letter-spacing:1.3px;font-size:13px;font-weight:700}

/* ---------- compra sin riesgo ---------- */
.assurance-section{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:140px 7vw;background:#0e0e0d;color:#fff}
.assurance-section h2{font-size:clamp(54px,5.7vw,86px);line-height:.95;margin:0 0 32px}
.assurance-section>div:first-child>p:not(.eyebrow){max-width:530px;font-family:var(--serif);color:#c2bfb7;
  font-size:17px;line-height:1.65;margin-bottom:38px}
.assurance-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.18)}
.assurance-list>div{padding:26px 22px;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.assurance-list>div:nth-child(even){border-right:0}
.assurance-list span{color:var(--gold);font-size:13px;font-weight:700}
.assurance-list strong{display:block;margin-top:30px;font-family:var(--serif);font-size:28px;font-weight:400}
.assurance-list p{margin:7px 0 0;color:var(--muted-dark);text-transform:uppercase;letter-spacing:1.1px;font-size:13px}

/* ---------- preguntas ---------- */
.faq-section{padding:130px 7vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:10vw;background:var(--paper)}
.faq-section h2{font-size:clamp(52px,5vw,76px);line-height:.98;margin:0}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line);padding:0}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:30px;
  padding:25px 0;font-family:var(--serif);font-size:19px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{color:var(--gold-brand);-webkit-text-stroke:.9px var(--gold-stroke);
  paint-order:stroke fill;font-family:var(--sans);font-weight:700}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list summary span{display:inline-block;transition:transform .2s ease}
.faq-list details p{margin:-4px 45px 26px 0;color:var(--muted);font-family:var(--serif);font-size:16px;line-height:1.6}

/* ---------- cierre ---------- */
.final-cta{background:var(--ink);color:#fff;text-align:center;padding:145px 7vw}
.final-cta h2{font-size:clamp(68px,8vw,124px);line-height:.84;margin:0 0 48px}
.final-cta .button{justify-content:center}

/* ---------- pie ----------
   El logo del pie NO es el triángulo del boceto: es la marca real de
   laOra (`.cb-marca`, de cabecera.css), que ya va en blanco. */
footer{min-height:220px;padding:55px 6vw 34px;background:#080808;color:#fff;display:grid;
  grid-template-columns:1fr auto;align-items:start;gap:60px;border-top:1px solid rgba(255,255,255,.14)}
/* sin esto el logo se estira a toda la columna y su zona pulsable ocupa
   media anchura del pie */
footer .cb-marca{width:fit-content}
.footer-links{display:flex;gap:28px;text-transform:uppercase;letter-spacing:1.1px;font-size:13px;font-weight:700}
.footer-links a{transition:color .2s ease}
.footer-links a:hover{color:var(--gold-soft)}
footer p{grid-column:1/-1;margin:auto 0 0;color:#adaaa3;font-size:13px;letter-spacing:.8px}

@media(max-width:980px){
  /* Con cinco columnas aquí las tarjetas se quedan en 110–175 px y el texto
     legible las estira a 246 px de alto: la caja deja de ser la caja. Se pasa
     al carrusel horizontal que el diseño ya usa en móvil, que las mantiene en
     su proporción y en sus 164 px. */
  .market-section{padding:34px 0 0}
  .market-heading{padding:0 4.5vw}
  .market-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 4.5vw 10px;scrollbar-width:none}
  .market-grid::-webkit-scrollbar{display:none}
  .market-card{min-width:290px;scroll-snap-align:start;border-left:1px solid rgba(255,255,255,.16)}
  .market-card:last-child{border-right:1px solid rgba(255,255,255,.16)}
  .market-answer{margin:0;padding:18px 4.5vw}
  /* aquí ya no caben los tres en una fila con texto legible: a columna */
  .market-answer{flex-direction:column;align-items:flex-start;gap:14px}
  .market-punch{margin-left:0}
  .hero-media{background-position:58% center}
  .hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.32)),
                           linear-gradient(0deg,rgba(0,0,0,.65),transparent)}
  .section-heading,.value-intro,.faq-section{grid-template-columns:1fr;gap:38px}
  .world-result,.flagship,.workshop,.assurance-section{grid-template-columns:1fr}
  .world-image-wrap{min-height:570px}
  .flagship-image{order:-1}
  .value-intro .eyebrow{margin-bottom:0}
  .value-grid{grid-template-columns:1fr 1fr}
  .value-grid article:nth-child(2){border-right:0}
  .value-grid article{border-bottom:1px solid rgba(255,255,255,.18)}
  .workshop-image{min-height:580px}
}

@media(max-width:660px){
  .hero{min-height:760px}
  .hero-media{background-image:url("/assets/img/acto4-movil.jpg");background-position:63% center;opacity:.76}
  .hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.94) 0,rgba(0,0,0,.67) 72%,rgba(0,0,0,.3)),
                           linear-gradient(0deg,rgba(0,0,0,.84),transparent 60%)}
  .hero-copy{left:22px;right:22px;top:48%}
  .hero h1{font-size:47px}
  .hero-lead{font-size:16px;max-width:90%}
  /* el boceto lo bajaba a 10 px en móvil: justo donde más hay que leerlo */
  .hero-nearby{max-width:100%;font-size:14px}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:24px}
  .hero-model{display:none}
  .scroll-cue{left:22px;bottom:24px}
  .market-section{padding:52px 0 0}
  .market-heading{grid-template-columns:1fr;gap:20px;padding:0 22px}
  .market-heading h2{font-size:36px}
  .mq-titular{font-size:18px}
  .mq-entradilla{font-size:15px}
  .market-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 22px 10px;margin-top:28px;scrollbar-width:none}
  .market-grid::-webkit-scrollbar{display:none}
  .market-card{min-width:74vw;min-height:170px;scroll-snap-align:start;border-left:1px solid rgba(255,255,255,.16)}
  .market-card:last-child{border-right:1px solid rgba(255,255,255,.16)}
  .market-answer{margin:0;padding:18px 22px;align-items:flex-start;flex-direction:column;gap:14px}
  .market-answer strong{line-height:1.35}
  /* en columna, el margin-left:auto lo dejaba descolgado a la derecha */
  .market-punch{margin-left:0}
  .worlds-section,.value-section,.quote-section,.assurance-section,.faq-section,.final-cta{padding:86px 22px}
  .section-heading h2{font-size:49px}
  .world-selector{grid-template-columns:1fr 1fr;margin-top:50px}
  .world-selector button:nth-child(2){border-right:0}
  .world-selector button{border-bottom:1px solid var(--line);padding:18px 14px}
  .world-result{min-height:auto}
  .world-image-wrap{min-height:390px}
  .world-copy{padding:58px 24px}
  .flagship-copy,.workshop-copy{padding:80px 22px}
  .flagship-image,.workshop-image{min-height:470px}
  .flagship h2{font-size:70px}
  .price-row{align-items:stretch;flex-direction:column}
  .spec-row{flex-wrap:wrap;gap:12px 0}
  .value-grid{grid-template-columns:1fr;margin-top:60px}
  .value-grid article,.value-grid article:nth-child(2){border-right:0;padding:25px 0;min-height:180px}
  .value-grid article:not(:first-child){padding-left:0}
  .value-grid article>span{margin-bottom:32px}
  .quote-section blockquote{font-size:32px}
  .assurance-list{grid-template-columns:1fr;margin-top:30px}
  .assurance-list>div,.assurance-list>div:nth-child(even){border-right:0}
  .faq-section{gap:55px}
  .final-cta h2{font-size:62px}
  footer{grid-template-columns:1fr;padding:50px 22px 28px}
  .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
  footer p{grid-column:1}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}