/* ============================================================
   Pelucas Cabello R. — renovación web (demo)
   Identidad de la original conservada y modernizada:
   Playfair Display (titulares) + Open Sans (texto),
   carbón #1B2024 + dorado #D7B369 sobre marfil cálido.
   ============================================================ */

:root {
  /* Paleta 60-30-10 */
  --marfil: #faf7f2;        /* 60% fondo */
  --carbon: #1b2024;        /* 30% bandas / texto fuerte */
  --dorado: #d7b369;        /* 10% acento (siempre sobre carbón) */
  --dorado-texto: #7a5c1e;  /* dorado oscuro para texto sobre marfil (AA) */
  --hueso: #f5efe6;         /* texto sobre carbón */
  --texto: #2a2e33;         /* cuerpo sobre marfil */
  --texto-suave: #55595e;   /* secundario sobre marfil */
  --linea: #e7dfd2;         /* filetes sobre marfil */
  --linea-oscura: rgba(245, 239, 230, .16);

  /* Tipografía */
  --display: "Playfair Display", Georgia, serif;
  --cuerpo: "Open Sans", "Segoe UI", Arial, sans-serif;

  /* Espaciado y ritmo */
  --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem;
  --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: 6.5rem;
  --maxw: 1180px;
  --radio: 2px;
}

/* ---------- Reset ligero ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto);
  background: var(--marfil);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0 0 var(--sp-2); color: var(--carbon); }
p { margin: 0 0 var(--sp-2); }
a { color: var(--dorado-texto); }
a:hover { color: var(--carbon); }

:focus-visible { outline: 3px solid var(--dorado-texto); outline-offset: 3px; }
.fondo-oscuro :focus-visible, .fondo-oscuro:focus-within :focus-visible { outline-color: var(--dorado); }

.saltar {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--carbon); color: var(--hueso); padding: .75rem 1.25rem;
}
.saltar:focus { left: .5rem; top: .5rem; }

/* ---------- Utilidades ---------- */
.contenedor { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.fondo-oscuro { background: var(--carbon); color: var(--hueso); }
.fondo-oscuro h2, .fondo-oscuro h3 { color: var(--hueso); }
.texto-dorado { color: var(--dorado); }
.texto-dorado-luz { color: var(--dorado-texto); }
.eyebrow {
  font-family: var(--cuerpo); font-size: .78rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--dorado-texto);
  margin: 0 0 var(--sp-2);
}
.fondo-oscuro .eyebrow { color: var(--dorado); }
.seccion { padding: var(--sp-6) 0; }
.seccion-num {
  font-family: var(--display); font-style: italic; font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--dorado-texto); opacity: .55; display: block; line-height: 1;
  margin-bottom: var(--sp-2);
}
.fondo-oscuro .seccion-num { color: var(--dorado); }
.filete { border: 0; border-top: 1px solid var(--linea); margin: 0; }
.fondo-oscuro .filete { border-top-color: var(--linea-oscura); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--cuerpo); font-weight: 700; font-size: 1rem;
  padding: .9rem 1.7rem; min-height: 48px;
  border-radius: var(--radio); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--dorado { background: var(--dorado); color: var(--carbon); }
.btn--dorado:hover { background: #e3c078; color: var(--carbon); }
.btn--oscuro { background: var(--carbon); color: var(--hueso); }
.btn--oscuro:hover { background: #2c3338; color: var(--hueso); }
.btn--fantasma { border-color: var(--dorado); color: var(--dorado); background: transparent; }
.btn--fantasma:hover { background: rgba(215, 179, 105, .12); color: var(--dorado); }
.btn--fantasma-claro { border-color: var(--carbon); color: var(--carbon); background: transparent; }
.btn--fantasma-claro:hover { background: rgba(27, 32, 36, .06); color: var(--carbon); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: var(--carbon); color: var(--hueso);
  border-bottom: 1px solid var(--linea-oscura);
}
.cabecera__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); min-height: 72px;
}
.cabecera__logo { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.cabecera__logo img { width: 96px; height: auto; }
.cabecera__logo strong {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  color: var(--hueso); letter-spacing: .04em; line-height: 1.1;
}
.cabecera__logo strong span { display: block; font-family: var(--cuerpo); font-weight: 400; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--dorado); }
.navegacion ul { list-style: none; display: flex; gap: var(--sp-3); margin: 0; padding: 0; }
.navegacion a {
  color: var(--hueso); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .5rem 0; border-bottom: 2px solid transparent;
}
.navegacion a:hover, .navegacion a[aria-current="page"] { border-bottom-color: var(--dorado); color: var(--dorado); }
.cabecera__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--dorado); text-decoration: none; font-weight: 700; font-size: .95rem;
  white-space: nowrap; padding: .5rem 0;
}
.cabecera__tel:hover { color: var(--hueso); }

/* Menú móvil */
.btn-menu {
  display: none; background: none; border: 2px solid var(--linea-oscura);
  color: var(--hueso); border-radius: var(--radio); padding: .55rem .8rem;
  font: inherit; font-weight: 700; min-height: 48px; cursor: pointer;
}
@media (max-width: 860px) {
  .btn-menu { display: inline-flex; align-items: center; gap: .5rem; }
  .cabecera__tel--escritorio { display: none; }
  .navegacion {
    position: absolute; inset: 100% 0 auto 0; background: var(--carbon);
    border-bottom: 1px solid var(--linea-oscura);
    display: none; padding: var(--sp-3) clamp(1.25rem, 4vw, 2.5rem) var(--sp-4);
  }
  .navegacion.abierta { display: block; }
  .navegacion ul { flex-direction: column; gap: 0; }
  .navegacion li + li { border-top: 1px solid var(--linea-oscura); }
  .navegacion a { display: block; padding: .9rem 0; font-size: 1.05rem; }
}

/* ---------- Hero (editorial tipográfico + banda de foto vertical) ---------- */
.hero { background: var(--marfil); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  min-height: min(78vh, 720px);
}
.hero__texto {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-5) clamp(1.25rem, 4vw, 3rem);
  border-right: 1px solid var(--linea);
}
.hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.4rem); font-weight: 600; line-height: 1.06;
  letter-spacing: -.01em; margin: 0 0 var(--sp-3);
}
.hero h1 em { font-style: italic; color: var(--dorado-texto); }
.hero__sub { font-size: clamp(1.02rem, 1.4vw, 1.15rem); max-width: 34em; color: var(--texto-suave); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.hero__foto { position: relative; min-height: 420px; }
.hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(27, 32, 36, .72); color: var(--hueso);
  font-size: .82rem; padding: .6rem 1rem; backdrop-filter: blur(2px);
}
.hero__sello {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: var(--sp-3);
  font-size: .85rem; color: var(--texto-suave);
}
.hero__sello svg { flex: none; color: var(--dorado-texto); }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__texto { border-right: 0; border-bottom: 1px solid var(--linea); padding: var(--sp-4) 1.25rem; }
  .hero__foto { min-height: 62vw; }
}

/* Sellos de confianza */
.sellos { border-bottom: 1px solid var(--linea); background: var(--marfil); }
.sellos ul {
  list-style: none; margin: 0; padding: var(--sp-3) 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
}
.sellos li { display: flex; align-items: center; gap: .6rem; font-size: .88rem; font-weight: 600; color: var(--texto); }
.sellos svg { flex: none; color: var(--dorado-texto); }
@media (max-width: 860px) { .sellos ul { grid-template-columns: 1fr 1fr; } }

/* ---------- Bandas verticales alternas (texto / foto) ---------- */
.banda { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.banda__texto {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-5) clamp(1.5rem, 4vw, 4rem);
}
.banda__texto--marco { border-right: 1px solid var(--linea); }
.banda--flip .banda__texto--marco { border-right: 0; border-left: 1px solid var(--linea); }
.banda__foto { position: relative; min-height: 320px; }
.banda__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banda__pie {
  position: absolute; left: 0; bottom: 0; background: rgba(27, 32, 36, .72);
  color: var(--hueso); font-size: .8rem; padding: .45rem .9rem; backdrop-filter: blur(2px);
}
.banda h2, .banda h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.banda p { max-width: 32em; color: var(--texto-suave); }
.fondo-oscuro .banda p { color: var(--hueso); opacity: .92; }
.banda .btn { align-self: flex-start; margin-top: var(--sp-2); }
.lista-detalle { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.lista-detalle li { padding: .45rem 0 .45rem 1.6rem; position: relative; }
.lista-detalle li::before { content: ""; position: absolute; left: 0; top: .95em; width: .8rem; height: 2px; background: var(--dorado-texto); }
.fondo-oscuro .lista-detalle li::before { background: var(--dorado); }

@media (max-width: 860px) {
  .banda { grid-template-columns: 1fr; min-height: 0; }
  .banda__texto { padding: var(--sp-4) 1.25rem; border: 0 !important; }
  .banda__foto { order: -1; min-height: 58vw; }
  .banda--flip .banda__foto { order: -1; }
}

/* ---------- Banda cita a sangre (parallax suave) ---------- */
.cita { position: relative; min-height: 460px; display: grid; align-items: center; overflow: hidden; }
.cita > img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; }
.cita::after { content: ""; position: absolute; inset: 0; background: rgba(27, 32, 36, .72); }
.cita__contenido { position: relative; z-index: 1; text-align: center; padding: var(--sp-5) 1.25rem; }
.cita__contenido blockquote {
  margin: 0 auto var(--sp-3); max-width: 18em;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.2; color: var(--hueso);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cita > img { animation: desplaza linear both; animation-timeline: view(); animation-range: entry 0% cover 100%; }
    @keyframes desplaza { from { transform: translateY(4%); } to { transform: translateY(-4%); } }
  }
}

/* ---------- Galería horizontal (scroll-snap) ---------- */
.galeria__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.galeria__pista {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 26vw, 330px);
  gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) var(--sp-2);
  margin: 0 calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
  scrollbar-width: thin; scrollbar-color: var(--dorado) transparent;
}
.ficha { scroll-snap-align: start; }
.ficha figure { margin: 0; }
.ficha img { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: var(--radio); }
.ficha figcaption { padding: .7rem .2rem 0; }
.ficha figcaption strong { display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--carbon); }
.ficha figcaption span { font-size: .85rem; color: var(--texto-suave); }
.galeria__ayuda { font-size: .85rem; color: var(--texto-suave); white-space: nowrap; }

/* ---------- Testimonios ---------- */
.testimonios { background: var(--carbon); }
.testimonios__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 860px) { .testimonios__grid { grid-template-columns: 1fr; } }
.testimonio {
  border: 1px solid var(--linea-oscura); border-radius: var(--radio);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2);
}
.testimonio blockquote { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--hueso); }
.testimonio blockquote::before { content: "“"; display: block; font-family: var(--display); font-size: 2.6rem; line-height: .6; color: var(--dorado); margin-bottom: .6rem; }
.testimonio cite { font-style: normal; font-weight: 700; font-size: .9rem; color: var(--dorado); }
.testimonio .estrellas { color: var(--dorado); letter-spacing: .18em; font-size: .9rem; }

/* ---------- CTA final ---------- */
.cta-final { background: var(--carbon); color: var(--hueso); padding: var(--sp-5) 0; }
.cta-final__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cta-final h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0 0 var(--sp-1); }
.cta-final p { margin: 0; color: var(--hueso); opacity: .92; max-width: 34em; }
.cta-final__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- Pie ---------- */
.pie { background: var(--carbon); color: var(--hueso); border-top: 1px solid var(--linea-oscura); padding: var(--sp-4) 0 var(--sp-3); }
.pie__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--sp-3); }
@media (max-width: 860px) { .pie__grid { grid-template-columns: 1fr 1fr; } }
.pie h3 { font-size: .8rem; font-family: var(--cuerpo); letter-spacing: .2em; text-transform: uppercase; color: var(--dorado); margin-bottom: var(--sp-2); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .45rem; }
.pie a { color: var(--hueso); text-decoration: none; }
.pie a:hover { color: var(--dorado); }
.pie__marca img { width: 110px; height: auto; margin-bottom: var(--sp-2); }
.pie__marca p { font-size: .92rem; opacity: .9; max-width: 26em; }
.pie address { font-style: normal; font-size: .92rem; line-height: 1.8; opacity: .92; }
.pie__legal {
  margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--linea-oscura);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1);
  font-size: .8rem; opacity: .78;
}
.pie__legal p { margin: 0; }

/* ---------- Páginas interiores: cabecera editorial ---------- */
.pagina-cabecera { background: var(--carbon); color: var(--hueso); padding: var(--sp-5) 0; }
.pagina-cabecera h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); margin: 0 0 var(--sp-2); color: var(--hueso); }
.pagina-cabecera p { max-width: 44em; margin: 0; opacity: .92; }
.pagina-cabecera .eyebrow { color: var(--dorado); }

/* Servicios: ancla compensando cabecera sticky */
[id] { scroll-margin-top: 84px; }

/* Aviso práctico (parking, horarios) */
.aviso {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  border: 1px solid var(--linea-oscura); border-left: 3px solid var(--dorado);
  border-radius: var(--radio); padding: var(--sp-2) var(--sp-3); background: rgba(215, 179, 105, .08);
}
.aviso svg { flex: none; margin-top: .2rem; color: var(--dorado); }
.aviso p { margin: 0; font-size: .95rem; }

/* ---------- Contacto ---------- */
.contacto-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 860px) { .contacto-grid { grid-template-columns: 1fr; } }
.tarjeta-datos { border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--sp-3); background: #fff; }
.tarjeta-datos dl { margin: 0; }
.tarjeta-datos dt { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dorado-texto); margin-top: var(--sp-2); }
.tarjeta-datos dd { margin: .2rem 0 0; font-size: 1.05rem; }
.tarjeta-datos a { text-decoration: none; font-weight: 700; }
.formulario { background: var(--carbon); color: var(--hueso); border-radius: var(--radio); padding: clamp(1.5rem, 3vw, 2.5rem); }
.formulario h2 { margin-top: 0; }
.formulario p.intro { color: var(--hueso); opacity: .9; }
.campo { margin-bottom: var(--sp-2); }
.campo label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .35rem; }
.campo input, .campo textarea, .campo select {
  width: 100%; font: inherit; color: var(--hueso);
  background: rgba(245, 239, 230, .07);
  border: 1px solid var(--linea-oscura); border-radius: var(--radio);
  padding: .8rem .9rem; min-height: 48px;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 3px solid var(--dorado); outline-offset: 1px; border-color: var(--dorado); }
.campo .ayuda { font-size: .8rem; opacity: .75; margin: .3rem 0 0; }
.formulario__nota { font-size: .8rem; opacity: .75; margin-top: var(--sp-2); }
.formulario__exito { display: none; border: 1px solid var(--dorado); border-radius: var(--radio); padding: var(--sp-2) var(--sp-3); color: var(--dorado); font-weight: 600; }

/* ---------- CTA fija móvil ---------- */
.cta-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--carbon); border-top: 1px solid var(--linea-oscura);
  padding-bottom: env(safe-area-inset-bottom);
}
.cta-movil a {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 56px; font-weight: 700; text-decoration: none; font-size: .95rem;
}
.cta-movil a:first-child { color: var(--carbon); background: var(--dorado); }
.cta-movil a:last-child { color: var(--hueso); background: var(--carbon); }
@media (max-width: 720px) {
  .cta-movil { display: grid; }
  body { padding-bottom: 56px; }
  .pie { padding-bottom: var(--sp-3); }
}

/* ---------- Revelado al hacer scroll (con JS; sin JS el contenido es visible) ---------- */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
html.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .btn:hover { transition: none; }
}

/* ---------- Rendimiento ---------- */
.seccion-larga { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* Impresión limpia */
@media print {
  .cabecera, .cta-movil, .cta-final__acciones { display: none; }
  html.js .reveal { opacity: 1; transform: none; }
}