/* ============================================================
   PABLETES · Peluquería Infantil Las Rozas — demo de renovación
   Paleta 60-30-10: marfil 60% · azul Pabletes 30% · sol 10%
   Tipografía: Baloo 2 (display) + Nunito (texto)
   ============================================================ */

:root{
  /* primitivos */
  --azul:#0c4da2;          /* azul corporativo original (pabletes.com) */
  --azul-900:#082c5e;
  --azul-100:#e3edfb;
  --marfil:#faf7f0;
  --crema:#f0e7d7;
  --sol:#ffc22e;
  --tinta:#1d2740;
  --tinta-suave:#48536e;
  --blanco:#ffffff;
  --linea:rgba(12,77,162,.16);

  /* semánticos */
  --fondo:var(--marfil);
  --texto:var(--tinta);
  --texto-sec:var(--tinta-suave);
  --acento:var(--azul);
  --radio:18px;
  --radio-xl:28px;
  --sombra:0 14px 40px rgba(8,44,94,.14);
  --sombra-suave:0 6px 18px rgba(8,44,94,.10);
  --esp:clamp(4rem, 9vw, 7.5rem);
  --display:"Baloo 2", "Trebuchet MS", cursive, sans-serif;
  --cuerpo:"Nunito", "Segoe UI", system-ui, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

body{
  font-family:var(--cuerpo);
  color:var(--texto);
  background:var(--fondo);
  line-height:1.65;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }

/* foco visible (no quitar outline sin sustituto) */
:focus-visible{ outline:3px solid var(--sol); outline-offset:2px; border-radius:4px; }

h1,h2,h3{ font-family:var(--display); line-height:1.08; letter-spacing:-.01em; color:var(--azul-900); }
h1{ font-size:clamp(2.6rem, 6.4vw, 4.6rem); font-weight:800; }
h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); font-weight:700; }
h3{ font-size:clamp(1.3rem, 2.4vw, 1.7rem); font-weight:700; }
p{ max-width:62ch; }

a{ color:var(--azul); }
a:hover{ color:var(--azul-900); }

.contenedor{ width:min(1150px, 92%); margin-inline:auto; }
.band{ width:100%; }              /* bandas de color a ancho completo */
.centrado{ text-align:center; }
.centrado p{ margin-inline:auto; }

/* --- utilidades de marca ------------------------------------ */
.eyebrow{
  display:inline-block; font-weight:800; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul); margin-bottom:.9rem;
}
.ola{ display:block; width:5.2rem; height:auto; margin:.7rem 0 1.1rem; }
.ola path{ stroke:var(--sol); stroke-width:7; fill:none; stroke-linecap:round; }
.num{
  font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,5vw,3.6rem);
  color:var(--azul-100); line-height:1; display:block; margin-bottom:.4rem;
}
.sobre-azul h2, .sobre-azul h3{ color:var(--blanco); }
.sobre-azul .num{ color:var(--sol); }
.sobre-azul p{ color:#eaf1fb; }

/* --- botones -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  padding:.95rem 1.7rem; border-radius:999px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; min-height:48px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-azul{ background:var(--azul); color:var(--blanco); box-shadow:var(--sombra-suave); }
.btn-azul:hover{ background:var(--azul-900); color:var(--blanco); }
.btn-sol{ background:var(--sol); color:var(--tinta); box-shadow:var(--sombra-suave); }
.btn-sol:hover{ background:#ffd05c; color:var(--tinta); }
.btn-borde{ border-color:var(--blanco); color:var(--blanco); background:transparent; }
.btn-borde:hover{ background:rgba(255,255,255,.12); color:var(--blanco); }
.btn-borde-azul{ border-color:var(--azul); color:var(--azul); background:transparent; }
.btn-borde-azul:hover{ background:var(--azul-100); color:var(--azul-900); }

/* --- cabecera ------------------------------------------------- */
.cab{
  position:sticky; top:0; z-index:60;
  background:rgba(250,247,240,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}
.cab-in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; }
.logo{ text-decoration:none; line-height:1; }
.logo strong{
  font-family:var(--display); font-weight:800; font-size:1.7rem; color:var(--azul); display:block;
}
.logo span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-suave); font-weight:700; }
.nav ul{ list-style:none; display:flex; gap:1.6rem; align-items:center; }
.nav a{ text-decoration:none; font-weight:700; color:var(--tinta); }
.nav a:hover{ color:var(--azul); }
.cab-cta{ display:inline-flex; }
.burger{
  display:none; background:none; border:2px solid var(--azul); border-radius:12px;
  padding:.55rem .7rem; cursor:pointer; min-width:44px; min-height:44px;
}
.burger svg{ display:block; }

@media (max-width: 860px){
  .burger{ display:block; }
  .cab-cta{ display:none; }
  .nav{
    position:fixed; inset:64px 0 auto 0; background:var(--marfil);
    border-bottom:2px solid var(--azul-100); padding:1.2rem 0 1.6rem;
    transform:translateY(-130%); transition:transform .25s ease; z-index:55;
    box-shadow:var(--sombra-suave);
  }
  .nav.abierta{ transform:translateY(0); }
  .nav ul{ flex-direction:column; gap:1.1rem; }
  .nav li{ width:100%; text-align:center; }
}

/* --- hero ------------------------------------------------------ */
.hero{ padding:clamp(2.5rem, 6vw, 5rem) 0 var(--esp); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero h1 span{ color:var(--azul); }
.hero .claim{ font-size:1.15rem; color:var(--texto-sec); margin:1.2rem 0 1.6rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.6rem; }
.sellos{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; }
.sellos li{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:999px;
  font-weight:700; font-size:.85rem; padding:.45rem .95rem; color:var(--azul-900);
}
.hero-figura{ position:relative; }
.hero-figura img{
  width:100%; border-radius:var(--radio-xl); box-shadow:var(--sombra);
  aspect-ratio:3/2; object-fit:cover;
}
.parche{
  position:absolute; left:clamp(-1rem,-3vw,-1.8rem); bottom:2rem;
  background:var(--sol); color:var(--tinta); border-radius:var(--radio);
  font-family:var(--display); font-weight:800; line-height:1.25;
  padding:1rem 1.2rem; max-width:15rem; transform:rotate(-3deg);
  box-shadow:var(--sombra); font-size:1.02rem;
}
.parche small{ display:block; font-weight:700; font-size:.8rem; }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-figura{ order:-1; }
  .parche{ left:auto; right:1rem; bottom:-1.2rem; transform:rotate(2deg); }
}

/* --- bandas de secciones --------------------------------------- */
.seccion{ padding:var(--esp) 0; }
.band-azul{ background:var(--azul); }
.band-osc{ background:var(--azul-900); }
.band-crema{ background:var(--crema); }
.band-blanco{ background:var(--blanco); }

.filosofia .grande{
  font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,3.4vw,2.5rem);
  line-height:1.25; max-width:24ch; color:var(--blanco);
}
.filosofia .comillas{ color:var(--sol); font-size:2.2rem; line-height:0; vertical-align:-0.35em; }
.filosofia .apoyo{ margin-top:1.3rem; }

/* --- servicios: bandas alternas (protagonista) ------------------ */
.servicio{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center; padding:clamp(2.4rem,5vw,4rem) 0;
  border-top:1px solid var(--linea);
}
.servicio:first-of-type{ border-top:0; }
.servicio figure{ position:relative; }
.servicio img{ width:100%; border-radius:var(--radio); box-shadow:var(--sombra); object-fit:cover; }
.servicio .etiqueta{
  position:absolute; top:1rem; left:1rem; background:var(--sol); color:var(--tinta);
  font-family:var(--display); font-weight:800; border-radius:999px; padding:.35rem .9rem; font-size:.95rem;
}
.servicio.inv figure{ order:2; }
.servicio .texto p{ margin-top:.6rem; }
.servicio .btn{ margin-top:1.2rem; }
@media (max-width: 860px){
  .servicio{ grid-template-columns:1fr; }
  .servicio.inv figure{ order:-1; }
}

/* --- experiencia: lista numerada con foto ----------------------- */
.experiencia-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.experiencia-sticky{ position:sticky; top:96px; }
.experiencia-item{
  display:grid; grid-template-columns:200px 1fr; gap:1.4rem; align-items:center;
  padding:1.3rem 0; border-bottom:1px solid var(--linea);
}
.experiencia-item:last-child{ border-bottom:0; }
.experiencia-item img{ border-radius:var(--radio); box-shadow:var(--sombra-suave); width:100%; height:auto; }
.experiencia-item p{ font-size:.98rem; margin-top:.35rem; }
@media (max-width: 860px){
  .experiencia-grid{ grid-template-columns:1fr; }
  .experiencia-sticky{ position:static; }
  .experiencia-item{ grid-template-columns:1fr; }
}

/* --- cita / testimonio ------------------------------------------ */
.cita-wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
.cita{ font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.35; color:var(--blanco); }
.cita-wrap img{ width:100%; border-radius:var(--radio); box-shadow:0 0 0 6px var(--sol); object-fit:cover; }
.cita-firma{ margin-top:1.1rem; font-weight:700; color:var(--sol); }
@media (max-width: 860px){ .cita-wrap{ grid-template-columns:1fr; } }

/* --- galería scroll-snap ----------------------------------------- */
.galeria-track{
  display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.4rem 4vw 1.4rem; scrollbar-width:none;
}
.galeria-track::-webkit-scrollbar{ display:none; }
.galeria-track figure{ scroll-snap-align:start; flex:0 0 auto; margin:0; }
.galeria-track img{ border-radius:var(--radio); box-shadow:var(--sombra-suave); height:300px; width:auto; }
.galeria-track figcaption{
  font-size:.85rem; font-weight:700; color:var(--texto-sec); padding:.55rem .2rem 0;
}
@media (max-width:860px){ .galeria-track img{ height:220px; } }

/* --- banda CTA ---------------------------------------------------- */
.cta-band .contenedor{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between; }
.cta-band h2{ color:var(--blanco); }
.cta-band p{ color:#dce8fa; }
.cta-band .acciones{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* --- contacto ------------------------------------------------------ */
.contacto-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.dato{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 0; border-bottom:1px solid var(--linea); }
.dato:last-of-type{ border-bottom:0; }
.dato svg{ flex:0 0 auto; margin-top:.2rem; }
.dato strong{ display:block; font-family:var(--display); color:var(--azul-900); font-size:1.05rem; }
.dato a{ text-decoration:none; font-weight:700; }
.dato a:hover{ text-decoration:underline; }
.dato .nota{ font-size:.9rem; color:var(--texto-sec); }
.mapa-link{ margin-top:1.2rem; display:inline-flex; }
.foto-local{ border-radius:var(--radio); box-shadow:var(--sombra-suave); margin-top:1.4rem; width:100%; object-fit:cover; }

.form-card{
  background:var(--blanco); border-radius:var(--radio-xl); box-shadow:var(--sombra);
  padding:clamp(1.5rem,4vw,2.5rem); border:1px solid var(--linea);
}
.form-card h3{ margin-bottom:.3rem; }
.form-card > p{ font-size:.95rem; color:var(--texto-sec); margin-bottom:1.4rem; }
.campo{ margin-bottom:1.1rem; }
.campo label{ display:block; font-weight:700; font-size:.92rem; margin-bottom:.35rem; color:var(--azul-900); }
.campo input, .campo select, .campo textarea{
  width:100%; font-family:var(--cuerpo); font-size:1rem; color:var(--tinta);
  background:var(--marfil); border:1.5px solid var(--linea); border-radius:12px;
  padding:.85rem 1rem; min-height:48px;
}
.campo textarea{ min-height:130px; resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:3px solid var(--sol); outline-offset:0; border-color:var(--azul); }
.campo .ayuda{ font-size:.8rem; color:var(--texto-sec); margin-top:.3rem; }
.doble{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px){ .doble{ grid-template-columns:1fr; } }
.form-ok{
  display:none; background:#e8f6ee; border:1.5px solid #2e8b57; color:#14532d;
  border-radius:12px; padding:1rem 1.2rem; font-weight:700; margin-top:1rem;
}
.form-ok.visible{ display:block; }

@media (max-width: 860px){ .contacto-grid{ grid-template-columns:1fr; } }

/* --- footer -------------------------------------------------------- */
footer{ background:var(--azul-900); color:#eaf1fb; padding:clamp(3rem,6vw,4.5rem) 0 6.5rem; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; }
.footer-grid h3{ color:var(--blanco); font-size:1.1rem; margin-bottom:.9rem; }
.footer-grid ul{ list-style:none; }
.footer-grid li{ margin-bottom:.55rem; }
.footer-grid a{ color:#d7e3f6; text-decoration:none; }
.footer-grid a:hover{ color:var(--sol); }
.footer-brand .logo strong{ color:var(--sol); }
.footer-brand .logo span{ color:#b9c8e2; }
.footer-brand p{ color:#c7d4ea; font-size:.95rem; margin-top:1rem; }
.footer-fina{ margin-top:2.8rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.14); font-size:.85rem; color:#b9c8e2; }
.footer-fina .meta{ margin-top:.4rem; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns:1fr; } }

/* --- barra CTA sticky móvil ---------------------------------------- */
.barra-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:var(--azul-900); border-top:2px solid var(--sol);
  padding:.6rem max(4vw, 1rem) calc(.6rem + env(safe-area-inset-bottom));
}
.barra-movil .btn{ flex:1; padding:.75rem 1rem; min-height:52px; font-size:1rem; }
@media (max-width: 860px){
  .barra-movil{ display:flex; gap:.7rem; }
  footer{ padding-bottom:7rem; }
}

/* --- animaciones de scroll ------------------------------------------ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:none; }

@supports (animation-timeline: view()){
  .parallax img{
    animation:par linear both; animation-timeline:view();
    animation-range:entry 0% cover 60%;
  }
  @keyframes par{
    from{ transform:translateY(7%) scale(1.06); }
    to{ transform:translateY(-5%) scale(1); }
  }
}
@media (prefers-reduced-motion: reduce){
  .parallax img{ animation:none !important; transform:none !important; }
}