/* Clases Guitarra Valencia — home 2026 (cgv-2026.css)
   Sistema visual "promocional": negro cálido, dorado y crema. */

:root{
  --negro:#0e0d0b;
  --negro-2:#1a1814;
  --dorado:#d99a3b;
  --dorado-osc:#b97f27;
  --crema:#e9dcc0;
  --papel:#f7f4ee;
  --linea:#e7e2d6;
  --texto:#1d1b17;
  --suave:#5d574c;
  --blanco:#ffffff;
  --wa:#25D366;
  --wa-osc:#1da851;
  --radio:10px;
  --ancho:1120px;
  --titulos:'Oswald','Arial Narrow',Arial,sans-serif;
  --cuerpo:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--texto);font-family:var(--cuerpo);font-size:17px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--dorado-osc)}
a:hover{color:var(--negro)}
h1,h2,h3{font-family:var(--titulos);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:.2px}
h2{font-size:clamp(28px,4.2vw,40px);text-transform:uppercase}
h3{font-size:21px}
p{margin:0 0 1em}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.seccion{padding:72px 0}
.seccion--crema{background:var(--crema)}
.seccion--negra{background:var(--negro);color:#efe9dc}
.seccion--negra h2{color:var(--blanco)}
.etiqueta{display:inline-block;font-family:var(--titulos);text-transform:uppercase;letter-spacing:2px;font-size:14px;color:var(--dorado-osc);margin-bottom:10px}
.seccion--negra .etiqueta{color:var(--dorado)}
.intro{max-width:720px;color:var(--suave);font-size:18px}
.seccion--negra .intro{color:#cfc6b3}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:12px;top:12px;z-index:100;background:#fff;padding:8px 12px}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border-radius:999px;font-family:var(--titulos);font-size:19px;letter-spacing:.5px;text-decoration:none;text-transform:uppercase;transition:transform .15s ease,background .15s ease,color .15s ease;border:2px solid transparent}
.boton:hover{transform:translateY(-1px)}
.boton svg{width:22px;height:22px;flex:none}
.boton--wa{background:var(--wa);color:#fff}
.boton--wa:hover{background:var(--wa-osc);color:#fff}
.boton--borde{border-color:currentColor;color:#fff}
.boton--borde:hover{background:#fff;color:var(--negro)}
.boton--oscuro{border-color:var(--negro);color:var(--negro)}
.boton--oscuro:hover{background:var(--negro);color:#fff}
.acciones{display:flex;flex-wrap:wrap;gap:12px}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(14,13,11,.96);backdrop-filter:saturate(1.4) blur(6px);border-bottom:1px solid #2a2721}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-family:var(--titulos);font-size:18px;letter-spacing:.5px;text-transform:uppercase}
.marca img{width:52px;height:46px;object-fit:contain;filter:invert(1);mix-blend-mode:screen}
.menu{display:none;gap:22px}
.menu a{color:#e9e2d2;text-decoration:none;font-family:var(--titulos);text-transform:uppercase;font-size:15px;letter-spacing:1px}
.menu a:hover{color:var(--dorado)}
.cabecera__contacto{display:flex;align-items:center;gap:10px}
.cabecera__tel{display:none;color:#fff;text-decoration:none;font-family:var(--titulos);font-size:17px;letter-spacing:.5px}
.cabecera__tel:hover{color:var(--dorado)}
.cabecera .boton{min-height:42px;padding:8px 16px;font-size:16px}

/* Portada */
.portada{position:relative;color:#fff;background:#0e0d0b url('../images/homebg.jpg') center/cover no-repeat}
.portada::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,13,11,.94) 0%,rgba(14,13,11,.82) 45%,rgba(14,13,11,.45) 100%)}
.portada__contenido{position:relative;padding:64px 20px 72px;max-width:var(--ancho);margin:0 auto}
.portada__lugar{font-family:var(--titulos);text-transform:uppercase;letter-spacing:3px;color:var(--dorado);font-size:15px;margin-bottom:12px}
.portada h1{font-size:clamp(38px,7vw,68px);text-transform:uppercase;max-width:760px;margin-bottom:18px}
.portada h1 span{color:var(--dorado)}
.portada__texto{font-size:19px;max-width:600px;color:#e8e1d1;margin-bottom:22px}
.sellos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.sello{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid rgba(233,220,192,.35);border-radius:999px;font-size:15px;color:#f3ecdc;background:rgba(14,13,11,.4)}
.sello strong{color:#fff}
.estrellas{color:var(--dorado);letter-spacing:1px}
.portada__nota{margin-top:14px;font-size:14px;color:#bfb6a3}

/* Ventajas */
.ventajas{display:grid;grid-template-columns:1fr;gap:14px;margin-top:-34px;position:relative;z-index:2}
.ventaja{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px 18px 16px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 6px 20px rgba(14,13,11,.06)}
.ventaja svg{width:30px;height:30px;flex:none;color:var(--dorado-osc)}
.ventaja h3{font-size:18px;margin:0 0 2px;text-transform:uppercase}
.ventaja p{margin:0;font-size:15px;color:var(--suave)}

/* Clases */
.dos-col{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
.lista-check{list-style:none;padding:0;margin:0 0 1em}
.lista-check li{position:relative;padding-left:30px;margin-bottom:10px}
.lista-check li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:9px;border-left:3px solid var(--dorado-osc);border-bottom:3px solid var(--dorado-osc);transform:rotate(-45deg)}
.estilos{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.estilos span{background:var(--negro);color:var(--crema);padding:6px 12px;border-radius:999px;font-size:14px;font-family:var(--titulos);letter-spacing:1px;text-transform:uppercase}
.horario{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:24px}
.horario dl{margin:0 0 12px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
.horario dt{font-weight:700}
.horario dd{margin:0}

/* Precio */
.precio{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.tarjeta-precio{background:var(--negro-2);border:1px solid #39342b;border-radius:14px;padding:30px 26px;text-align:center}
.tarjeta-precio .cifra{font-family:var(--titulos);font-size:76px;line-height:1;color:var(--dorado)}
.tarjeta-precio .cifra small{font-size:24px;color:#efe9dc}
.tarjeta-precio .bono{font-size:18px;margin:12px 0 18px;color:#efe9dc}
.tarjeta-precio ul{list-style:none;padding:0;margin:0 0 22px;text-align:left;display:inline-block}
.tarjeta-precio li{padding:4px 0 4px 26px;position:relative;color:#d9d1bf}
.tarjeta-precio li::before{content:"♪";position:absolute;left:0;color:var(--dorado)}
.tarjeta-precio .boton{width:100%}

/* Opiniones */
.resumen-opiniones{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.resumen-opiniones .nota{font-family:var(--titulos);font-size:48px;line-height:1}
.resumen-opiniones .estrellas{font-size:22px}
.opiniones{display:grid;grid-template-columns:1fr;gap:16px}
.opinion{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px;margin:0}
.opinion blockquote{margin:0 0 12px;font-size:16px}
.opinion figcaption{font-size:14px;color:var(--suave)}
.mas-opiniones{margin-top:22px}

/* Ubicación */
.mapa{border:0;width:100%;height:320px;border-radius:var(--radio);background:#ddd}
.ubicacion address{font-style:normal;font-size:18px;margin-bottom:12px}

/* Reparación */
.reparacion{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}

/* Preguntas */
.faq{max-width:820px}
.faq details{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);margin-bottom:10px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:26px;color:var(--dorado-osc);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--suave)}

/* Guías */
.guias{display:grid;grid-template-columns:1fr;gap:12px}
.guia{display:block;background:#fff;border:1px solid var(--linea);border-left:4px solid var(--dorado);border-radius:var(--radio);padding:16px 18px;text-decoration:none;color:var(--texto);font-weight:600}
.guia:hover{border-color:var(--dorado-osc);color:var(--negro)}

/* Llamada final */
.final{text-align:center}
.final .acciones{justify-content:center}

/* Pie */
.pie{background:var(--negro);color:#bfb6a3;padding:40px 0 110px;font-size:15px}
.pie a{color:#e9e2d2}
.pie__fila{display:grid;grid-template-columns:1fr;gap:20px}
.pie strong{color:#fff;font-family:var(--titulos);font-weight:500;letter-spacing:1px;text-transform:uppercase}
.pie ul{list-style:none;padding:0;margin:6px 0 0}
.pie li{margin-bottom:4px}

/* Barra fija móvil */
.barra-movil{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(14,13,11,.97);border-top:1px solid #2a2721}
.barra-movil a{min-height:48px;border-radius:10px;font-size:17px;padding:8px 10px}
.barra-movil .boton--borde{border-color:#5a5347}

@media (min-width:640px){
  .ventajas{grid-template-columns:1fr 1fr}
  .opiniones{grid-template-columns:1fr 1fr}
  .guias{grid-template-columns:1fr 1fr 1fr}
}
@media (min-width:900px){
  .menu{display:flex}
  .cabecera__tel{display:inline}
  .portada__contenido{padding:110px 20px 120px}
  .ventajas{grid-template-columns:repeat(4,1fr)}
  .dos-col{grid-template-columns:1.3fr 1fr;gap:48px}
  .precio{grid-template-columns:1.2fr 1fr;gap:48px}
  .opiniones{grid-template-columns:repeat(3,1fr)}
  .reparacion{grid-template-columns:1.5fr auto}
  .pie__fila{grid-template-columns:2fr 1fr 1fr}
  .pie{padding-bottom:40px}
  .barra-movil{display:none}
  .mapa{height:380px}
}
section[id]{scroll-margin-top:72px}
@media (max-width:899px){
  .marca{font-size:15px;line-height:1.1;max-width:170px}
  .cabecera .boton span{display:none}
  .cabecera .boton{padding:8px 12px}
  .seccion{padding:56px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .boton{transition:none}
}