/* El Metro Hombre - Santomera
   Sobrio, monocromo, editorial. Sin colores de marca ajenos. */

@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#ffffff; --paper:#f6f5f2; --ink:#141414; --muted:#6c6a66; --soft:#8a8880;
  --line:#e7e4df; --black:#0b0b0b; --wrap:1140px; --r:10px;
}

*{box-sizing:border-box}

body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
body.nav-open{overflow:hidden}

h1,h2,h3{font-family:'Fraunces',Georgia,'Times New Roman',serif; font-weight:600; line-height:1.18; letter-spacing:-.01em; margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.1rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.16rem; letter-spacing:0}
p{margin:0 0 1em}
a{color:inherit}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.section{padding:64px 0; border-top:1px solid var(--line)}
.eyebrow{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin:0 0 .6em}

/* ---------- Cabecera ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{font-family:'Fraunces',Georgia,serif; font-size:1.2rem; font-weight:600; text-decoration:none; letter-spacing:-.01em}
.brand span{color:var(--soft); font-weight:400}
.menu-btn{background:none; border:0; padding:10px; cursor:pointer; display:flex; flex-direction:column; gap:5px; width:42px}
.menu-btn i{display:block; height:1px; background:var(--ink); transition:transform .25s ease, opacity .2s ease}
.menu-btn i:first-child{width:22px}
.menu-btn i:last-child{width:14px; margin-left:8px}

.drawer{position:fixed; inset:0 0 0 auto; width:min(340px,86vw); background:var(--bg); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:80; padding:22px; display:flex; flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-close{align-self:flex-end; background:none; border:0; font-size:1.5rem; line-height:1; padding:6px 10px; cursor:pointer; color:var(--muted)}
.drawer nav{display:flex; flex-direction:column; margin-top:18px}
.drawer nav a{padding:13px 2px; text-decoration:none; border-bottom:1px solid var(--line); font-size:1.02rem}
.drawer nav a:hover{color:var(--muted)}
.drawer-foot{margin-top:auto; font-size:.9rem; color:var(--muted)}
.drawer-foot a{text-decoration:none}
.scrim{position:fixed; inset:0; background:rgba(11,11,11,.32); opacity:0; pointer-events:none; transition:opacity .3s; z-index:70}
.scrim.open{opacity:1; pointer-events:auto}

/* ---------- Hero ---------- */
.hero{border-bottom:1px solid var(--line)}
.hero-inner{padding:66px 22px 70px}
.hero h1{max-width:15ch}
.hero .lead{max-width:52ch}
.lead{font-size:1.15rem; color:var(--muted); max-width:58ch}
.rating{color:var(--muted); font-size:.95rem; margin:0 0 1.1em; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.stars{color:#b9b5ae; letter-spacing:2px}
.rating-score{font-weight:600; color:var(--ink)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin:1.8em 0 0}

.btn-primary{display:inline-block; background:var(--black); color:#fff; text-decoration:none; padding:13px 26px; border-radius:var(--r); border:1px solid var(--black); font-size:.97rem; cursor:pointer; transition:opacity .2s}
.btn-primary:hover{opacity:.84}
.btn-outline{display:inline-block; background:none; color:var(--ink); text-decoration:none; padding:13px 26px; border-radius:var(--r); border:1px solid var(--line); font-size:.97rem; cursor:pointer; transition:border-color .2s}
.btn-outline:hover{border-color:var(--soft)}
.btn-primary.lg,.btn-outline.lg{padding:15px 30px; font-size:1rem}
.btn-primary[disabled]{opacity:.45; cursor:default}

/* ---------- Franja de ventajas ---------- */
.usps{background:var(--paper); border-bottom:1px solid var(--line)}
.usps-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line)}
.usp{background:var(--paper); padding:24px 22px}
.usp b{display:block; font-size:.98rem; margin-bottom:3px}
.usp span{font-size:.9rem; color:var(--muted)}

/* ---------- Rejilla de secciones ---------- */
.cards{display:grid; grid-template-columns:1fr; gap:18px; margin-top:34px}
.card{border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; text-decoration:none; display:block; transition:border-color .2s, transform .2s}
.card:hover{border-color:var(--soft); transform:translateY(-2px)}
.card h3{margin-bottom:.35em}
.card p{color:var(--muted); font-size:.95rem; margin:0}
.card .more{display:inline-block; margin-top:14px; font-size:.9rem; border-bottom:1px solid var(--line); padding-bottom:2px}

/* ---------- Tienda ---------- */
.local-grid{display:grid; grid-template-columns:1fr; gap:34px; margin-top:30px}
.horario{width:100%; border-collapse:collapse; font-size:.95rem; margin-top:8px}
.horario td{padding:7px 0; border-bottom:1px solid var(--line); color:var(--muted)}
.horario td:first-child{color:var(--ink); width:9em}
.horario tr:last-child td{border-bottom:0}
.map-box{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper); min-height:280px; display:flex; align-items:center; justify-content:center; cursor:pointer; text-align:center; padding:24px}
.map-box iframe{width:100%; height:100%; min-height:280px; border:0; display:block}
.map-box .map-hint{color:var(--muted); font-size:.93rem}

/* ---------- Banda de llamada ---------- */
.cta-band{background:var(--black); color:#fff; padding:58px 0}
.cta-band h2{color:#fff; margin-bottom:.4em}
.cta-band p{color:#c9c6c0; max-width:54ch}
.cta-band .btn-outline{color:#fff; border-color:#565656}
.cta-band .btn-outline:hover{border-color:#949494}
.cta-band .btn-primary{background:#fff; color:var(--black); border-color:#fff}

/* ---------- Pie ---------- */
.site-footer{border-top:1px solid var(--line); padding:44px 0 36px; font-size:.92rem; color:var(--muted)}
.footer-grid{display:grid; grid-template-columns:1fr; gap:26px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--ink)}
.footer-links{display:flex; flex-wrap:wrap; gap:16px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font-size:.86rem}

/* ---------- Boton flotante WhatsApp ---------- */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:50; background:var(--black); color:#fff; border-radius:999px; padding:12px 20px; text-decoration:none; font-size:.93rem; box-shadow:0 0 0 1px rgba(255,255,255,.85), 0 4px 16px rgba(0,0,0,.22); display:flex; align-items:center; gap:8px}
.wa-float:hover{opacity:.88}

/* ---------- Escritorio ---------- */
@media(min-width:760px){
  .usps-grid{grid-template-columns:repeat(4,1fr)}
  .cards{grid-template-columns:repeat(3,1fr); gap:22px}
  .local-grid{grid-template-columns:1fr 1fr; gap:46px; align-items:start}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
  .section{padding:78px 0}
}

/* ---------- Embudo de contacto ---------- */
.page-hero{border-bottom:1px solid var(--line); padding:52px 0 44px}
.page-hero h1{max-width:20ch}
.page-hero .lead{margin-bottom:0}

.pasos{display:flex; gap:8px; margin:0 0 30px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); flex-wrap:wrap}
.pasos span{display:flex; align-items:center; gap:8px}
.pasos span::after{content:''; width:22px; height:1px; background:var(--line)}
.pasos span:last-child::after{display:none}
.pasos span.activo{color:var(--ink)}
.pasos span.hecho{color:var(--muted)}

.paso{display:none}
.paso.activo{display:block; animation:entra .28s ease}
@keyframes entra{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.opciones{display:grid; grid-template-columns:1fr; gap:12px; margin:24px 0 0}
.opcion{border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; background:none; text-align:left; cursor:pointer; font:inherit; color:inherit; transition:border-color .2s, background .2s}
.opcion:hover{border-color:var(--soft); background:var(--paper)}
.opcion.elegida{border-color:var(--ink); background:var(--paper)}
.opcion b{display:block; font-size:1.02rem; margin-bottom:2px}
.opcion span{font-size:.92rem; color:var(--muted)}

.campo{margin:0 0 18px}
.campo label{display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px}
.campo input,.campo textarea,.campo select{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); font:inherit; background:var(--bg); color:var(--ink)}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none; border-color:var(--soft)}
.campo textarea{min-height:110px; resize:vertical}
.campo .ayuda{font-size:.84rem; color:var(--soft); margin-top:5px}
.campo-oculto{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.consent{display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--muted); margin:6px 0 22px}
.consent input{width:auto; margin-top:3px; flex:0 0 auto}

.acciones{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:26px}
.volver{background:none; border:0; font:inherit; color:var(--muted); cursor:pointer; padding:8px 2px; text-decoration:underline; text-underline-offset:3px}
.volver:hover{color:var(--ink)}

.aviso{padding:13px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); font-size:.93rem; margin-bottom:18px; display:none}
.aviso.visible{display:block}
.aviso.error{border-color:#c9b5b5; background:#fbf5f5}

.listo{text-align:center; padding:20px 0 10px}
.listo .marca{font-size:2.4rem; line-height:1; color:var(--ink); margin-bottom:.35em; font-family:'Fraunces',Georgia,serif}
.listo p{color:var(--muted); max-width:46ch; margin-left:auto; margin-right:auto}
.listo .acciones{justify-content:center}

@media(min-width:760px){
  .opciones{grid-template-columns:repeat(2,1fr)}
  .campos-2{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
}
.embudo{max-width:720px}
.ayuda-envio{font-size:.86rem; color:var(--soft); margin:14px 0 0}

/* ---------- Paginas de seccion ---------- */
.prosa{max-width:62ch}
.prosa h2{margin-top:1.8em}
.prosa h2:first-child{margin-top:0}
.lista-pasos{list-style:none; padding:0; margin:26px 0 0; counter-reset:paso}
.lista-pasos li{counter-increment:paso; position:relative; padding:0 0 22px 46px; border-left:1px solid var(--line); margin-left:12px}
.lista-pasos li:last-child{border-left-color:transparent; padding-bottom:0}
.lista-pasos li::before{content:counter(paso); position:absolute; left:-13px; top:0; width:26px; height:26px; border-radius:999px; background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--muted)}
.lista-pasos b{display:block; margin-bottom:2px}
.lista-pasos span{color:var(--muted); font-size:.95rem}
.hermanas{display:grid; grid-template-columns:1fr; gap:14px; margin-top:30px}
.hermana{border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; text-decoration:none; transition:border-color .2s}
.hermana:hover{border-color:var(--soft)}
.hermana b{display:block; font-size:.98rem}
.hermana span{font-size:.9rem; color:var(--muted)}
@media(min-width:760px){ .hermanas{grid-template-columns:1fr 1fr} }
.brand img{display:block; height:34px; width:auto}
.site-footer .brand img{height:36px; opacity:.9}