/* ==========================================================================
   Carmen Catoira Peluquería y Estética
   Hoja de estilos única. Los colores y medidas se editan aquí arriba.
   ========================================================================== */

:root {
  /* Paleta de marca (verde salvia del logo + crema + tinta) */
  --sage:        #99ae80;
  --sage-deep:   #54683f;
  --sage-soft:   #e7ecdf;
  --cream:       #f8f6f0;
  --cream-deep:  #efeadf;
  --ink:         #1d1e1a;
  --ink-soft:    #4e5247;
  --white:       #ffffff;
  --line:        rgba(29, 30, 26, .12);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --wrap:    1180px;
  --gutter:  clamp(1rem, 4vw, 2.5rem);
  --radius:  4px;
  --section: clamp(4rem, 9vw, 7.5rem);
  --header-h: 76px;
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* El "rebote" al llegar al final en móvil destapa el fondo del lienzo, no el
     del footer. Pintándolo del mismo tinte que el pie, no aparece una franja
     clara ni arriba (sobre la foto oscura del hero) ni abajo. */
  background: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: var(--sage); text-underline-offset: .25em; }
a:hover { color: var(--sage-deep); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: .005em;
  text-wrap: balance;
}
p { margin: 0 0 1.1em; text-wrap: pretty; }
strong { font-weight: 600; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream); padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* --- Tipografía de apoyo ------------------------------------------------ */

.eyebrow {
  font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sage-deep); font-weight: 500; margin-bottom: 1rem;
}
.hero .eyebrow { color: var(--sage-soft); }

.h-display { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); }

.lead { font-size: clamp(1.1rem, 1.04rem + .35vw, 1.3rem); color: var(--ink-soft); }
.hero .lead { color: rgba(255, 255, 255, .94); }

/* --- Botones ------------------------------------------------------------ */

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  padding: .9rem 1.9rem;
  border: 1px solid var(--ink);
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--white); }

.btn-ghost { background: transparent; border-color: currentColor; color: inherit; }
.hero .btn-ghost { color: var(--white); }
.btn-ghost:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

.btn-sm { padding: .6rem 1.25rem; font-size: .75rem; }

/* --- Cabecera ----------------------------------------------------------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(248, 246, 240, 0);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.is-stuck {
  background: rgba(248, 246, 240, .94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--white); }
.site-header.is-stuck .brand { color: var(--ink); }
.brand img { width: 40px; height: 40px; border-radius: 3px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-family: var(--font-display); font-weight: 500; font-size: 1.28rem; letter-spacing: .01em; }
.brand-text small { font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  color: var(--white); text-decoration: none; font-size: .82rem;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.site-header.is-stuck .nav a { color: var(--ink); }
.nav a:not(.btn):hover { color: var(--sage); }
.nav .nav-cta { background: var(--white); color: var(--ink); border-color: var(--white); }
.site-header.is-stuck .nav .nav-cta { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.nav .nav-cta:hover { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--white); }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px;
}
.nav-toggle span {
  display: block; width: 26px; height: 1.5px; background: var(--white);
  transition: transform .3s ease, opacity .2s ease, background .3s ease;
}
.site-header.is-stuck .nav-toggle span, .nav-open .nav-toggle span { background: var(--ink); }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(92vh, 780px);
  display: grid; align-items: center;
  padding: calc(var(--header-h) + 3rem) 0 4rem;
  overflow: hidden;
}
.hero-img, .hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; }
/* Dos capas. La vertical asienta cabecera y pie del hero; la horizontal es la
   que garantiza el contraste, porque el texto va alineado a la izquierda y la
   foto tiene una ventana muy clara justo detrás del titular. Dejando que se
   abra hacia la derecha, la foto sigue respirando. */
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(20,21,18,.72) 0%, rgba(20,21,18,.58) 40%, rgba(20,21,18,.12) 88%, rgba(20,21,18,0) 100%),
    linear-gradient(180deg, rgba(20,21,18,.58) 0%, rgba(20,21,18,.42) 45%, rgba(20,21,18,.76) 100%);
}

.hero-content {
  position: relative; color: var(--white); max-width: 46rem;
  /* Sombra corta y marcada, no un halo difuso: define el borde de la letra
     aunque justo detrás caiga una zona clara de la foto. */
  text-shadow: 0 1px 2px rgba(15, 16, 13, .55), 0 2px 16px rgba(15, 16, 13, .45);
}
.hero h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.8rem); margin-bottom: .35em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

/* --- Franja de datos ---------------------------------------------------- */

.strip { background: var(--ink); color: var(--cream); }
.strip-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding-block: clamp(2rem, 4vw, 3rem);
}
.strip h2 {
  font-family: var(--font-body); font-size: .76rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sage);
  margin-bottom: .6rem;
}
.strip p { font-size: 1rem; line-height: 1.6; color: rgba(248,246,240,.92); }
.strip a { text-decoration: none; }
.strip a:hover { color: var(--sage); }

/* --- Secciones ---------------------------------------------------------- */

.section { padding-block: var(--section); }
.section-alt { background: var(--cream-deep); }

.section-head { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr 1fr; align-items: center;
}
.split-reverse .split-media { order: 2; }
.split-media img, .split-media .map {
  width: 100%; border-radius: var(--radius);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.split-media .map { border: 0; min-height: 340px; filter: grayscale(.25); }
.split-text .btn { margin-top: 1.5rem; }

/* --- Tarjetas de servicios ---------------------------------------------- */

.cards { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.card h3 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.15rem); }
.card > p { color: var(--ink-soft); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0 0; padding: 0; }
.chips li {
  background: var(--sage-soft);
  color: var(--sage-deep);
  border-radius: 100px;
  padding: .42rem 1rem;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .01em;
}

/* --- Galería ------------------------------------------------------------ */

.gallery {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(4, 1fr);
}
.shot {
  margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in;
  overflow: hidden; border-radius: var(--radius); aspect-ratio: 1 / 1;
}
.shot-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.shot:hover img { transform: scale(1.05); }

.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: min(94vw, 1200px); max-height: 92vh;
}
.lightbox::backdrop { background: rgba(18, 19, 16, .9); }
.lightbox img { max-height: 92vh; width: auto; border-radius: var(--radius); }
.lightbox-close {
  position: fixed; top: 1rem; right: 1.25rem;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.15); color: var(--white);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.3); }

/* --- Contacto ----------------------------------------------------------- */

.contact-list { margin: 2rem 0 0; display: grid; gap: 1.35rem; }
.contact-list dt {
  font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sage-deep); margin-bottom: .2rem;
}
.contact-list dd { margin: 0; font-size: 1.05rem; }
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-list a:hover { border-color: var(--sage-deep); }

/* --- Pie ---------------------------------------------------------------- */

.site-footer { background: var(--ink); color: rgba(248,246,240,.86); padding-top: clamp(3rem, 6vw, 4.5rem); font-size: .97rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.6fr 1fr 1fr; padding-bottom: 3rem; }
.site-footer .brand { color: var(--cream); margin-bottom: 1.25rem; }
.site-footer h2 {
  font-family: var(--font-body); font-size: .76rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sage); margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--sage); }
.social { margin-top: 1.25rem !important; }

.footer-legal {
  border-top: 1px solid rgba(248,246,240,.14);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  font-size: .82rem;
}
.footer-legal p { margin: 0; }

/* --- Animación de entrada ----------------------------------------------- */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .split, .footer-grid { grid-template-columns: 1fr; }
  .split-reverse .split-media { order: 0; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .shot-wide { grid-column: span 2; }

  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 2rem;
    /* El panel arranca en top: var(--header-h), así que para esconderlo hay que
       subirlo su propia altura MÁS esos 76px. Un porcentaje suelto no vale: se
       calcula solo sobre la altura del panel y deja asomando una franja cuyo
       tamaño depende de cuántos enlaces tenga el menú. */
    transform: translateY(calc(-100% - var(--header-h)));
    /* Fuera de la pantalla pero aún tabulable: visibility lo saca también del
       orden de foco y del árbol de accesibilidad mientras está cerrado. */
    visibility: hidden;
    transition: transform .35s ease, visibility 0s linear .35s;
  }
  .nav a { color: var(--ink) !important; padding: .9rem 0; font-size: 1rem; }
  .nav .nav-cta { margin-top: 1rem; text-align: center; background: var(--ink); color: var(--cream) !important; border-color: var(--ink); }
  .nav-open .nav { transform: none; visibility: visible; transition: transform .35s ease, visibility 0s; }
  .nav-open .site-header { background: rgba(248,246,240,.98); }
  .nav-open .brand { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --- Página de texto (aviso legal) -------------------------------------- */

.page-legal { background: var(--white); }
.page-body { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)); }

.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); margin-top: 2.5rem; }
.prose ul { padding-left: 1.2rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: .35rem; }
.back-link { margin-top: 3rem; }

.nav-simple a { color: var(--ink); }