:root{
  --verde:#2E7D32; --verde-osc:#1E5A22; --hoja:#43A047; --hoja-clara:#E6F2E6;
  --tinta:#122019; --tinta-2:#1A2C22; --papel:#F4F7F3; --blanco:#fff;
  --linea:#DCE4DD; --gris:#56655C;
  --display:"Outfit", "Arial Black", system-ui, sans-serif;
  --texto:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-l:30px; --r-m:20px; --r-s:12px;
  --ancho:min(1220px, calc(100% - 40px));
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(90px + env(safe-area-inset-top,0px)); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--papel); color:var(--tinta); font-family:var(--texto); font-size:17px; line-height:1.6; overflow-x:hidden}
img,svg,video{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display); margin:0; line-height:1.02; letter-spacing:-.02em}
p{margin:0}
.wrap{width:var(--ancho); margin-inline:auto}
:focus-visible{outline:3px solid var(--hoja); outline-offset:3px; border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-fill{fill:currentColor;stroke:none}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; gap:.6em; padding:.95em 1.5em; border-radius:999px; font-family:var(--display); font-weight:700; font-size:1rem; text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .25s ease, background .25s, color .25s, box-shadow .25s; white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-verde{background:var(--verde); color:#fff; box-shadow:0 12px 30px -12px rgba(46,125,50,.8)}
.btn-verde:hover{background:var(--hoja)}
.btn-borde{border-color:rgba(255,255,255,.55); color:#fff}
.btn-borde:hover{background:#fff; color:var(--tinta)}
.btn-blanco{background:#fff; color:var(--verde-osc)}
.btn-tinta{background:var(--tinta); color:#fff}
.btn-tinta:hover{background:var(--verde)}
.btn-linea{border-color:var(--linea); color:var(--tinta); background:#fff}
.btn-linea:hover{border-color:var(--verde); color:var(--verde)}

/* ---------- Barra de progreso ---------- */
#progreso{position:fixed; top:0; left:0; height:3px; width:100%; background:var(--hoja); transform-origin:0 50%; transform:scaleX(0); z-index:80}

/* ---------- Cabecera ---------- */
.cab{position:fixed; top:0; left:0; right:0; z-index:60; padding-top:env(safe-area-inset-top,0px); transition:background .35s, box-shadow .35s, color .35s; color:#fff}
.cab .topbar{max-height:40px; overflow:hidden; transition:max-height .35s, opacity .35s; border-bottom:1px solid rgba(255,255,255,.12); font-size:.84rem}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; height:40px; gap:20px}
.topbar a{text-decoration:none; display:inline-flex; align-items:center; gap:.45em; opacity:.9}
.topbar a:hover{opacity:1; color:var(--hoja)}
.topbar-izq,.topbar-der{display:flex; gap:22px; align-items:center}
.estado{display:inline-flex; align-items:center; gap:.5em; font-weight:600}
.estado i{width:8px; height:8px; border-radius:50%; background:#9aa59f}
.estado.abierto i{background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:latido 2s infinite}
@keyframes latido{70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.nav{display:flex; align-items:center; justify-content:space-between; height:84px; gap:24px; transition:height .35s}
.marca{display:block; height:74px; transition:height .35s}
.marca img{height:100%; width:auto}
.marca .logo-color{display:none}
.menu{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0}
.menu a{text-decoration:none; font-family:var(--display); font-weight:600; font-size:1rem; position:relative; padding:6px 0}
.menu a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--hoja); transform:scaleX(0); transform-origin:left; transition:transform .3s}
.menu a:hover::after{transform:scaleX(1)}
.nav-der{display:flex; align-items:center; gap:14px}
.idioma{display:flex; border:1.5px solid currentColor; border-radius:999px; overflow:hidden; font-family:var(--display); font-weight:700; font-size:.8rem; opacity:.85}
.idioma button{background:none; border:0; color:inherit; padding:.35em .75em; cursor:pointer; font:inherit}
.idioma button[aria-pressed="true"]{background:var(--verde); color:#fff}
.nav .btn{padding:.7em 1.2em; font-size:.95rem}
.hamb{display:none; background:none; border:0; color:inherit; width:44px; height:44px; cursor:pointer; padding:0}
.hamb span{display:block; width:26px; height:2.5px; background:currentColor; margin:6px auto; border-radius:2px; transition:transform .3s, opacity .3s}
.cab.solida{background:rgba(255,255,255,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--tinta); box-shadow:0 10px 30px -20px rgba(18,32,25,.5)}
.cab.solida .topbar{max-height:0; opacity:0; border:0}
.cab.solida .nav{height:70px}
.cab.solida .marca{height:54px}
.cab.solida .logo-blanco{display:none}
.cab.solida .logo-color{display:block}

/* Menú móvil */
.menu-movil{position:fixed; inset:0; z-index:70; background:var(--tinta); color:#fff; display:flex; flex-direction:column; justify-content:center; padding:40px 28px calc(40px + env(safe-area-inset-bottom,0px)); transform:translateY(-100%); transition:transform .45s cubic-bezier(.7,0,.2,1); visibility:hidden}
.menu-movil.abierto{transform:none; visibility:visible}
.menu-movil ul{list-style:none; padding:0; margin:0 0 34px}
.menu-movil li a{display:block; font-family:var(--display); font-size:2.1rem; font-weight:800; text-decoration:none; padding:.25em 0; border-bottom:1px solid rgba(255,255,255,.1)}
.menu-movil .cerrar{position:absolute; top:calc(18px + env(safe-area-inset-top,0px)); right:20px; background:none; border:0; color:#fff; font-size:2.4rem; cursor:pointer; line-height:1; width:48px; height:48px}

/* ---------- Portada ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; background:var(--tinta); color:#fff; overflow:hidden; isolation:isolate}
.hero-medio{position:absolute; inset:0; z-index:-2; background:
  radial-gradient(60% 70% at 78% 45%, #2b4a36 0%, transparent 70%),
  radial-gradient(40% 50% at 95% 90%, #1f5a24 0%, transparent 70%),
  linear-gradient(180deg,#0f1a14,#16261d)}
.hero-medio video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s}
.hero-medio video.listo{opacity:1}
.estela{position:absolute; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); filter:blur(.5px); animation:estela linear infinite; opacity:.7}
.estela.v{background:linear-gradient(90deg,transparent,rgba(67,160,71,.9),transparent); height:3px}
@keyframes estela{from{transform:translateX(110vw)} to{transform:translateX(-60vw)}}
.hero-sombra{position:absolute; inset:0; z-index:-1; background:
  linear-gradient(90deg, rgba(12,20,15,.94) 0%, rgba(12,20,15,.78) 38%, rgba(12,20,15,.25) 75%, rgba(12,20,15,.1) 100%),
  linear-gradient(0deg, rgba(12,20,15,.85) 0%, transparent 35%)}
.hero-cont{padding:170px 0 120px; max-width:760px}
.pastilla{display:inline-flex; align-items:center; gap:.55em; padding:.5em 1em; border:1.5px solid rgba(255,255,255,.35); border-radius:999px; font-weight:600; font-size:.92rem; background:rgba(255,255,255,.06); backdrop-filter:blur(6px)}
.pastilla svg{color:var(--hoja)}
.hero h1{font-size:clamp(2.6rem, 6.4vw, 5.3rem); font-weight:900; text-transform:uppercase; line-height:.98; margin:26px 0 24px; letter-spacing:-.025em}
.hero h1 .linea{display:block}
.velocidad{display:inline-flex; flex-direction:column; gap:.1em; vertical-align:middle; margin-left:.18em; width:.7em}
.velocidad i{display:block; height:.1em; border-radius:1em; background:var(--hoja)}
.velocidad i:nth-child(2){width:80%; margin-left:20%}
.velocidad i:nth-child(3){width:55%; margin-left:45%}
.hero-sub{font-size:clamp(1.05rem,1.6vw,1.25rem); max-width:560px; color:rgba(255,255,255,.85)}
.hero-acc{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.hero-google{display:inline-flex; align-items:center; gap:.7em; margin-top:34px; text-decoration:none; font-size:.95rem; color:rgba(255,255,255,.85)}
.hero-google strong{font-family:var(--display); font-size:1.15rem; color:#fff}
.estrellas{display:inline-flex; gap:2px; color:#FBBC04}
.estrellas svg{width:17px; height:17px}
.aviso-foto{position:absolute; right:24px; bottom:26px; font-size:.78rem; padding:.45em .9em; border:1px dashed rgba(255,255,255,.4); border-radius:999px; color:rgba(255,255,255,.7); display:flex; gap:.5em; align-items:center}
/* Secuencia de entrada de la portada */
.js .hero-cont > *{opacity:0; transform:translateY(26px)}
.cargado .hero-cont > *{opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.cargado .hero-cont > *:nth-child(2){transition-delay:.12s}
.cargado .hero-cont > *:nth-child(3){transition-delay:.26s}
.cargado .hero-cont > *:nth-child(4){transition-delay:.4s}
.cargado .hero-cont > *:nth-child(5){transition-delay:.52s}

/* ---------- Cinta ---------- */
.cinta{background:var(--verde); color:#fff; overflow:hidden; padding:16px 0; font-family:var(--display); font-weight:700; font-size:1.05rem}
.cinta-pista{display:flex; width:max-content; animation:desliza 38s linear infinite}
.cinta-pista span{display:inline-flex; align-items:center; gap:22px; padding-right:22px; white-space:nowrap}
.cinta svg{width:18px; height:18px; color:#b9e3bb}
@keyframes desliza{to{transform:translateX(-50%)}}

/* ---------- Secciones ---------- */
.sec{padding:clamp(80px,10vw,130px) 0}
.sec-blanca{background:#fff}
.cabeza{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end; margin-bottom:54px}
.cabeza h2, .h2{font-size:clamp(2.1rem,4.6vw,3.6rem); font-weight:800}
.cabeza p, .entrada{color:var(--gris); font-size:1.1rem; max-width:52ch}

/* Servicios */
.servicios{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(270px,auto); gap:18px}
.tile{position:relative; border-radius:var(--r-l); overflow:hidden; color:#fff; text-decoration:none; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; isolation:isolate; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s ease, box-shadow .35s; box-shadow:0 0 0 0 transparent}
.tile:hover{box-shadow:0 0 0 2px var(--hoja), 0 30px 60px -28px rgba(46,125,50,.75)}
.tile-grande{grid-column:span 2; grid-row:span 2; padding:38px}
.tile-ancha{grid-column:span 2}
.tile-foto{position:absolute; inset:0; z-index:-2; background:linear-gradient(140deg,#24402f,#101b15); transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile-foto{transform:scale(1.06)}
.tile-foto img{width:100%; height:100%; object-fit:cover}
.tile::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(12,20,15,.92) 0%, rgba(12,20,15,.35) 55%, rgba(12,20,15,.05) 100%)}
.falta-foto{position:absolute; top:18px; left:18px; font-size:.74rem; padding:.35em .8em; border:1px dashed rgba(255,255,255,.35); border-radius:999px; color:rgba(255,255,255,.7); background:rgba(0,0,0,.2)}
.tile .ico-srv{width:50px; height:50px; border-radius:15px; background:var(--verde); display:grid; place-items:center; margin-bottom:18px}
.tile .ico-srv svg{width:26px; height:26px}
.tile h3{font-size:1.55rem; font-weight:800; margin-bottom:8px}
.tile-grande h3{font-size:clamp(2rem,3.4vw,2.8rem)}
.tile p{color:rgba(255,255,255,.82); font-size:.98rem; max-width:40ch}
.tile .mas{margin-top:16px; font-family:var(--display); font-weight:700; font-size:.95rem; display:inline-flex; align-items:center; gap:.4em; color:#b9e3bb}
.tile .mas svg{transition:transform .3s}
.tile:hover .mas svg{transform:translateX(5px)}
.etiqueta-multi{display:inline-flex; align-self:flex-start; gap:.5em; align-items:center; background:#fff; color:var(--verde-osc); font-weight:700; font-size:.85rem; padding:.45em .9em; border-radius:999px; margin-bottom:18px}
.tile-movilidad{grid-column:1 / -1; min-height:230px; background:var(--hoja-clara); color:var(--tinta); flex-direction:row; align-items:center; justify-content:space-between; gap:30px}
.tile-movilidad::after{display:none}
.tile-movilidad p{color:var(--gris); font-size:1.05rem; max-width:58ch}
.tile-movilidad h3{font-size:clamp(1.6rem,3vw,2.3rem)}
.tile-movilidad .mas{color:var(--verde)}
.tile-movilidad .btn{flex:none}

/* Multimarca */
.multi{background:#fff; overflow:hidden}
.multi-gr{display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:center}
.multi h2{font-size:clamp(2.4rem,5.6vw,4.6rem); font-weight:900}
.multi h2 .gris{color:#b7c3bb; display:block}
.multi p{color:var(--gris); font-size:1.1rem}
.multi-lista{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px}
.multi-lista li{display:flex; gap:.7em; align-items:flex-start; font-weight:600}
.multi-lista svg{color:var(--verde); margin-top:.2em}
.marcas{margin-top:70px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marcas-pista{display:flex; width:max-content; animation:desliza 45s linear infinite}
.marcas-pista span{font-family:var(--display); font-weight:900; font-size:clamp(2.4rem,6vw,4.4rem); text-transform:uppercase; padding:0 .55em; color:transparent; -webkit-text-stroke:1.5px #b7c3bb; white-space:nowrap; transition:color .3s}
.marcas-pista span:hover{color:var(--verde); -webkit-text-stroke-color:var(--verde)}
.marcas-nota{text-align:center; color:var(--gris); margin-top:18px; font-size:.95rem}

/* Contadores */
.numeros{background:var(--tinta); color:#fff; position:relative; overflow:hidden}
.numeros::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 120px); pointer-events:none}
.numeros .wrap{position:relative}
.numeros-cab{display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:56px; flex-wrap:wrap}
.numeros-cab h2{font-size:clamp(1.9rem,3.6vw,2.8rem); font-weight:800; max-width:16ch}
.numeros-cab p{color:rgba(255,255,255,.7); max-width:42ch}
.contadores{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.contador{padding:10px 34px 10px 0; border-left:1px solid rgba(255,255,255,.14); padding-left:34px}
.contador:first-child{border-left:0; padding-left:0}
.contador .cifra{font-family:var(--display); font-weight:900; font-size:clamp(3.2rem,7.4vw,6.2rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.contador .cifra b{color:var(--hoja); font-weight:900}
.contador .que{margin-top:12px; font-size:1.1rem; color:rgba(255,255,255,.82); font-weight:500}
.barra-g{margin-top:60px; padding-top:28px; border-top:1px solid rgba(255,255,255,.14); display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.barra-g a{color:#b9e3bb; font-weight:600}

/* Ventajas */
.ventajas{display:grid; grid-template-columns:repeat(4,1fr); gap:34px}
.ventaja .circ{width:62px; height:62px; border-radius:50%; background:var(--hoja-clara); color:var(--verde); display:grid; place-items:center; margin-bottom:20px; transition:background .3s, color .3s, transform .3s}
.ventaja:hover .circ{background:var(--verde); color:#fff; transform:rotate(-8deg)}
.ventaja .circ svg{width:28px; height:28px}
.ventaja h3{font-size:1.35rem; font-weight:700; margin-bottom:8px; letter-spacing:-.01em}
.ventaja p{color:var(--gris)}

/* Matriculación */
.matri-gr{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start}
.matri-izq .h2{margin-bottom:22px}
.matri-izq .entrada{margin-bottom:28px}
.dato-dgt{display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:18px 20px}
.dato-dgt .circ{width:48px; height:48px; border-radius:14px; background:var(--verde); color:#fff; display:grid; place-items:center; flex:none}
.dato-dgt strong{font-family:var(--display); display:block; font-size:1.1rem}
.dato-dgt span{color:var(--gris); font-size:.95rem}
.packs{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.pack{background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); padding:34px 30px; display:flex; flex-direction:column}
.pack-top{background:var(--tinta); color:#fff; border-color:var(--tinta); position:relative}
.pack .tipo{font-weight:700; color:var(--verde); font-size:.95rem}
.pack-top .tipo{color:#b9e3bb}
.pack h3{font-size:1.85rem; font-weight:800; margin:6px 0 12px}
.pack .desc{color:var(--gris); margin-bottom:22px}
.pack-top .desc{color:rgba(255,255,255,.75)}
.pack h4{font-family:var(--display); font-size:1rem; margin:0 0 10px; font-weight:700}
.pack ul{list-style:none; padding:0; margin:0 0 22px; display:grid; gap:9px}
.pack li{display:flex; gap:.6em; align-items:flex-start; font-size:.98rem}
.pack li svg{color:var(--hoja); margin-top:.22em; width:1.05em; height:1.05em}
.pack .traer{background:var(--papel); border-radius:var(--r-s); padding:16px 18px; margin-bottom:24px}
.pack-top .traer{background:rgba(255,255,255,.07)}
.pack .btn{margin-top:auto; justify-content:center}

/* Envíos */
.envio{background:var(--verde); color:#fff; position:relative; overflow:hidden}
.envio::before{content:""; position:absolute; width:760px; height:760px; right:-220px; top:-260px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.14), transparent 65%)}
.envio-gr{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; position:relative}
.envio h2{font-size:clamp(2.3rem,5vw,4rem); font-weight:900}
.envio p{font-size:1.15rem; color:rgba(255,255,255,.88); margin:22px 0 32px; max-width:48ch}
.envio .rayas{display:flex; flex-direction:column; gap:10px; margin-bottom:26px}
.envio .rayas i{display:block; height:10px; border-radius:9px; background:rgba(255,255,255,.85)}
.envio .rayas i:nth-child(1){width:70px}.envio .rayas i:nth-child(2){width:52px; margin-left:18px}.envio .rayas i:nth-child(3){width:34px; margin-left:36px}
.envio-foto{aspect-ratio:4/3.4; border-radius:var(--r-l); background:linear-gradient(150deg,#1E5A22,#123a17); position:relative; overflow:hidden; display:grid; place-items:center}
.envio-foto svg.gran{width:46%; height:auto; color:rgba(255,255,255,.22); stroke-width:1.2}
.envio-sello{position:absolute; left:22px; bottom:22px; background:#fff; color:var(--tinta); border-radius:var(--r-m); padding:14px 18px; display:flex; gap:12px; align-items:center; font-weight:600; box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.envio-sello svg{color:var(--verde); width:28px; height:28px}

/* Redes */
.redes-cab{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; margin-bottom:46px}
.redes-datos{display:flex; gap:16px; flex-wrap:wrap}
.red{border:1px solid var(--linea); border-radius:var(--r-m); padding:20px 24px; min-width:220px; text-decoration:none; background:#fff; transition:border-color .3s, transform .3s}
.red:hover{border-color:var(--verde); transform:translateY(-3px)}
.red-top{display:flex; align-items:center; gap:.6em; font-weight:700; margin-bottom:6px}
.red-top svg{width:22px; height:22px}
.red .n{font-family:var(--display); font-size:2.2rem; font-weight:800; line-height:1.1}
.red .s{color:var(--gris); font-size:.92rem}
.red .seguir{display:inline-block; margin-top:10px; color:var(--verde); font-weight:700; font-size:.92rem}
.videos{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 20px 20px; margin:0 -20px; scrollbar-width:thin; scrollbar-color:var(--linea) transparent}
.video{flex:0 0 clamp(200px,22vw,250px); aspect-ratio:9/16; border-radius:var(--r-m); scroll-snap-align:start; position:relative; overflow:hidden; text-decoration:none; color:#fff; background:linear-gradient(165deg,#24402f,#0f1a14); display:flex; flex-direction:column; justify-content:flex-end; padding:18px; isolation:isolate}
.video:nth-child(3n+2){background:linear-gradient(165deg,#2E7D32,#123a17)}
.video:nth-child(3n){background:linear-gradient(165deg,#33443a,#141f19)}
.video .play{position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); display:grid; place-items:center; transition:transform .3s, background .3s}
.video:hover .play{transform:scale(1.12); background:var(--verde)}
.video .play svg{width:24px; height:24px; margin-left:4px}
.video .tt{display:flex; align-items:center; gap:.5em; font-weight:700; font-size:.92rem}
.video .tt svg{width:18px; height:18px}
.video small{color:rgba(255,255,255,.65); font-size:.8rem}
.nota{font-size:.88rem; color:var(--gris); margin-top:10px}

/* Reseñas */
.resenas-cab{display:grid; grid-template-columns:auto 1fr; gap:60px; align-items:center; margin-bottom:50px}
.nota-g{display:flex; align-items:center; gap:20px}
.nota-g .grande{font-family:var(--display); font-weight:900; font-size:clamp(4.5rem,9vw,7.5rem); line-height:.9; letter-spacing:-.04em}
.nota-g .estrellas svg{width:26px; height:26px}
.nota-g .cuantas{color:var(--gris); margin-top:6px; font-weight:600}
.resenas-der{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap}
.resenas-botones{display:flex; gap:12px; flex-wrap:wrap}
.carrusel{position:relative}
.pista{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 24px; scrollbar-width:none}
.pista::-webkit-scrollbar{display:none}
.resena{flex:0 0 clamp(280px,31%,380px); scroll-snap-align:start; background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:28px; display:flex; flex-direction:column; gap:18px}
.resena blockquote{margin:0; font-size:1.02rem; line-height:1.6; flex:1}
.autor{display:flex; align-items:center; gap:12px}
.autor .ini{width:42px; height:42px; border-radius:50%; background:var(--hoja-clara); color:var(--verde); font-family:var(--display); font-weight:800; display:grid; place-items:center}
.autor strong{display:block; font-size:.98rem}
.autor span{font-size:.84rem; color:var(--gris)}
.flechas{display:flex; gap:10px}
.flecha{width:50px; height:50px; border-radius:50%; border:1.5px solid var(--linea); background:#fff; display:grid; place-items:center; cursor:pointer; color:var(--tinta); transition:background .25s, color .25s, border-color .25s}
.flecha:hover{background:var(--tinta); color:#fff; border-color:var(--tinta)}

/* Contacto */
.contacto-gr{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:stretch}
.contacto-gr .h2{margin:16px 0 26px}
.estado-g{display:inline-flex; align-items:center; gap:.55em; font-weight:700; padding:.5em 1em; border-radius:999px; background:var(--papel); font-size:.95rem}
.estado-g i{width:9px; height:9px; border-radius:50%; background:#9aa59f}
.estado-g.abierto{background:#e3f6e4; color:var(--verde-osc)}
.estado-g.abierto i{background:#22c55e; animation:latido 2s infinite}
.datos{list-style:none; padding:0; margin:0 0 26px; display:grid; gap:4px}
.datos li > a{display:flex; gap:14px; align-items:flex-start; padding:12px 0; text-decoration:none; border-bottom:1px solid var(--linea)}
.datos li a:hover strong{color:var(--verde)}
.datos svg{color:var(--verde); width:22px; height:22px; margin-top:2px}
.datos strong{display:block; font-family:var(--display); font-size:1.08rem; transition:color .25s}
.datos span{color:var(--gris); font-size:.95rem}
.horario{width:100%; border-collapse:collapse; font-size:.96rem}
.horario td{padding:6px 0}
.horario td:last-child{text-align:right; color:var(--gris)}
.horario tr.hoy td{font-weight:700; color:var(--verde)}
.zona{margin-top:26px}
.zona h3{font-size:1.1rem; font-weight:700; margin-bottom:12px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips span{border:1px solid var(--linea); border-radius:999px; padding:.35em .9em; font-size:.9rem; background:#fff}
.chips span.casa{background:var(--verde); color:#fff; border-color:var(--verde)}
.mapa{border-radius:var(--r-l); overflow:hidden; min-height:480px; background:
  linear-gradient(rgba(244,247,243,.55),rgba(244,247,243,.55)),
  repeating-linear-gradient(0deg,#e3e9e3 0 2px,transparent 2px 64px),
  repeating-linear-gradient(90deg,#e3e9e3 0 2px,transparent 2px 64px),#eef2ee; position:relative; display:grid; place-items:center; text-align:center; padding:30px}
.mapa iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.mapa .pin{width:64px; height:64px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--verde); display:grid; place-items:center; margin:0 auto 22px; box-shadow:0 16px 30px -12px rgba(46,125,50,.8)}
.mapa .pin svg{transform:rotate(45deg); color:#fff; width:28px; height:28px}
.mapa p{color:var(--gris); max-width:36ch; margin:8px auto 20px; font-size:.95rem}
.mapa .btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* Pie */
.pie{background:var(--tinta); color:rgba(255,255,255,.75); padding:80px 0 calc(34px + env(safe-area-inset-bottom,0px)); font-size:.95rem}
.pie-gr{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.12)}
.pie img{height:110px; width:auto; margin-bottom:18px}
.pie h3{font-size:1.05rem; color:#fff; margin-bottom:14px; font-weight:700; letter-spacing:0}
.pie ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.pie a{text-decoration:none}
.pie a:hover{color:var(--hoja)}
.pie-redes{display:flex; gap:10px; margin-top:18px}
.pie-redes a{width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; transition:background .25s, border-color .25s}
.pie-redes a:hover{background:var(--verde); border-color:var(--verde); color:#fff}
.pie-redes svg{width:19px; height:19px}
.legal{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px; font-size:.85rem; color:rgba(255,255,255,.55)}
.legal nav{display:flex; gap:18px; flex-wrap:wrap}
.legal button{background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:0}
.legal button:hover{color:var(--hoja)}

/* WhatsApp flotante */
.wa-flot{position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:55; display:flex; align-items:center; gap:12px}
.wa-btn{width:64px; height:64px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 14px 30px -10px rgba(37,211,102,.8); position:relative; transition:transform .25s}
.wa-btn:hover{transform:scale(1.08)}
.wa-btn::before{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:onda 2.4s ease-out infinite}
@keyframes onda{from{transform:scale(1); opacity:.8} to{transform:scale(1.6); opacity:0}}
.wa-btn svg{width:32px; height:32px}
.wa-globo{background:#fff; color:var(--tinta); padding:10px 14px 10px 16px; border-radius:16px 16px 4px 16px; box-shadow:0 14px 30px -14px rgba(0,0,0,.35); font-weight:600; font-size:.93rem; display:flex; align-items:center; gap:10px; opacity:0; transform:translateX(12px); pointer-events:none; transition:opacity .4s, transform .4s}
.wa-globo.ver{opacity:1; transform:none; pointer-events:auto}
.wa-globo button{background:none; border:0; cursor:pointer; color:var(--gris); font-size:1.1rem; line-height:1; padding:2px}

/* Barra inferior móvil */
.barra-movil{display:none}

/* Cookies */
.cookies{position:fixed; left:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:90; max-width:460px; background:#fff; border-radius:var(--r-m); box-shadow:0 30px 60px -20px rgba(18,32,25,.45); border:1px solid var(--linea); padding:24px; display:none}
.cookies.ver{display:block}
.cookies h3{font-size:1.15rem; margin-bottom:8px; letter-spacing:0}
.cookies p{font-size:.9rem; color:var(--gris)}
.cookies .fila{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}
.cookies .btn{padding:.65em 1.1em; font-size:.9rem; flex:1; justify-content:center}
.cookies .opciones{display:none; margin-top:14px; border-top:1px solid var(--linea); padding-top:12px}
.cookies .opciones.ver{display:grid; gap:10px}
.cookies label{display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:.9rem}
.cookies label small{display:block; color:var(--gris)}
.cookies input{width:20px; height:20px; accent-color:var(--verde)}

/* Aviso */
.toast{position:fixed; left:50%; top:calc(100px + env(safe-area-inset-top,0px)); transform:translate(-50%,-20px); background:var(--tinta); color:#fff; padding:12px 20px; border-radius:999px; font-size:.92rem; z-index:95; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; max-width:calc(100% - 40px); text-align:center}
.toast.ver{opacity:1; transform:translate(-50%,0)}

/* Pantalla de carga */
#carga{position:fixed; inset:0; z-index:100; background:#fff; display:grid; place-items:center; transition:opacity .5s, visibility .5s}
#carga img{width:130px; animation:aparece .8s ease both}
@keyframes aparece{from{opacity:0; transform:scale(.9)}}
.cargado #carga{opacity:0; visibility:hidden}

/* Aparición al hacer scroll */
.js [data-rev]{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-rev].in{opacity:1; transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .menu{display:none}
  .hamb{display:block}
  .nav .btn-wa-nav{display:none}
  .servicios{grid-template-columns:1fr 1fr}
  .tile-grande{grid-column:1 / -1; grid-row:auto; min-height:420px}
  .tile-ancha{grid-column:span 1}
  .ventajas{grid-template-columns:1fr 1fr}
  .matri-gr,.envio-gr,.contacto-gr,.multi-gr{grid-template-columns:1fr}
  .pie-gr{grid-template-columns:1fr 1fr}
  .redes-cab,.resenas-cab,.cabeza{grid-template-columns:1fr; gap:24px}
}
@media (max-width:720px){
  body{font-size:16px; padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .topbar{display:none}
  .nav{height:70px}
  .marca{height:54px}
  .cab.solida .marca{height:48px}
  .cab.solida .nav{height:62px}
  .idioma{font-size:.75rem}
  .hero{align-items:flex-end}
  .hero-cont{padding:130px 0 70px}
  .hero-sombra{background:linear-gradient(0deg, rgba(12,20,15,.96) 0%, rgba(12,20,15,.75) 50%, rgba(12,20,15,.35) 100%)}
  .hero-acc .btn{flex:1 1 100%; justify-content:center; white-space:normal; text-align:center}
  .aviso-foto{top:88px; bottom:auto; right:14px}
  .servicios{grid-template-columns:1fr; grid-auto-rows:minmax(240px,auto)}
  .tile-grande{min-height:380px; padding:28px}
  .tile-ancha{grid-column:auto}
  .tile-movilidad{flex-direction:column; align-items:flex-start}
  .contadores{grid-template-columns:1fr; gap:30px}
  .contador,.contador:first-child{border-left:0; padding:0 0 26px; border-bottom:1px solid rgba(255,255,255,.14)}
  .ventajas{grid-template-columns:1fr; gap:30px}
  .packs{grid-template-columns:1fr}
  .red{flex:1 1 100%}
  .resena{flex-basis:86%}
  .nota-g{gap:14px}
  .pie-gr{grid-template-columns:1fr}
  .mapa{min-height:360px}
  .wa-flot{display:none}
  .barra-movil{display:grid; grid-template-columns:1fr 1.3fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:58; background:#fff; border-top:1px solid var(--linea); padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px)); gap:8px; box-shadow:0 -10px 30px -20px rgba(0,0,0,.35)}
  .barra-movil a{display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; font-size:.76rem; font-weight:700; padding:6px 4px; border-radius:14px; color:var(--tinta)}
  .barra-movil a svg{width:22px; height:22px}
  .barra-movil a.wa{background:#25D366; color:#fff; flex-direction:row; justify-content:center; font-size:.95rem; font-family:var(--display); gap:8px}
  .cookies{left:10px; right:10px; bottom:calc(84px + env(safe-area-inset-bottom,0px)); max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .js [data-rev],.js .hero-cont > *{opacity:1; transform:none}
  .estela{display:none}
}

/* ================= Añadidos: páginas interiores ================= */
.pagina{display:none}
.pagina.activa{display:block}

/* Submenú Servicios */
.menu > li{position:relative}
.menu .con-sub > a{display:inline-flex; align-items:center; gap:.3em}
.menu .con-sub > a svg{width:14px; height:14px; transition:transform .3s}
.menu .con-sub:hover > a svg,.menu .con-sub:focus-within > a svg{transform:rotate(180deg)}
.sub{position:absolute; top:100%; left:-24px; padding-top:16px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s, transform .25s, visibility .25s}
.con-sub:hover .sub,.con-sub:focus-within .sub{opacity:1; visibility:visible; transform:none}
.sub ul{list-style:none; margin:0; padding:10px; background:#fff; color:var(--tinta); border-radius:20px; box-shadow:0 30px 60px -20px rgba(18,32,25,.45); min-width:320px; display:grid; gap:2px}
.menu .sub a{display:flex; gap:14px; align-items:center; padding:11px 14px; border-radius:14px; font-weight:600}
.menu .sub a::after{display:none}
.menu .sub a:hover{background:var(--papel); color:var(--verde)}
.sub .mini{width:38px; height:38px; border-radius:11px; background:var(--hoja-clara); color:var(--verde); display:grid; place-items:center; flex:none}
.sub .mini svg{width:20px; height:20px}
.menu-movil .grupo{font-size:.85rem; color:rgba(255,255,255,.5); margin:10px 0 2px; font-weight:600}
.menu-movil li.peq a{font-size:1.35rem; font-weight:700; padding:.3em 0 .3em .8em; border-bottom:0}
.menu-movil{overflow-y:auto; justify-content:flex-start; padding-top:calc(90px + env(safe-area-inset-top,0px))}

/* Portada de la home: vídeo */
.hero-medio video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-medio .poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* Hero de páginas interiores */
.phero{position:relative; min-height:78svh; display:flex; align-items:flex-end; background:var(--tinta); color:#fff; overflow:hidden; isolation:isolate}
.phero-img{position:absolute; inset:0; z-index:-2}
.phero-img img{width:100%; height:100%; object-fit:cover; transform:scale(1.04); animation:acerca 14s ease-out both}
@keyframes acerca{from{transform:scale(1.14)}}
.phero-cont{padding:170px 0 84px; max-width:800px}
.phero h1{font-size:clamp(2.3rem,5.4vw,4.5rem); font-weight:900; text-transform:uppercase; line-height:.98; margin:22px 0 20px; letter-spacing:-.02em}
.pagina.activa .phero-cont > *{animation:sube .8s cubic-bezier(.2,.7,.2,1) both}
.pagina.activa .phero-cont > *:nth-child(2){animation-delay:.08s}
.pagina.activa .phero-cont > *:nth-child(3){animation-delay:.16s}
.pagina.activa .phero-cont > *:nth-child(4){animation-delay:.26s}
.pagina.activa .phero-cont > *:nth-child(5){animation-delay:.36s}
@keyframes sube{from{opacity:0; transform:translateY(24px)}}
.migas{font-size:.9rem; color:rgba(255,255,255,.7); display:flex; gap:.55em; flex-wrap:wrap; align-items:center}
.migas a{text-decoration:none}
.migas a:hover{color:#fff}
.migas svg{width:14px; height:14px}
.phero-sola{min-height:52svh; background:radial-gradient(60% 80% at 85% 20%, #24452f 0%, transparent 70%), var(--tinta)}

/* Intro a dos columnas */
.intro{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.intro.invertida > :first-child{order:2}
.intro .h2{margin-bottom:22px}
.intro .texto p{color:var(--gris); font-size:1.08rem; max-width:56ch}
.intro .texto p + p{margin-top:14px}
.intro .texto .btn{margin-top:28px}
.foto-r{border-radius:var(--r-l); overflow:hidden; aspect-ratio:4/5; position:relative; background:var(--linea)}
.foto-r img{width:100%; height:100%; object-fit:cover}
.foto-r.ancha{aspect-ratio:16/10}
.etq-foto{position:absolute; left:20px; bottom:20px; right:20px; width:fit-content; background:#fff; color:var(--tinta); border-radius:var(--r-m); padding:14px 18px; display:flex; gap:12px; align-items:center; font-weight:600; box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.etq-foto svg{color:var(--verde); width:26px; height:26px; flex:none}

/* Rejilla de elementos */
.items{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.items.tres{grid-template-columns:repeat(3,1fr)}
.items.dos{grid-template-columns:repeat(2,1fr)}
.item{background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:28px 26px; transition:border-color .3s, transform .3s}
.sec-blanca .item{background:var(--papel); border-color:transparent}
.item:hover{border-color:var(--verde); transform:translateY(-4px)}
.item .circ{width:54px; height:54px; border-radius:16px; background:var(--hoja-clara); color:var(--verde); display:grid; place-items:center; transition:background .3s, color .3s}
.sec-blanca .item .circ{background:#fff}
.item:hover .circ{background:var(--verde); color:#fff}
.item .circ svg{width:26px; height:26px}
.item h3{font-size:1.22rem; font-weight:700; margin:18px 0 8px; letter-spacing:-.01em; line-height:1.15}
.item p{color:var(--gris); font-size:.98rem}

/* Pasos (secuencia real) */
.pasos{display:grid; grid-template-columns:repeat(4,1fr); counter-reset:paso; border-top:2px solid var(--linea)}
.pasos.tres{grid-template-columns:repeat(3,1fr)}
.paso{padding:34px 30px 0 0; position:relative}
.paso::after{content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 5px var(--papel)}
.sec-blanca .paso::after{box-shadow:0 0 0 5px #fff}
.paso::before{counter-increment:paso; content:counter(paso); font-family:var(--display); font-weight:900; font-size:3.6rem; color:var(--verde); line-height:1; display:block; margin-bottom:14px; letter-spacing:-.04em}
.paso h3{font-size:1.3rem; font-weight:700; margin-bottom:8px; letter-spacing:-.01em}
.paso p{color:var(--gris)}

/* Caja destacada */
.destacado{display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; background:var(--tinta); color:#fff; border-radius:var(--r-l); padding:38px 42px; position:relative; overflow:hidden}
.destacado .circ{width:72px; height:72px; border-radius:22px; background:var(--verde); display:grid; place-items:center; color:#fff}
.destacado .circ svg{width:34px; height:34px}
.destacado h3{font-size:clamp(1.4rem,2.4vw,1.8rem); font-weight:800; margin-bottom:8px}
.destacado p{color:rgba(255,255,255,.78); max-width:62ch}
.destacado.claro{background:var(--hoja-clara); color:var(--tinta)}
.destacado.claro p{color:var(--gris)}
.destacado.alerta{background:#FFF4E0; color:#4a3100}
.destacado.alerta .circ{background:#E59A13}
.destacado.alerta p{color:#6f5114}
.destacado small{display:block; margin-top:10px; opacity:.75; font-size:.85rem}

/* Tarjeta de sellos */
.sellos-gr{display:grid; grid-template-columns:1fr auto; gap:60px; align-items:center}
.tarjeta{width:min(380px,100%); background:#fff; border-radius:24px; padding:26px; box-shadow:0 40px 70px -30px rgba(18,32,25,.45); transform:rotate(-3deg); border:1px solid var(--linea)}
.tarjeta-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.tarjeta-top img{height:52px; width:auto}
.tarjeta-top span{font-family:var(--display); font-weight:700; color:var(--gris); font-size:.9rem}
.puntos{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.puntos i{aspect-ratio:1; border-radius:50%; border:2px dashed #b7c3bb; display:grid; place-items:center; color:#fff}
.puntos i.lleno{background:var(--verde); border:2px solid var(--verde)}
.puntos i.lleno svg{width:55%; height:55%}
.puntos i.premio{border:2px solid var(--hoja); background:var(--hoja-clara); color:var(--verde); font-family:var(--display); font-weight:900; font-size:.62rem; text-align:center; line-height:1}

/* Chips de marcas grandes */
.chips.grandes span{font-family:var(--display); font-weight:700; font-size:1.05rem; padding:.5em 1.1em}
.chips.grandes span.mas{background:var(--tinta); color:#fff; border-color:var(--tinta)}

/* Preguntas frecuentes */
.faq-gr{display:grid; grid-template-columns:.75fr 1.25fr; gap:64px; align-items:start}
.faq-gr .h2{position:sticky; top:120px}
.faq details{border-bottom:1px solid var(--linea)}
.faq details:first-child{border-top:1px solid var(--linea)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font-family:var(--display); font-weight:700; font-size:1.18rem; line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--verde)}
.faq .mas-ico{width:36px; height:36px; border-radius:50%; background:var(--papel); display:grid; place-items:center; flex:none; transition:transform .3s, background .3s, color .3s; font-size:1.4rem; font-weight:400; line-height:1}
.sec-blanca .faq .mas-ico{background:var(--papel)}
.faq details[open] .mas-ico{transform:rotate(45deg); background:var(--verde); color:#fff}
.faq details p{padding:0 50px 24px 0; color:var(--gris); max-width:68ch}

/* Banda final de contacto */
.cta{background:var(--tinta); color:#fff; border-radius:var(--r-l); padding:clamp(40px,6vw,72px); display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center; position:relative; overflow:hidden; isolation:isolate}
.cta::before{content:""; position:absolute; width:560px; height:560px; right:-180px; top:-240px; border-radius:50%; background:radial-gradient(circle, rgba(67,160,71,.35), transparent 65%); z-index:-1}
.cta h2{font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:800; max-width:20ch}
.cta p{color:rgba(255,255,255,.75); margin-top:12px; max-width:52ch}
.cta .btns{display:flex; gap:12px; flex-wrap:wrap}

/* Fotos a dos */
.duo{display:grid; grid-template-columns:1.25fr .75fr; gap:18px}
.duo .foto-r{aspect-ratio:auto; min-height:460px}

/* Página de contacto */
.contacto-wa{display:flex; align-items:center; gap:18px; background:#25D366; color:#fff; border-radius:var(--r-l); padding:26px 28px; text-decoration:none; margin-bottom:26px; transition:transform .25s, box-shadow .25s}
.contacto-wa:hover{transform:translateY(-3px); box-shadow:0 24px 40px -20px rgba(37,211,102,.9)}
.contacto-wa svg{width:44px; height:44px; flex:none}
.contacto-wa strong{display:block; font-family:var(--display); font-size:1.5rem}
.contacto-wa span{opacity:.9}

/* Movilidad reducida: lectura más cómoda */
.calma{font-size:19px}
.calma .item p,.calma .entrada,.calma .intro .texto p,.calma .faq details p{font-size:1.1rem}
.calma .item h3{font-size:1.35rem}
.tel-xl{display:inline-flex; align-items:center; gap:14px; font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,3vw,2rem); text-decoration:none; color:var(--verde)}
.tel-xl svg{width:34px; height:34px}

/* Textos legales */
.legal-txt{max-width:780px}
.legal-txt h2{font-size:1.45rem; font-weight:800; margin:44px 0 12px; letter-spacing:-.01em}
.legal-txt h2:first-child{margin-top:0}
.legal-txt p,.legal-txt li{color:var(--gris)}
.legal-txt p + p{margin-top:12px}
.legal-txt ul{padding-left:1.2em; margin:10px 0}
.legal-txt li{margin:6px 0}
.legal-txt table{width:100%; border-collapse:collapse; margin:14px 0; font-size:.95rem}
.legal-txt th,.legal-txt td{border-bottom:1px solid var(--linea); text-align:left; padding:10px 8px; vertical-align:top}
.legal-txt th{font-family:var(--display)}
.tabla-scroll{overflow-x:auto}

/* Home: tarjeta de movilidad con foto */
.tile-movilidad{display:grid; grid-template-columns:1fr 280px; padding:0; overflow:hidden}
.tile-movilidad .mov-txt{padding:40px}
.tile-movilidad .mov-txt .btn{margin-top:24px}
.tile-movilidad .mov-img{height:100%; min-height:260px}
.tile-movilidad .mov-img img{width:100%; height:100%; object-fit:cover}
.envio-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.envio-foto{display:block}
.multi-fotos{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:60px}
.multi-fotos .foto-r{aspect-ratio:4/3}

@media (max-width:1080px){
  .intro,.faq-gr,.sellos-gr,.duo{grid-template-columns:1fr; gap:36px}
  .intro.invertida > :first-child{order:0}
  .faq-gr .h2{position:static}
  .items,.items.tres{grid-template-columns:1fr 1fr}
  .pasos,.pasos.tres{grid-template-columns:1fr 1fr; row-gap:10px}
  .destacado{grid-template-columns:auto 1fr}
  .destacado .btn{grid-column:1 / -1; justify-self:start}
  .cta{grid-template-columns:1fr}
  .tarjeta{justify-self:center}
}
@media (max-width:720px){
  .phero{min-height:70svh}
  .phero-cont{padding:120px 0 56px}
  .items,.items.tres,.items.dos,.pasos,.pasos.tres{grid-template-columns:1fr}
  .paso{padding-right:0}
  .destacado{grid-template-columns:1fr; padding:30px 26px; gap:18px}
  .tile-movilidad{grid-template-columns:1fr}
  .tile-movilidad .mov-txt{padding:28px}
  .tile-movilidad .mov-img{min-height:240px; order:-1}
  .multi-fotos{grid-template-columns:1fr}
  .duo .foto-r{min-height:320px}
  .faq details p{padding-right:0}
  .calma{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .phero-img img{animation:none; transform:none}
  .pagina.activa .phero-cont > *{animation:none}
}

.migas{margin-bottom:18px}
.tile::after{background:linear-gradient(0deg, rgba(12,20,15,.95) 0%, rgba(12,20,15,.72) 50%, rgba(12,20,15,.3) 100%)}

.menu a.actual::after{transform:scaleX(1)}
.pie img{height:110px}

/* ===== Añadidos: idioma, precios, portadas TikTok ===== */
.idioma a{color:inherit; text-decoration:none; padding:.35em .75em; display:block}
.idioma a[aria-current]{background:var(--verde); color:#fff}
.idioma a:not([aria-current]):hover{background:rgba(67,160,71,.18)}
.menu-movil .idioma-m{display:flex; gap:10px; margin:0 0 22px}
.menu-movil .idioma-m a{font-family:var(--display); font-weight:700; text-decoration:none; border:1.5px solid rgba(255,255,255,.35); border-radius:999px; padding:.35em 1em; font-size:.95rem}
.menu-movil .idioma-m a[aria-current]{background:var(--verde); border-color:var(--verde)}
.pack .precio{display:flex; align-items:baseline; flex-wrap:wrap; gap:.25em .7em; margin:0 0 14px}
.pack .precio strong{font-family:var(--display); font-weight:900; font-size:clamp(2.6rem,5vw,3.2rem); line-height:1; letter-spacing:-.03em; color:var(--verde)}
.pack-top .precio strong{color:#fff}
.pack .precio span{font-size:.9rem; font-weight:600; color:var(--gris)}
.pack-top .precio span{color:#b9e3bb}
.video{padding:0; justify-content:flex-end}
.video img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .5s ease}
.video::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(10,20,14,.85) 100%)}
.video:hover img{transform:scale(1.05)}
.video .pie-v{padding:18px; display:flex; flex-direction:column; gap:2px}
@media (prefers-reduced-motion: reduce){.video img{transition:none}.video:hover img{transform:none}}


/* Portadas interiores: sin zoom y, en pantallas anchas, foto a la derecha para no recortar las fotos verticales */
.phero-img img{transform:none; animation:fundido 1.2s ease both}
@keyframes fundido{from{opacity:0}}
@media (min-width:1000px){
  .phero-img{left:auto; right:0; width:54%}
  .phero-img{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%); mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
  .phero .hero-sombra{background:linear-gradient(90deg, rgba(18,32,25,.35) 45%, rgba(18,32,25,0) 75%), linear-gradient(0deg, rgba(18,32,25,.45) 0%, rgba(18,32,25,0) 35%)}
  .phero-cont{max-width:min(640px, 48vw)}
}
@media (prefers-reduced-motion: reduce){.phero-img img{animation:none}}

/* =========================================================
   TIENDA E-GO!  (botón de menú, cesta, pedido, catálogo, ficha)
   ========================================================= */

/* ---------- Botón TIENDA en el menú ---------- */
.menu .nav-tienda a{display:inline-flex; align-items:center; gap:.5em; padding:.62em 1.15em .62em 1em; border-radius:999px; background:var(--verde); color:#fff; font-weight:800; letter-spacing:.07em; font-size:.95rem; isolation:isolate; overflow:hidden; box-shadow:0 10px 26px -10px rgba(67,160,71,.95); transition:background .25s, transform .25s}
.menu .nav-tienda a::after{content:""; position:absolute; inset:0; left:-60%; right:auto; bottom:auto; width:45%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg); animation:brillo 4.5s ease-in-out infinite; z-index:-1}
.menu .nav-tienda a:hover{background:var(--hoja); transform:translateY(-2px)}
.menu .nav-tienda a:hover::after{transform:skewX(-20deg)}
.menu .nav-tienda .ico{width:1.15em; height:1.15em}
.menu .nav-tienda a.actual{background:#fff; color:var(--verde-osc)}
.cab.solida .menu .nav-tienda a.actual{background:var(--tinta); color:#fff}
@keyframes brillo{0%,62%{left:-60%} 100%{left:130%}}

/* Botón de la cesta en la cabecera */
.btn-cesta{position:relative; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1.5px solid currentColor; background:transparent; color:inherit; cursor:pointer; transition:background .25s, color .25s, border-color .25s}
.btn-cesta:hover{background:var(--verde); border-color:var(--verde); color:#fff}
.btn-cesta .ico{width:22px; height:22px}
.btn-cesta .num{position:absolute; top:-5px; right:-5px; min-width:21px; height:21px; padding:0 5px; border-radius:999px; background:var(--hoja); color:#fff; font:800 .72rem/21px var(--display); text-align:center; transform:scale(0); transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.btn-cesta.con .num{transform:scale(1)}
.btn-cesta.salta{animation:salta .5s}
@keyframes salta{40%{transform:scale(1.18)}}

/* Menú móvil: Tienda primero */
.menu-movil li.mm-tienda a{display:flex; align-items:center; justify-content:space-between; color:#fff}
.menu-movil li.mm-tienda a span{font:800 .78rem var(--display); letter-spacing:.08em; background:var(--verde); padding:.45em .9em; border-radius:999px}

/* Barra inferior móvil con Tienda */
.barra-movil.con-tienda{grid-template-columns:1fr 1fr 1.35fr 1fr}
.barra-movil a.bt-tienda{color:var(--verde)}

/* ---------- Portada: bloque tienda ---------- */
.tienda-home{background:var(--tinta); color:#fff; position:relative; overflow:hidden}
.tienda-home::before{content:""; position:absolute; width:900px; height:900px; left:-300px; bottom:-520px; border-radius:50%; background:radial-gradient(circle, rgba(67,160,71,.28), transparent 62%)}
.th-gr{position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,6vw,90px); align-items:center}
.th-texto h2{font-size:clamp(2.1rem,4.2vw,3.4rem); font-weight:900; text-transform:uppercase; line-height:.98; margin:24px 0 22px}
.th-texto > p{color:rgba(255,255,255,.8); font-size:1.12rem; max-width:50ch}
.th-pasos{list-style:none; padding:0; margin:30px 0 0; display:grid; gap:2px; counter-reset:p; max-width:460px}
.th-pasos li{counter-increment:p; display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.82)}
.th-pasos li::before{content:counter(p); flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(67,160,71,.2); color:#9ad79c; font:800 .95rem var(--display)}
.th-pasos b{color:#fff; font-family:var(--display)}
.th-escena{position:relative}
.th-foto{display:block; position:relative; border-radius:var(--r-l); background:#fff; aspect-ratio:1/1; overflow:hidden; box-shadow:0 50px 90px -40px rgba(0,0,0,.8)}
.th-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:4%; transition:opacity .35s, transform .6s cubic-bezier(.2,.7,.2,1)}
.th-foto:hover img{transform:scale(1.03)}
.th-foto .sello{position:absolute; left:18px; top:18px; z-index:2; background:var(--tinta); color:#fff; font:700 .82rem var(--display); padding:.55em 1em; border-radius:999px; display:inline-flex; gap:.5em; align-items:center}
.th-foto .sello .ico{color:var(--hoja)}
.th-pie{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:20px; flex-wrap:wrap}
.th-pie small{display:block; color:rgba(255,255,255,.6); font-size:.85rem}
.th-pie strong{font:800 1.5rem var(--display)}
.th-precio{font:900 2rem var(--display); color:#fff}
.th-precio small{display:block; font:500 .8rem var(--texto); color:rgba(255,255,255,.6); text-align:right}

/* ---------- Muestras de color ---------- */
.muestras{display:flex; gap:10px; flex-wrap:wrap}
.muestra{width:34px; height:34px; border-radius:50%; border:0; padding:0; cursor:pointer; background:var(--c); box-shadow:0 0 0 2px rgba(255,255,255,.18), inset 0 0 0 1px rgba(0,0,0,.12); transition:transform .2s, box-shadow .2s}
.muestra:hover{transform:scale(1.1)}
.muestra[aria-pressed="true"]{box-shadow:0 0 0 3px var(--tinta), 0 0 0 5px var(--hoja)}
.tienda-home .muestra[aria-pressed="true"]{box-shadow:0 0 0 3px var(--tinta), 0 0 0 5px #fff}

/* ---------- Página tienda ---------- */
.t-hero{min-height:auto}
.t-hero .phero-cont{padding:170px 0 70px}
.t-promesa{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:28px; color:rgba(255,255,255,.85); font-size:.95rem}
.t-promesa span{display:inline-flex; align-items:center; gap:.5em}
.t-promesa .ico{color:var(--hoja)}

.catalogo{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.prod{background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); overflow:hidden; display:flex; flex-direction:column; transition:border-color .3s, box-shadow .3s, transform .3s}
.prod:hover{border-color:var(--hoja); box-shadow:0 30px 60px -36px rgba(46,125,50,.6); transform:translateY(-4px)}
.prod-foto{position:relative; display:block; aspect-ratio:1/1; background:#fff; border-bottom:1px solid var(--linea)}
.prod-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6%; transition:opacity .3s}
.prod-foto .marca-chip{position:absolute; top:16px; left:16px; z-index:1; font:800 .74rem var(--display); letter-spacing:.06em; background:var(--hoja-clara); color:var(--verde-osc); padding:.5em .85em; border-radius:999px}
.prod-cuerpo{padding:22px 24px 24px; display:flex; flex-direction:column; gap:14px; flex:1}
.prod h3{font-size:1.45rem; font-weight:800}
.prod h3 a{text-decoration:none}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips span{font-size:.8rem; font-weight:600; color:var(--gris); background:var(--papel); border:1px solid var(--linea); padding:.3em .7em; border-radius:999px}
.prod .muestras{gap:8px}
.prod .muestra{width:24px; height:24px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.prod .muestra[aria-pressed="true"]{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--verde)}
.prod-pie{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:6px}
.precio{font:900 1.7rem var(--display); letter-spacing:-.02em}
.precio small{display:block; font:500 .78rem var(--texto); color:var(--gris); letter-spacing:0}
.prod-pie .btn{padding:.75em 1.2em; font-size:.95rem}
.prod-otro{background:var(--hoja-clara); border:1.5px dashed #a9cdaa; border-radius:var(--r-l); padding:32px 28px; display:flex; flex-direction:column; justify-content:center; gap:14px}
.prod-otro h3{font-size:1.6rem; font-weight:800}
.prod-otro p{color:var(--gris)}
.prod-otro .btn{align-self:flex-start}

/* Cómo funciona (secuencia real de pasos) */
.pasos-pedido{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:pp}
.paso-p{counter-increment:pp; position:relative; background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:26px 24px}
.paso-p::before{content:counter(pp); display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--verde); color:#fff; font:800 1.1rem var(--display); margin-bottom:18px}
.paso-p h3{font-size:1.2rem; font-weight:800; letter-spacing:0; margin-bottom:8px}
.paso-p p{color:var(--gris); font-size:.97rem}
.paso-p.clave{background:var(--tinta); color:#fff; border-color:var(--tinta)}
.paso-p.clave p{color:rgba(255,255,255,.75)}
.paso-p.clave::before{background:var(--hoja)}

.por-que{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:center; background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); padding:clamp(28px,4vw,54px)}
.por-que h2{font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:800}
.por-que .texto p{color:var(--gris); font-size:1.05rem}
.por-que .texto p + p{margin-top:14px}
.por-que .texto strong{color:var(--tinta)}

/* ---------- Ficha de producto ---------- */
.ficha-top{padding:calc(130px + env(safe-area-inset-top,0px)) 0 clamp(60px,8vw,100px)}
.ficha-top .migas{color:var(--gris); margin-bottom:26px}
.ficha-top .migas a:hover{color:var(--verde)}
.ficha{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px,4vw,60px); align-items:start}
.galeria{position:sticky; top:96px}
.gal-principal{position:relative; background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); aspect-ratio:1/1; overflow:hidden}
.gal-principal img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:5%; transition:opacity .3s}
.gal-principal .sello{position:absolute; left:18px; top:18px; z-index:2; background:var(--tinta); color:#fff; font:700 .82rem var(--display); padding:.55em 1em; border-radius:999px; display:inline-flex; gap:.5em; align-items:center}
.gal-principal .sello .ico{color:var(--hoja)}
.gal-miniaturas{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px}
.gal-miniaturas button{position:relative; aspect-ratio:1/1; background:#fff; border:1.5px solid var(--linea); border-radius:var(--r-s); padding:6%; cursor:pointer; transition:border-color .2s}
.gal-miniaturas button img{width:100%; height:100%; object-fit:contain}
.gal-miniaturas button[aria-pressed="true"]{border-color:var(--verde); box-shadow:0 0 0 2px var(--verde)}
.gal-nota{font-size:.82rem; color:var(--gris); margin-top:10px}

.compra .marca-txt{font:800 .85rem var(--display); letter-spacing:.08em; color:var(--verde)}
.compra h1{font-size:clamp(2.1rem,3.8vw,3.1rem); font-weight:900; margin:8px 0 14px}
.compra .resumen{color:var(--gris); font-size:1.04rem}
.precio-caja{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:24px 0 16px; padding:20px 22px; background:#fff; border:1px solid var(--linea); border-radius:var(--r-m)}
.precio-caja .grande{font:900 2.6rem/1 var(--display); letter-spacing:-.03em}
.precio-caja .iva{display:block; font-size:.82rem; color:var(--gris); margin-top:6px}
.disp{display:inline-flex; align-items:center; gap:.5em; font-size:.88rem; font-weight:700; color:var(--verde-osc); background:var(--hoja-clara); padding:.55em .95em; border-radius:999px}
.disp .ico{width:1.05em; height:1.05em}

.bloque-op{margin-top:26px}
.bloque-op h2{font:800 1.1rem var(--display); letter-spacing:0; display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:12px}
.bloque-op h2 span{font:600 .95rem var(--texto); color:var(--gris)}
.colores{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.color-op{display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 6px 10px; background:#fff; border:1.5px solid var(--linea); border-radius:var(--r-s); cursor:pointer; font-size:.82rem; font-weight:600; text-align:center; transition:border-color .2s, box-shadow .2s; color:var(--tinta)}
.color-op i{width:30px; height:30px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.color-op[aria-pressed="true"]{border-color:var(--verde); box-shadow:0 0 0 2px var(--verde)}

.extras{display:grid; gap:8px}
.extra{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:14px 16px; background:#fff; border:1.5px solid var(--linea); border-radius:var(--r-s); cursor:pointer; transition:border-color .2s, background .2s}
.extra:hover{border-color:#b6d3b7}
.extra input{position:absolute; opacity:0; pointer-events:none}
.extra .caja{width:24px; height:24px; border-radius:7px; border:2px solid #b9c6bc; display:grid; place-items:center; color:#fff; transition:background .2s, border-color .2s}
.extra .caja .ico{width:16px; height:16px; stroke-width:3; opacity:0; transition:opacity .2s}
.extra:has(input:checked){border-color:var(--verde); background:#f6fbf6}
.extra:has(input:checked) .caja{background:var(--verde); border-color:var(--verde)}
.extra:has(input:checked) .caja .ico{opacity:1}
.extra:has(input:focus-visible){outline:3px solid var(--hoja); outline-offset:2px}
.extra .nom{font-weight:700; line-height:1.3; display:block}
.extra .des{display:block; font-size:.85rem; color:var(--gris); line-height:1.4; margin-top:2px}
.extra .eti{display:inline-block; vertical-align:2px; margin-left:6px; font:800 .66rem var(--display); letter-spacing:.06em; padding:.3em .6em; border-radius:999px; background:var(--tinta); color:#fff}
.extra .eti.regalo{background:var(--hoja)}
.extra .pre{font:800 1rem var(--display); white-space:nowrap}
.extra .pre.gratis{color:var(--verde)}

.totales{margin-top:24px; padding:20px 22px; background:var(--tinta); color:#fff; border-radius:var(--r-m)}
.totales .fila{display:flex; justify-content:space-between; gap:12px; font-size:.95rem; color:rgba(255,255,255,.75)}
.totales .fila + .fila{margin-top:6px}
.totales .fila.total{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.15); color:#fff; font:800 1.35rem var(--display); align-items:baseline}
.totales .btn{width:100%; justify-content:center; margin-top:18px; font-size:1.05rem; padding:1.05em 1.5em}
.totales .sin-pago{display:flex; gap:.5em; align-items:center; justify-content:center; font-size:.85rem; color:rgba(255,255,255,.7); margin-top:12px; text-align:center}
.totales .sin-pago .ico{color:var(--hoja)}
.acc-sec{display:flex; gap:10px; margin-top:12px}
.acc-sec .btn{flex:1; justify-content:center; padding:.8em 1em; font-size:.92rem}
.garantias{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px}
.garantias li{display:flex; gap:12px; align-items:flex-start; font-size:.95rem; color:var(--gris)}
.garantias .ico{color:var(--verde); margin-top:3px}
.garantias strong{color:var(--tinta)}

.specs{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--r-l); overflow:hidden}
.spec{background:#fff; padding:26px 24px}
.spec .ico{width:28px; height:28px; color:var(--verde); margin-bottom:14px}
.spec small{display:block; font-size:.82rem; color:var(--gris); font-weight:600}
.spec strong{display:block; font:800 1.35rem/1.2 var(--display); margin-top:4px}
.nota-specs{font-size:.85rem; color:var(--gris); margin-top:14px}
.descripcion{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,70px)}
.descripcion .texto p{color:var(--gris); font-size:1.06rem}
.descripcion .texto p + p{margin-top:16px}
.descripcion .texto strong{color:var(--tinta)}

/* Barra de compra fija (móvil) */
.compra-fija{display:none}

/* ---------- Cesta (panel lateral) ---------- */
.velo{position:fixed; inset:0; z-index:91; background:rgba(12,20,15,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s}
.velo.ver{opacity:1; visibility:visible}
.cesta{position:fixed; top:0; right:0; bottom:0; z-index:92; width:min(440px,100%); background:var(--papel); display:flex; flex-direction:column; transform:translateX(105%); transition:transform .45s cubic-bezier(.7,0,.2,1); visibility:hidden; padding-top:env(safe-area-inset-top,0px)}
.cesta.abierta{transform:none; visibility:visible}
.cesta-cab{display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid var(--linea); background:#fff}
.cesta-cab h2{font-size:1.5rem; font-weight:800}
.x{width:42px; height:42px; border-radius:50%; border:1.5px solid var(--linea); background:#fff; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--tinta); display:grid; place-items:center}
.x:hover{border-color:var(--tinta)}
.cesta-cuerpo{flex:1; overflow-y:auto; padding:18px 24px; display:grid; align-content:start; gap:12px}
.linea-c{display:grid; grid-template-columns:84px 1fr; gap:14px; background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:12px}
.linea-c img{width:84px; height:84px; object-fit:contain; border-radius:10px; background:#fff}
.linea-c h3{font-size:1.05rem; font-weight:800; letter-spacing:0}
.linea-c .det{font-size:.84rem; color:var(--gris); line-height:1.45; margin-top:4px}
.linea-c .abajo{display:flex; justify-content:space-between; align-items:center; margin-top:8px}
.linea-c .abajo strong{font:800 1.05rem var(--display)}
.quitar{background:none; border:0; color:var(--gris); font-size:.84rem; text-decoration:underline; cursor:pointer; padding:4px}
.quitar:hover{color:#b3261e}
.vacia{text-align:center; padding:50px 10px; color:var(--gris)}
.vacia .ico{width:54px; height:54px; margin:0 auto 14px; color:#b6c6b8}
.vacia p{margin-bottom:20px}
.cesta-pie{padding:18px 24px calc(20px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--linea); background:#fff}
.cesta-pie .fila{display:flex; justify-content:space-between; align-items:baseline; font:800 1.3rem var(--display)}
.cesta-pie .fila small{font:500 .82rem var(--texto); color:var(--gris)}
.cesta-pie .btn{width:100%; justify-content:center; margin-top:14px}
.cesta-pie .nota{font-size:.84rem; color:var(--gris); margin-top:10px; display:flex; gap:.5em; align-items:flex-start}
.cesta-pie .nota .ico{color:var(--verde); margin-top:2px}

/* ---------- Ventana de solicitud de pedido ---------- */
.pedido{position:fixed; inset:0; z-index:93; display:grid; place-items:center; padding:20px; visibility:hidden; pointer-events:none}
.pedido.abierto{visibility:visible; pointer-events:auto}
.pedido-caja{position:relative; width:min(640px,100%); max-height:calc(100svh - 40px); overflow-y:auto; background:#fff; border-radius:var(--r-l); box-shadow:0 40px 90px -30px rgba(0,0,0,.6); opacity:0; transform:translateY(24px) scale(.98); transition:opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1)}
.pedido.abierto .pedido-caja{opacity:1; transform:none}
.pedido-caja > .x{position:absolute; top:16px; right:16px}
.ped-cab{padding:30px 32px 22px; background:var(--tinta); color:#fff; border-radius:var(--r-l) var(--r-l) 0 0}
.ped-cab h2{font-size:clamp(1.6rem,3.6vw,2.1rem); font-weight:900; padding-right:40px}
.ped-cab p{color:rgba(255,255,255,.8); margin-top:10px; font-size:1rem}
.pedido [hidden]{display:none !important}
.ped-cab{position:relative}
.ped-cab .x{position:absolute; top:16px; right:16px; border-color:rgba(255,255,255,.3); background:transparent; color:#fff}
.tranquilo{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px}
.tranquilo div{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-s); padding:12px; font-size:.84rem; line-height:1.4; color:rgba(255,255,255,.85)}
.tranquilo strong{display:block; color:#fff; font:800 .95rem var(--display); margin-bottom:3px}
.ped-cuerpo{padding:24px 32px 30px}
.ped-resumen{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; background:var(--papel); border-radius:var(--r-s); font-size:.92rem}
.ped-resumen strong{font:800 1.15rem var(--display)}
.ped-paso{margin-top:22px}
.ped-paso > h3{font-size:1.05rem; font-weight:800; letter-spacing:0; margin-bottom:10px}
.opc{display:grid; gap:8px}
.opc.tres{grid-template-columns:repeat(3,1fr)}
.opc.dos{grid-template-columns:repeat(2,1fr)}
.opc-b{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; padding:14px; background:#fff; border:1.5px solid var(--linea); border-radius:var(--r-s); cursor:pointer; font:inherit; color:var(--tinta); transition:border-color .2s, box-shadow .2s, background .2s}
.opc-b:hover{border-color:#b6d3b7}
.opc-b[aria-pressed="true"]{border-color:var(--verde); box-shadow:0 0 0 2px var(--verde); background:#f6fbf6}
.opc-b .ico{width:24px; height:24px; color:var(--verde)}
.opc-b.wa .ico{color:#1faa52}
.opc-b strong{font:800 .98rem var(--display)}
.opc-b small{font-size:.8rem; color:var(--gris); line-height:1.35}
.opc-b .rec{position:absolute; top:-9px; right:10px; font:800 .62rem var(--display); letter-spacing:.06em; background:#1faa52; color:#fff; padding:.3em .6em; border-radius:999px}
.campos{display:grid; gap:12px; margin-top:16px}
.campos[hidden]{display:none}
.campo label{display:block; font-weight:700; font-size:.9rem; margin-bottom:6px}
.campo label small{font-weight:500; color:var(--gris)}
.campo input, .campo select, .campo textarea{width:100%; font:inherit; font-size:16px; padding:.8em .95em; border:1.5px solid var(--linea); border-radius:var(--r-s); background:#fff; color:var(--tinta); transition:border-color .2s}
.campo input:focus, .campo select:focus, .campo textarea:focus{outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(67,160,71,.2)}
.campo textarea{min-height:84px; resize:vertical}
.campo .error{display:none; color:#b3261e; font-size:.84rem; margin-top:5px}
.campo.mal input{border-color:#b3261e}
.campo.mal .error{display:block}
.dos-col{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.acepto{display:flex; gap:10px; align-items:flex-start; font-size:.86rem; color:var(--gris); line-height:1.45}
.acepto input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--verde); flex:none}
.acepto.mal{color:#b3261e}
.ped-enviar{width:100%; justify-content:center; margin-top:4px; font-size:1.05rem}
.ped-enviar.wa{background:#25D366; box-shadow:0 12px 30px -12px rgba(37,211,102,.8)}
.ped-enviar.wa:hover{background:#1faa52}
.ped-enviar[disabled]{opacity:.6; cursor:progress}
.trampa{position:absolute; left:-9999px}
.ped-ok{padding:44px 32px 36px; text-align:center}
.ped-ok .ok-circ{width:84px; height:84px; margin:0 auto 22px; border-radius:50%; background:var(--hoja-clara); color:var(--verde); display:grid; place-items:center}
.ped-ok .ok-circ .ico{width:42px; height:42px; stroke-width:2.5}
.ped-ok h2{font-size:clamp(1.8rem,4vw,2.4rem); font-weight:900}
.ped-ok .ref{display:inline-block; margin:14px 0 6px; font:800 .95rem var(--display); background:var(--papel); padding:.5em 1em; border-radius:999px}
.ped-ok > p{color:var(--gris); max-width:46ch; margin:10px auto 0}
.ped-ok ol{text-align:left; max-width:420px; margin:24px auto 0; padding:0; list-style:none; counter-reset:o; display:grid; gap:10px}
.ped-ok ol li{counter-increment:o; display:flex; gap:12px; font-size:.95rem; color:var(--gris)}
.ped-ok ol li::before{content:counter(o); flex:none; width:26px; height:26px; border-radius:50%; background:var(--verde); color:#fff; display:grid; place-items:center; font:800 .8rem var(--display)}
.ped-ok .acc{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:28px}
.vista-previa{font-size:.8rem; color:var(--gris); background:#fff8e1; border:1px solid #f1df9c; padding:.7em 1em; border-radius:var(--r-s); margin-top:20px}

/* ---------- Responsive ---------- */
.menu a{white-space:nowrap}
@media (max-width:1360px){
  .menu{gap:20px}
  .nav .btn-wa-nav{font-size:0; padding:.72em; gap:0}
  .nav .btn-wa-nav .ico{width:22px; height:22px}
}
@media (max-width:1200px){
  .menu{gap:16px}
  .menu a{font-size:.95rem}
}
@media (max-width:1080px){
  .th-gr{grid-template-columns:1fr}
  .catalogo{grid-template-columns:1fr 1fr}
  .pasos-pedido{grid-template-columns:1fr 1fr}
  .ficha{grid-template-columns:1fr}
  .galeria{position:relative; top:0}
  .specs{grid-template-columns:repeat(2,1fr)}
  .descripcion,.por-que{grid-template-columns:1fr}
}
@media (max-width:720px){
  .btn-cesta{width:42px; height:42px}
  .catalogo{grid-template-columns:1fr}
  .pasos-pedido{grid-template-columns:1fr}
  .th-texto .hero-acc .btn{flex:1 1 100%; justify-content:center}
  .ficha-top{padding-top:calc(100px + env(safe-area-inset-top,0px))}
  .colores{grid-template-columns:repeat(2,1fr)}
  .opc.tres{grid-template-columns:1fr}
  .opc.tres .opc-b{flex-direction:row; align-items:center; flex-wrap:wrap; column-gap:12px}
  .opc.tres .opc-b small{flex-basis:100%; padding-left:36px; margin-top:-4px}
  .barra-movil a svg{flex:none}
  .tranquilo{grid-template-columns:1fr}
  .dos-col{grid-template-columns:1fr}
  .pedido{padding:0; place-items:end stretch}
  .pedido-caja{width:100%; max-height:94svh; border-radius:var(--r-l) var(--r-l) 0 0}
  .ped-cab,.ped-cuerpo{padding-left:22px; padding-right:22px}
  .ped-cuerpo{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .pag-ficha .barra-movil{display:none}
  .pag-ficha .wa-flot{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .compra-fija{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:58; align-items:center; justify-content:space-between; gap:12px; background:#fff; border-top:1px solid var(--linea); padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); box-shadow:0 -10px 30px -20px rgba(0,0,0,.35); transform:translateY(110%); transition:transform .35s}
  .compra-fija.ver{transform:none}
  .compra-fija small{display:block; font-size:.75rem; color:var(--gris)}
  .compra-fija strong{font:900 1.35rem var(--display)}
  .compra-fija .btn{padding:.85em 1.2em; font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .menu .nav-tienda a::after{animation:none; display:none}
  .cesta,.pedido-caja,.velo{transition:none}
}

/* ===== v2: 4 patinetes, regalos, instalación, top ventas ===== */
.top-ventas{display:inline-flex; align-items:center; gap:.45em; font:800 .74rem/1 var(--display); letter-spacing:.07em; color:#2b1a00; padding:.55em .9em; border-radius:999px; background:linear-gradient(100deg,#ffb300 0%,#ffd54f 45%,#ffb300 60%,#ff9800 100%); background-size:220% 100%; animation:topBrillo 3.2s linear infinite; box-shadow:0 6px 18px -8px rgba(255,152,0,.9); white-space:nowrap}
.top-ventas .ico{width:1.05em; height:1.05em; fill:currentColor; stroke:none; animation:topLatido 2.4s ease-in-out infinite}
@keyframes topBrillo{to{background-position:-220% 0}}
@keyframes topLatido{0%,70%,100%{transform:scale(1) rotate(0)} 80%{transform:scale(1.25) rotate(-12deg)} 90%{transform:scale(1.1) rotate(8deg)}}
.prod-foto .top-ventas,.thp-foto .top-ventas{position:absolute; right:14px; top:14px; z-index:2}
.compra .cab-mod{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

.tachado{text-decoration:line-through; color:var(--gris); font-weight:600}
.precio .tachado{font-size:1rem; margin-left:.35em}
.ahorro{display:inline-block; font:800 .8rem var(--display); color:#fff; background:var(--verde); padding:.35em .65em; border-radius:999px; margin-left:8px; vertical-align:middle}
.precio-caja .tachado{font-size:1.2rem; margin-left:.4em}

/* Portada: dos destacados */
.th-prods{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.thp{display:flex; flex-direction:column; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-l); overflow:hidden; text-decoration:none; color:#fff; transition:transform .35s, border-color .35s, box-shadow .35s}
.thp:hover{transform:translateY(-6px); border-color:var(--hoja); box-shadow:0 34px 60px -34px rgba(67,160,71,.8)}
.thp-foto{position:relative; display:block; aspect-ratio:1/1; background:#fff}
.thp-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.thp:hover .thp-foto img{transform:scale(1.04)}
.thp-info{padding:16px 18px 18px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px}
.thp-info small{display:block; color:rgba(255,255,255,.6); font-size:.8rem}
.thp-info strong{font:800 1.15rem/1.2 var(--display)}
.thp-info .pr{font:900 1.35rem var(--display); text-align:right; white-space:nowrap}
.thp-info .pr s{display:block; font:500 .8rem var(--texto); color:rgba(255,255,255,.5)}
.th-sello{display:inline-flex; align-items:center; gap:.5em; margin-top:16px; font-size:.9rem; color:rgba(255,255,255,.75)}
.th-sello .ico{color:var(--hoja)}

.prod-foto img{transition:opacity .3s}
.gal-miniaturas{grid-template-columns:repeat(5,1fr); gap:10px}
.gal-miniaturas button.portada img{object-fit:cover}
.gal-miniaturas button.portada{padding:0; overflow:hidden}
.gal-principal img.cubre{object-fit:cover; padding:0}
.sin-foto{position:absolute; left:18px; right:18px; bottom:18px; z-index:2; background:rgba(28,31,29,.85); color:#fff; font-size:.85rem; padding:.7em 1em; border-radius:var(--r-s); text-align:center}
.colores{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}

/* Regalos incluidos */
.regalos{margin-top:26px; position:relative; overflow:hidden; border-radius:var(--r-m); padding:20px 22px; background:linear-gradient(135deg,#1e5a22,#2E7D32 55%,#43a047); color:#fff}
.regalos::after{content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.08)}
.reg-cab{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.reg-cab .ico{width:30px; height:30px; flex:none}
.reg-cab strong{font:800 1.15rem var(--display); display:block}
.reg-cab small{color:rgba(255,255,255,.8); font-size:.85rem}
.reg-cab .gratis{margin-left:auto; font:900 .85rem var(--display); letter-spacing:.08em; background:#fff; color:var(--verde-osc); padding:.5em .9em; border-radius:999px}
.regalos ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; position:relative; z-index:1}
.regalos li{display:flex; gap:8px; align-items:flex-start; font-size:.93rem; font-weight:600}
.regalos li .ico{width:18px; height:18px; flex:none; margin-top:2px; color:#b9f6ca; stroke-width:3}

/* Extras con instalación */
.extra-g{display:grid; gap:0}
.instal{display:flex; align-items:center; gap:12px; margin:-4px 0 0; padding:12px 16px 12px 54px; background:#f6fbf6; border:1.5px solid var(--verde); border-top:1px dashed #b6d3b7; border-radius:0 0 var(--r-s) var(--r-s); font-size:.9rem; cursor:pointer}
.instal[hidden]{display:none}
.extra-g:has(.instal:not([hidden])) .extra{border-bottom-left-radius:0; border-bottom-right-radius:0}
.instal input{width:20px; height:20px; accent-color:var(--verde); flex:none; margin:0}
.instal span{flex:1}
.instal b{font-family:var(--display); white-space:nowrap}
.sin-extras{margin-top:26px; padding:16px 18px; border:1.5px dashed #b6d3b7; border-radius:var(--r-m); color:var(--gris); font-size:.95rem}
.sin-extras a{color:var(--verde); font-weight:700}

@media (max-width:1080px){ .th-prods{max-width:640px} }
@media (max-width:720px){
  .th-prods{grid-template-columns:1fr 1fr; gap:10px}
  .thp-info{flex-direction:column; align-items:flex-start; padding:12px}
  .thp-info .pr{text-align:left}
  .regalos ul{grid-template-columns:1fr}
  .reg-cab .gratis{font-size:.75rem}
  .gal-miniaturas{grid-template-columns:repeat(5,1fr); gap:6px}
  .instal{padding-left:16px}
}
@media (prefers-reduced-motion:reduce){ .top-ventas,.top-ventas .ico{animation:none} }

.thp-info .top-ventas{margin-bottom:8px; font-size:.66rem}
.prod-cuerpo .top-ventas{align-self:flex-start; margin-bottom:-4px}

/* ===== v3: pulido ===== */
.th-prods{grid-template-columns:1fr 1fr; gap:14px}
.thp-info{padding:12px 14px 14px}
.thp-info strong{font-size:1.02rem}
.thp-info .pr{font-size:1.15rem}
.thp-info small em{font-style:normal; color:#9ad79c; font-weight:700}
.thp-info .top-ventas{font-size:.6rem; margin-bottom:6px}
.th-gr{grid-template-columns:1fr 1fr}

.t-cab{padding:calc(124px + env(safe-area-inset-top,0px)) 0 8px}
.t-cab .migas{color:var(--gris); margin-bottom:14px}
.t-cab-fila{display:flex; justify-content:space-between; align-items:flex-end; gap:16px 28px; flex-wrap:wrap}
.t-cab h1{font-size:clamp(2.4rem,5vw,3.8rem); font-weight:900; text-transform:uppercase; line-height:1}
.t-chips{display:flex; flex-wrap:wrap; gap:8px}
.t-chips span{display:inline-flex; align-items:center; gap:.5em; font-size:.9rem; font-weight:700; padding:.6em 1em; border-radius:999px; background:#fff; border:1px solid var(--linea)}
.t-chips span .ico{color:var(--verde)}
.t-chips span.verde{background:var(--verde); color:#fff; border-color:var(--verde)}
.t-chips span.verde .ico{color:#fff}
.t-productos{padding-top:clamp(26px,3vw,40px)}

.etis{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.etis .top-ventas{margin:0}
.envio-gratis{display:inline-flex; align-items:center; gap:.4em; font:800 .7rem/1 var(--display); letter-spacing:.05em; text-transform:uppercase; color:var(--verde-osc); background:var(--hoja-clara); padding:.55em .85em; border-radius:999px}
.envio-gratis .ico{width:1.2em; height:1.2em}

.cf{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,70px); align-items:center}
.cf-texto h2{font-size:clamp(2rem,3.8vw,3rem); font-weight:900; margin:20px 0 18px}
.cf-texto p{color:var(--gris); font-size:1.06rem}
.cf-texto p + p{margin-top:14px}
.cf-texto strong{color:var(--tinta)}
.pastilla.oscura{background:var(--hoja-clara); color:var(--verde-osc); border-color:transparent}
.cf-pasos{list-style:none; margin:0; padding:0; grid-template-columns:1fr 1fr}

.gal-principal img.cubre{object-fit:cover; padding:0}
.disps{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.disp.envio{background:var(--verde); color:#fff}

@media (max-width:1080px){ .th-gr,.cf{grid-template-columns:1fr} .th-prods{max-width:none} }
@media (max-width:720px){
  .cf-pasos{grid-template-columns:1fr}
  .t-chips span{font-size:.8rem; padding:.5em .8em}
  .th-prods{gap:10px}
  .thp-info{padding:10px}
  .thp-info strong{font-size:.92rem}
}
@media (max-width:720px){ .thp-info small{display:none} .t-chips span.verde{flex-basis:100%; justify-content:center} }

.pedido-caja,.cesta-cuerpo{scrollbar-width:none; -ms-overflow-style:none}
.pedido-caja::-webkit-scrollbar,.cesta-cuerpo::-webkit-scrollbar{display:none}

/* ===== v4: portada tienda con 2 destacados ===== */
.th2-cab{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,80px); align-items:end; position:relative}
.th2-cab h2{font-size:clamp(2.1rem,4.4vw,3.6rem); font-weight:900; text-transform:uppercase; line-height:.98; margin-top:22px}
.th2-lado p{color:rgba(255,255,255,.78); font-size:1.08rem; margin-bottom:22px}
.th2-cards{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; margin-top:clamp(36px,5vw,60px)}
.thc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-l); overflow:hidden; color:#fff; text-decoration:none; transition:transform .35s, border-color .35s, box-shadow .35s}
.thc:hover{transform:translateY(-6px); border-color:var(--hoja); box-shadow:0 40px 70px -40px rgba(67,160,71,.85)}
.thc-foto{position:relative; display:block; min-height:300px; height:100%; background:#F4F7F3; overflow:hidden}
.thc-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.thc:hover .thc-foto img{transform:scale(1.04)}
.thc-info{display:flex; flex-direction:column; gap:10px; padding:clamp(18px,2.2vw,28px)}
.thc-etis{display:flex; flex-wrap:wrap; gap:6px}
.thc-etis .top-ventas{font-size:.62rem}
.thc-etis .envio-gratis{font-size:.62rem; background:rgba(67,160,71,.18); color:#9ad79c}
.thc-info small{color:rgba(255,255,255,.55); font-size:.85rem; margin-top:6px}
.thc-info strong{font:900 clamp(1.4rem,2.2vw,1.9rem)/1.05 var(--display); margin-top:-6px}
.thc-chips{display:flex; flex-wrap:wrap; gap:6px}
.thc-chips span{font-size:.78rem; font-weight:600; color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.16); padding:.3em .7em; border-radius:999px}
.thc-pie{margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; flex-wrap:wrap}
.thc-pr{font:900 clamp(1.6rem,2.4vw,2.1rem)/1 var(--display)}
.thc-pr s{display:block; font:500 .85rem var(--texto); color:rgba(255,255,255,.5); margin-top:6px}
.thc-pr em{display:block; font:500 .75rem var(--texto); font-style:normal; color:rgba(255,255,255,.5)}
.thc-pie .btn{padding:.7em 1.15em; font-size:.92rem}
.th2-pie{position:relative; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12)}
.th2-pasos{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 28px; counter-reset:p}
.th2-pasos li{counter-increment:p; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.75); font-size:.95rem}
.th2-pasos li::before{content:counter(p); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(67,160,71,.22); color:#9ad79c; font:800 .85rem var(--display)}
.th2-pasos b{color:#fff}
.th2-ver{display:inline-flex; align-items:center; gap:.4em; color:#fff; font-weight:700; text-decoration:none}
.th2-ver:hover{color:#9ad79c}
@media (max-width:900px){ .thc{grid-template-columns:1fr} .thc-foto{aspect-ratio:1/1; height:auto; min-height:0} }
@media (max-width:1080px){ .th2-cab{grid-template-columns:1fr} }
@media (max-width:720px){
  .th2-cards{grid-template-columns:1fr; gap:16px}
  .th2-pasos{flex-direction:column; gap:10px}
  .th2-lado .hero-acc .btn{flex:1 1 100%; justify-content:center}
}

/* ===== Páginas locales ===== */
.zona-llegar{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,70px); align-items:start}
.zona-llegar p{color:var(--gris); font-size:1.06rem; margin-top:16px}
.zona-ficha{background:var(--tinta); color:#fff; border-radius:var(--r-l); padding:clamp(24px,3vw,36px); display:grid; grid-template-columns:1fr 1fr; gap:18px}
.zf-dato strong{display:block; font:900 clamp(2rem,4vw,2.8rem)/1 var(--display); color:#9ad79c}
.zf-dato span{font-size:.9rem; color:rgba(255,255,255,.7)}
.zona-ficha ul{grid-column:1/-1; list-style:none; margin:0; padding:16px 0 0; border-top:1px solid rgba(255,255,255,.12); display:grid; gap:10px}
.zona-ficha li{display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:rgba(255,255,255,.85)}
.zona-ficha li .ico{color:var(--hoja); margin-top:3px; flex:none}
.zona-ficha li a{color:#fff}
.zona-ficha .btn{grid-column:1/-1; justify-content:center; background:#fff; color:var(--tinta)}
.zona-ficha .btn:hover{background:var(--hoja); color:#fff}
.zona-items{grid-template-columns:repeat(3,1fr)}
a.zona-serv{text-decoration:none; color:inherit; transition:transform .3s}
a.zona-serv:hover{transform:translateY(-4px)}
a.zona-serv:hover h3{color:var(--verde)}
.zona-otras{margin-top:26px; text-align:center; color:var(--gris); font-size:.95rem}
.zona-otras a{color:var(--verde); font-weight:700; margin:0 .35em}
.pie-zonas{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; padding:20px 0; margin-top:10px; border-top:1px solid rgba(255,255,255,.1); font-size:.88rem; color:rgba(255,255,255,.55)}
.pie-zonas a{color:rgba(255,255,255,.8); text-decoration:none}
.pie-zonas a:hover{color:#fff; text-decoration:underline}
@media (max-width:1080px){ .zona-llegar{grid-template-columns:1fr} .zona-items{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .zona-items{grid-template-columns:1fr} }

/* ===== v5: portada tienda más fina ===== */
.tienda-home{padding-top:clamp(50px,6vw,80px); padding-bottom:clamp(44px,5vw,70px)}
.th2-cab h2{font-size:clamp(1.8rem,3.3vw,2.7rem); margin-top:16px}
.th2-lado p{font-size:1rem; margin-bottom:16px}
.th2-cards{margin-top:clamp(26px,3vw,40px); gap:18px}
.thc-foto{min-height:220px}
.thc-info{padding:18px 20px; gap:8px}
.thc-info strong{font-size:clamp(1.25rem,1.8vw,1.55rem)}
.thc-pr{font-size:clamp(1.4rem,2vw,1.75rem)}
.th2-pie{margin-top:20px; padding-top:18px}
@media (min-width:901px){ .thc{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)} }