/* ==========================================================================
   cpg-v4.css — Sistema visual del rediseño v4 (DEMO LOCAL)
   Capa de presentación cargada DESPUÉS de las hojas actuales: mismo HTML,
   mismos textos, mismos colores y tipografías de la marca.
   Lenguaje: agua, papel crema y acuarela real (texturas pintadas, no manchas
   difuminadas). Un único momento espectacular (el hero); el resto acompaña
   con calma: mucho aire, líneas finas, movimiento lento.
   ========================================================================== */
:root {
  --papel: #FBF8F2;
  --crema: #F2EDE6;
  --arena-clara: #EAE1D6;
  --acuarela-rosa: #E8BFB8;
  --acuarela-salvia: #B8C9B0;
  --linea: rgba(82, 64, 48, .12);
  --linea-suave: rgba(82, 64, 48, .07);
  --sombra-papel: 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 50px -30px rgba(36,24,18,.28), 0 2px 6px -2px rgba(36,24,18,.05);
  --sombra-papel-alta: 0 1px 0 rgba(255,255,255,.9) inset, 0 36px 70px -32px rgba(36,24,18,.34), 0 4px 12px -4px rgba(36,24,18,.07);
  --radio-papel: 22px;
  --ease-agua: cubic-bezier(.2, .7, .2, 1);
  --w-rosa: url("img/v4/acuarela-rosa.webp");
  --w-salvia: url("img/v4/acuarela-salvia.webp");
  --w-arena: url("img/v4/acuarela-arena.webp");
  --w-terracota: url("img/v4/acuarela-terracota.webp");
  --borde: url("img/lago/borde-acuarela.webp");
}
::selection { background: rgba(232,191,184,.7); color: var(--marron-oscuro); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* ---------- Fuera lo que ensuciaba: manchas difuminadas y vetas ---------- */
.blob, .botanical { display: none !important; }
.section-head h2::before, .about-text h2::before, .contact-text h2::before, .wave-seam::before { display: none !important; }
h2 { text-shadow: none; }
.section-head h2 { filter: none; transform: none; text-shadow: none; }

/* ---------- Cabecera: cristal sobre papel ---------- */
.site-header {
  background: rgba(251, 248, 242, .74);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
          backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 10px 30px -18px rgba(36,24,18,.35);
}
.site-header.scrolled { background: rgba(251, 248, 242, .92); }
.main-nav a { letter-spacing: .01em; }
.nav-cta { transition: background .3s var(--ease-agua), transform .3s var(--ease-agua), box-shadow .3s var(--ease-agua); }
.nav-cta:hover { background: var(--acento); box-shadow: 0 10px 24px -10px rgba(184,115,95,.7); }

/* ---------- Ritmo de secciones ---------- */
main > section.section { background-color: var(--beige); padding: clamp(96px, 11vw, 150px) 0; }
main > section.section-alt { background-color: var(--papel); box-shadow: none; }
main > section.section > .container { position: relative; z-index: 1; }

/* Acuarela real (pintada) detrás de cada sección: florece al llegar */
main > section.section::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(300px, 38vw, 560px); aspect-ratio: 1;
  background: center / contain no-repeat;
  mix-blend-mode: multiply; opacity: .42;
  transform: rotate(var(--w-rot, 0deg)) scale(1);
  transition: opacity 1.8s ease, transform 2.4s var(--ease-agua);
}
html.v4-js main > section.section:not(.v4-in)::before { opacity: 0; transform: rotate(var(--w-rot, 0deg)) scale(.82); }
#sobre-mi::before      { background-image: var(--w-salvia);    right: -11vw; top: 6%;    --w-rot: -12deg; opacity: .26; }   /* dentro de la sección: no asoma en la primera pantalla (CLS) */
#servicios::before     { background-image: var(--w-arena);     right: -8vw; top: -4%;    --w-rot: 18deg;  opacity: .36; }
#areas-trabajo::before { background-image: var(--w-rosa);      left: -10vw; bottom: -6%; --w-rot: 8deg; }
#como-trabajo::before  { background-image: var(--w-salvia);    right: -9vw; bottom: 4%;  --w-rot: -20deg; opacity: .32; }
#consulta::before      { background-image: var(--w-terracota); left: -12vw; top: 6%;    --w-rot: 24deg;  opacity: .30; }
#testimonios::before   { background-image: var(--w-rosa);      right: -10vw; top: 10%;   --w-rot: -6deg;  opacity: .36; }
#faq::before           { background-image: var(--w-arena);     left: -11vw; top: 20%;    --w-rot: -14deg; opacity: .34; }
#contacto::before      { background-image: var(--w-salvia);    right: -12vw; bottom: -8%; --w-rot: 12deg; opacity: .30; }

/* Costuras entre secciones: borde de acuarela deshilachado en lugar de la onda dibujada */
.wave-seam { position: relative; height: 40px; }
.wave-seam svg { opacity: 0; }
.wave-seam::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; z-index: 2;
  -webkit-mask: var(--borde) center bottom / 2400px 100% repeat-x;
          mask: var(--borde) center bottom / 2400px 100% repeat-x;
}
.wave-seam-bg-alt::after { background: var(--beige); }
.wave-seam-bg-beige::after { background: var(--papel); }
.wave-seam:has(path[fill="var(--marron-oscuro)"])::after { background: var(--marron-oscuro); }
.wave-seam:nth-of-type(even)::after { -webkit-mask-position: 37% bottom; mask-position: 37% bottom; transform: scaleX(-1); }

/* La primera sección «nace» del agua: borde de acuarela que se funde con el papel del lago */
#sobre-mi { overflow: hidden; }
@supports (overflow: clip) { #sobre-mi { overflow-x: clip; overflow-y: visible; } }
#sobre-mi::after {
  content: ''; position: absolute; left: 0; right: 0; top: -118px; height: 120px; pointer-events: none; z-index: 2;
  background: var(--beige);
  -webkit-mask: var(--borde) center bottom / 2400px 100% repeat-x;
          mask: var(--borde) center bottom / 2400px 100% repeat-x;
}
html:not(.lago-cine) #sobre-mi::after { display: none; }

/* ---------- Tipografía editorial ---------- */
.section-head { margin-bottom: clamp(48px, 6vw, 76px); }
.section-head h2, .about-text h2, .contact-text h2 {
  font-size: clamp(2.3rem, 3.8vw, 3.5rem);
  letter-spacing: -.028em; line-height: 1.06; font-weight: 500;
}
.section-lead, .about-text p, .contact-text p { line-height: 1.8; }
.section-lead { font-size: 1.08rem; max-width: 600px; margin-left: auto; margin-right: auto; }
/* Antetítulo: sin cápsula; una línea fina y la gota de la marca */
.eyebrow {
  background: none; border: 0; box-shadow: none; padding: 0; gap: 12px;
  letter-spacing: .24em; font-size: .7rem; color: #9A5A47; margin-bottom: 22px;   /* terracota algo más oscuro: contraste AA sobre crema */
}
.eyebrow::before {
  width: 28px; height: 1px; border-radius: 0; background: currentColor; opacity: .6;
}
.section-head .eyebrow { justify-content: center; }
.hero--lago .eyebrow-light { padding: 8px 16px; }        /* el del hero conserva su cápsula legible sobre la imagen */
.hero--lago .eyebrow-light::before { width: 6px; height: 6px; border-radius: 50%; opacity: 1; }

/* Firma bajo cada encabezado: los anillos de la gota del logotipo, que se dibujan al llegar */
.section-head { position: relative; }
.section-head::after {
  content: ''; display: block; width: 74px; height: 22px; margin: 28px auto 0;
  background:
    radial-gradient(closest-side, transparent 86%, rgba(184,115,95,.55) 89%, transparent 93%),
    radial-gradient(closest-side, transparent 56%, rgba(201,168,118,.55) 61%, transparent 66%),
    radial-gradient(closest-side, rgba(217,169,156,.95) 0 17%, transparent 22%);
  opacity: 0; transform: scale(.5);
  transition: opacity .9s var(--ease-agua) .2s, transform 1.4s var(--ease-agua) .2s;
}
.section-head.is-visible::after, .section-head:has(.is-visible)::after, html:not(.v4-js) .section-head::after, .v4-in .section-head::after { opacity: 1; transform: none; }

/* ---------- Botones: onda al pulsar ---------- */
.btn, .lp-btn, .nav-cta, .contact-method, .lp-header-cta { position: relative; overflow: hidden; isolation: isolate; }
.v4-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0 30%, rgba(255,255,255,0) 31%),
              radial-gradient(circle, transparent 58%, rgba(255,255,255,.45) 62%, transparent 68%);
  animation: v4ripple .9s var(--ease-agua) forwards;
}
.btn-outline .v4-ripple, .btn-outline-light .v4-ripple, .contact-method .v4-ripple {
  background: radial-gradient(circle, rgba(184,115,95,.25) 0 30%, transparent 31%),
              radial-gradient(circle, transparent 58%, rgba(184,115,95,.35) 62%, transparent 68%);
}
@keyframes v4ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(26); opacity: 0; } }
.btn-primary { transition: background .35s ease, box-shadow .35s ease, transform .35s var(--ease-agua); }
.btn-primary:hover { background: var(--acento); box-shadow: 0 16px 34px -14px rgba(184,115,95,.75); }

/* ---------- Sobre mí: el retrato real, con borde de acuarela ---------- */
.about-inner { gap: clamp(48px, 7vw, 96px); }
.about-photo { filter: none; }
.about-photo::before {                                   /* aguada pintada detrás del retrato */
  top: 34%; right: -24%; bottom: -8%; left: 26%; border-radius: 0; opacity: .55;
  background: var(--w-rosa) center / contain no-repeat; mix-blend-mode: multiply;
}
.photo-placeholder {
  border-radius: 0; box-shadow: none; background: none;
  -webkit-mask: url("img/v4/mascara-retrato.webp") center 30% / 114% 112% no-repeat;
          mask: url("img/v4/mascara-retrato.webp") center 30% / 114% 112% no-repeat;
}
.about-photo-caption { margin-top: 10px; }
.about-highlights li { border-bottom-color: var(--linea-suave); padding-left: 32px; }
.about-highlights li::before {                           /* gota de la marca como viñeta */
  width: 9px; height: 9px; top: 19px; left: 4px; background: var(--rosa);
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
}

/* Divisor con la gota del logotipo: más aire */
.divider { padding: 30px 24px 10px; }

/* ---------- Servicios: hojas de papel con su color ---------- */
.service-card {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,248,242,.96));
  border: 1px solid var(--linea); border-radius: var(--radio-papel); box-shadow: var(--sombra-papel);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .6s var(--ease-agua), box-shadow .6s var(--ease-agua), border-color .6s ease;
}
.service-card::before {                                 /* acuarela que asoma en la esquina y crece al pasar */
  content: ''; position: absolute; z-index: -1; width: 260px; height: 260px; right: -110px; top: -120px;
  background: var(--w-rosa) center / contain no-repeat; mix-blend-mode: multiply; opacity: .5;
  transition: transform 1.2s var(--ease-agua), opacity .8s ease;
}
.service-card:nth-child(2)::before { background-image: var(--w-salvia); }
.service-card:nth-child(3)::before { background-image: var(--w-arena); }
.service-card:hover, .service-card:focus-within { transform: translateY(-6px); box-shadow: var(--sombra-papel-alta); border-color: rgba(184,115,95,.22); }
.service-card:hover::before, .service-card:focus-within::before { transform: scale(1.35) rotate(-8deg); opacity: .62; }
.service-card h3 { font-weight: 500; letter-spacing: -.01em; }
.service-online-box { border-radius: 14px; }

/* ---------- Áreas de trabajo: más editorial, menos cajas ---------- */
.topics-grid { gap: 0; border-top: 1px solid var(--linea); }
.topic-card {
  background: transparent; box-shadow: none; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--linea); padding: 40px 30px 38px;
  transition: background .6s ease, transform .6s var(--ease-agua);
}
.topic-card:not(:nth-child(3n)) { border-right: 1px solid var(--linea); }
.topic-card:hover, .topic-card:focus-within { background: rgba(255,255,255,.55); transform: none; box-shadow: none; }
.topic-icon { position: relative; isolation: isolate; background: none !important; box-shadow: none !important; }
.topic-icon::before {
  content: ''; position: absolute; inset: -34%; z-index: -1;
  background: var(--w-rosa) center / contain no-repeat; mix-blend-mode: multiply;
  opacity: .55; transform: scale(.78) rotate(var(--r, 0deg));
  transition: transform 1s var(--ease-agua), opacity .8s ease;
}
.topic-card:nth-child(2) .topic-icon::before { background-image: var(--w-salvia); --r: 40deg; }
.topic-card:nth-child(3) .topic-icon::before { background-image: var(--w-arena); --r: -30deg; }
.topic-card:nth-child(4) .topic-icon::before { background-image: var(--w-terracota); --r: 70deg; }
.topic-card:nth-child(5) .topic-icon::before { background-image: var(--w-salvia); --r: -60deg; }
.topic-card:nth-child(6) .topic-icon::before { background-image: var(--w-arena); --r: 15deg; }
.topic-card:hover .topic-icon::before, .topic-card:focus-within .topic-icon::before { transform: scale(1) rotate(var(--r, 0deg)); opacity: .75; }
.topic-card h3 { font-weight: 500; }

/* ---------- Cómo trabajo ---------- */
.section-emblem-wrap { border: 0; outline: 0; box-shadow: 0 30px 60px -30px rgba(36,24,18,.4); }
.section-emblem-wrap::after { border-width: 1px; inset: -14px; }                 /* anillos del logotipo */
.section-emblem-wrap::before {
  content: ''; position: absolute; inset: -28px; border-radius: 50%; border: 1px solid rgba(201,168,118,.45);
  animation: emblemPulse 5.4s ease-in-out infinite .8s; pointer-events: none; z-index: 2;
}
.section-emblem-wrap { overflow: visible; }
.section-emblem-wrap > img, .section-emblem-wrap > video { border-radius: 50%; }
.step-number { font-family: var(--font-subtitle); font-style: italic; font-weight: 500; color: var(--acento); }
.step { transition: transform .6s var(--ease-agua); }
.step:hover { transform: translateY(-4px); }
.step-icon { background: rgba(255,255,255,.7); border: 1px solid var(--linea); box-shadow: none; }

/* ---------- Consulta ---------- */
.location-photo, .location-map-card { border-radius: var(--radio-papel); border: 1px solid var(--linea); box-shadow: var(--sombra-papel); }
.location-map-card { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,248,242,.95)); }

/* ---------- Reseñas: la voz de los pacientes, grande y tranquila ---------- */
.testimonial-card {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,248,242,.95));
  border: 1px solid var(--linea); border-radius: var(--radio-papel); box-shadow: var(--sombra-papel);
  position: relative;
}
.testimonial-card::before {                             /* comilla dibujada (sin texto) */
  content: ''; position: absolute; top: 22px; right: 26px; width: 46px; height: 36px; opacity: .22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 36'%3E%3Cpath fill='%23B8735F' d='M0 36V22C0 10 6 3 18 0l2 5C13 8 10 12 10 18h8v18zm26 0V22c0-12 6-19 18-22l2 5c-7 3-10 7-10 13h8v18z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.testimonial-card blockquote, .testimonial-card p { font-family: var(--font-subtitle); font-style: italic; font-size: 1.16rem; line-height: 1.6; color: var(--marron-oscuro); }
.carousel-btn { border: 1px solid var(--linea); background: var(--papel); box-shadow: none; transition: background .3s, transform .3s var(--ease-agua); }
.carousel-btn:hover { background: var(--marron-oscuro); transform: scale(1.06); }
.carousel-btn:hover svg { stroke: var(--beige); }

/* ---------- Preguntas frecuentes: lista fina ---------- */
.faq-list { border-top: 1px solid var(--linea); }
.faq-item {
  background: transparent; box-shadow: none; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--linea); transition: background .5s ease;
}
.faq-item[open] { background: rgba(255,255,255,.55); box-shadow: none; }
.faq-item summary { font-family: var(--font-title); font-weight: 500; transition: color .3s ease; }
.faq-item summary:hover { color: var(--acento); }

/* ---------- Contacto: el formulario es una hoja de papel ---------- */
.contact-method {
  background: rgba(255,255,255,.62); border: 1px solid var(--linea); border-radius: 16px; box-shadow: none;
  transition: transform .5s var(--ease-agua), background .5s ease, border-color .5s ease;
}
.contact-method:hover, .contact-method:focus-visible { transform: translateX(6px); background: #fff; border-color: rgba(184,115,95,.3); box-shadow: none; }
.contact-form {
  background: linear-gradient(180deg, #fff, var(--papel)); border-radius: var(--radio-papel);
  border: 1px solid var(--linea); box-shadow: var(--sombra-papel-alta); padding-top: 48px;
}
.contact-form input, .contact-form textarea, .contact-form select { transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible, .contact-form select:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.contact-form .btn-primary:hover { background: var(--acento); }

/* ---------- Pie ---------- */
.site-footer { background-image: radial-gradient(60% 80% at 15% 0%, rgba(232,191,184,.09), transparent 70%), radial-gradient(50% 70% at 85% 10%, rgba(184,201,176,.07), transparent 70%); }

/* ---------- Páginas locales (Valladolid / Salamanca): mismo sistema ---------- */
.lp-plan, .lp-review, .lp-room-card, .sl-card, .sl-service, .sl-couple-card {
  border-radius: var(--radio-papel); border: 1px solid var(--linea); box-shadow: var(--sombra-papel);
  transition: transform .6s var(--ease-agua), box-shadow .6s var(--ease-agua);
}
.lp-plan:hover, .sl-card:hover, .sl-couple-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-papel-alta); }
.lp-h2 { letter-spacing: -.028em; font-weight: 500; }
.lp-btn { transition: transform .35s var(--ease-agua), background .35s ease, box-shadow .35s ease; }
.lp-btn--primary:hover { box-shadow: 0 14px 30px -12px rgba(184,115,95,.65); }
.lp-portrait-frame, .sl-hero-frame { filter: drop-shadow(0 30px 40px rgba(36,24,18,.16)); }
.lp-kicker { letter-spacing: .22em; }
/* acuarela pintada detrás del retrato del hero de cada landing */
.lp-hero-media::after, .sl-hero-media::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: -10%; right: -16%; top: 4%; bottom: -10%;
  background: var(--w-rosa) center / contain no-repeat; mix-blend-mode: multiply; opacity: .5;
  transform: rotate(-8deg);
}
.sl-hero-media::after { background-image: var(--w-salvia); opacity: .42; transform: rotate(14deg); }
.sl-hero, .lp-hero { isolation: isolate; }
/* acuarelas pintadas en las secciones de las landings (sin tocar su contenido) */
.lp-needs, .lp-services, .lp-reviews, .lp-faq, .sl-needs, .sl-couple, .sl-online, .lp-contact { position: relative; isolation: isolate; }
.lp-needs::before, .lp-services::before, .lp-reviews::before, .lp-faq::before, .sl-needs::before, .sl-couple::before, .sl-online::before, .lp-contact::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; width: clamp(260px, 34vw, 500px); aspect-ratio: 1;
  background: center / contain no-repeat; mix-blend-mode: multiply; opacity: .32;
  transition: opacity 1.8s ease, transform 2.4s var(--ease-agua);
}
html.v4-js :is(.lp-needs, .lp-services, .lp-reviews, .lp-faq, .sl-needs, .sl-couple, .sl-online, .lp-contact):not(.v4-in)::before { opacity: 0; transform: scale(.85); }
.lp-needs::before, .sl-needs::before   { background-image: var(--w-rosa);   right: -8vw; top: 4%; }
.lp-services::before, .sl-couple::before { background-image: var(--w-salvia); left: -9vw; top: 10%; }
.lp-reviews::before                     { background-image: var(--w-arena);  right: -9vw; top: 0; }
.lp-faq::before, .sl-online::before     { background-image: var(--w-terracota); left: -10vw; bottom: 0; opacity: .26; }
.lp-contact::before                     { background-image: var(--w-salvia); right: -10vw; bottom: -4%; opacity: .26; }
.lp-needs, .lp-services, .lp-reviews, .lp-faq, .sl-needs, .sl-couple, .sl-online, .lp-contact, .lp-place, .sl-place, .lp-about, .sl-about, .sl-service { overflow-x: clip; }

/* ---------- Páginas legales: lectura cómoda sobre papel ---------- */
.legal-page .container {
  background: rgba(255,255,255,.62); border: 1px solid var(--linea); border-radius: 28px;
  padding: clamp(28px, 5vw, 64px); box-shadow: var(--sombra-papel);
}
.legal-page p, .legal-page li { line-height: 1.8; }

/* ---------- Móvil ---------- */
@media (max-width: 980px) {
  .topic-card { border-right: 0 !important; }
  .topic-card:nth-child(odd) { border-right: 1px solid var(--linea) !important; }
}
@media (max-width: 600px) {
  main > section.section::before { width: 300px; opacity: .3; }
  .topic-card { padding: 30px 8px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  main > section.section::before, .section-head::after, .topic-icon::before, .service-card::before { transition: none; }
  html.v4-js main > section.section:not(.v4-in)::before { opacity: .38; transform: rotate(var(--w-rot, 0deg)); }
  .service-card:hover, .contact-method:hover, .step:hover, .lp-plan:hover, .sl-card:hover, .sl-couple-card:hover { transform: none; }
  .section-emblem-wrap::before { animation: none; }
  .v4-ripple { display: none; }
}

/* ---------- Corrección de un desbordamiento que YA existía en producción ----------
   En móviles de 320 px la cabecera de las páginas locales medía 347 px (scroll lateral). */
@media (max-width: 340px) {
  .lp-wrap { padding: 0 12px; }
  .lp-header-right { gap: 4px; }
  .lp-brand { gap: 7px; }
  .lp-brand-mark { width: 18px; height: 22px; }
  .lp-brand-name { font-size: .76rem; }
  .lp-header-cta { padding: 0 10px; font-size: .72rem; }
  .lp-header-cta .lp-arrow { display: none; }
}