/* ==========================================================================
   Mis Dulces Sueños — layout.css
   Cabecera, campos de sección, rejillas y pie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La muselina: la materia con la que está cosido Lumi. Es una trama
   procedimental (feTurbulence anisotrópico, con stitchTiles), no una
   fotografía en mosaico: por construcción no puede dejar costura y pesa
   menos de 1 KB. Va en soft-light sobre gris medio, así que aclara y
   oscurece la fibra sin desplazar el color del campo.
   Sólo sobre los campos de color, nunca sobre el fondo crema general.
   -------------------------------------------------------------------------- */
.campo { position: relative; }
.campo > * { position: relative; z-index: 1; }
.campo::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7 0.42' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncG type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncB type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23t)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
  opacity: .72;
  mix-blend-mode: soft-light;
}

/* Sobre el azul tenue, casi blanco, soft-light aplana la fibra: sube aquí */
.pilares.campo::before,
.contacto.campo::before { opacity: 1; }

/* --------------------------------------------------------------------------
   Saltos desde el menú
   Al pulsar un enlace, el navegador coloca el principio de la sección justo
   bajo la cabecera. Como cada sección empieza con mucho relleno, el título
   quedaba muy abajo y asomaba una franja de la sección anterior.
   scroll-margin-top negativo "esconde" ese relleno bajo la cabecera: la
   sección empieza oculta y el título aparece a --aire-ancla de la cabecera.
   -------------------------------------------------------------------------- */
:root { --aire-ancla: 2.5rem; }
#sobre-mi,
#servicios,
#faq       { scroll-margin-top: calc(var(--aire-ancla) - var(--seccion)); }
#contacto  { scroll-margin-top: calc(var(--aire-ancla) - clamp(var(--e8), 8vw, var(--e10))); }
/* Cómo trabajamos no tiene relleno arriba (va pegada a Servicios) */
#como-trabajamos { scroll-margin-top: var(--aire-ancla); }

/* --------------------------------------------------------------------------
   Cabecera fija
   -------------------------------------------------------------------------- */
.cab {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--c-crema);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--salida), box-shadow .3s var(--salida);
}
.cab.desplazada {
  border-bottom-color: var(--c-beige);
  box-shadow: 0 1px 24px rgba(91, 70, 54, .07);
}

.cab__int {
  max-width: var(--env-max);
  margin-inline: auto;
  padding-inline: var(--env-pad);
  height: var(--cab-alto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
}

/* img/logo-marca.png es el logotipo completo —el arco de nubes sobre la
   palabra— recortado de logo-light.png y con fondo transparente. Al no
   llevar plato de color se apoya sobre cualquier fondo sin dejar costura. */
.marca { display: block; flex: none; line-height: 0; border-radius: var(--r-pq); }
.marca__img { height: 60px; width: auto; }
@media (min-width: 60em) { .marca__img { height: 72px; } }

/* --------------------------------------------------------------------------
   Navegación
   -------------------------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: clamp(var(--e5), 2.4vw, var(--e7)); }

.nav__lista { display: flex; align-items: center; gap: clamp(var(--e4), 1.9vw, var(--e6)); }

/* Escritorio: el menú queda centrado en la cabecera (rejilla de 3 columnas:
   logo | menú | hueco del mismo ancho que la columna del logo). */
@media (min-width: 62em) {
  .cab__int { display: grid; grid-template-columns: 1fr auto 1fr; }
  .marca { justify-self: start; }
  .nav { justify-self: center; }
}

.nav__lista a {
  position: relative;
  display: block;
  padding-block: var(--e2);
  font-size: var(--t-pq);
  color: var(--c-marron);
  text-decoration: none;
  transition: color .2s var(--salida);
}
.nav__lista a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--c-azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--salida);
}
.nav__lista a:hover { color: var(--c-azul-fuerte); }
.nav__lista a:hover::after,
.nav__lista a[aria-current="true"]::after { transform: scaleX(1); }
.nav__lista a[aria-current="true"] { color: var(--c-azul-fuerte); }

.hamb {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--c-marron);
  border-radius: var(--r-pq);
}
.hamb svg { width: 24px; height: 24px; margin-inline: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.hamb__cerrar { display: none; }
.hamb[aria-expanded="true"] .hamb__abrir { display: none; }
.hamb[aria-expanded="true"] .hamb__cerrar { display: block; }

@media (max-width: 61.99em) {
  .hamb { display: block; }

  .nav {
    position: fixed;
    inset: var(--cab-alto) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--e4) var(--env-pad) var(--e7);
    background: var(--c-crema);
    border-bottom: 1px solid var(--c-beige);
    box-shadow: 0 20px 40px rgba(91, 70, 54, .10);
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform .4s var(--salida), visibility .4s;
    max-height: calc(100dvh - var(--cab-alto));
    overflow-y: auto;
  }
  .nav.abierto { transform: none; visibility: visible; }

  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lista a {
    padding: var(--e4) var(--e2);
    font-size: 1.0625rem;
    border-bottom: 1px solid color-mix(in srgb, var(--c-beige) 70%, transparent);
  }
  .nav__lista a::after { display: none; }
  .nav__lista a[aria-current="true"] { font-weight: 700; }
}

/* --------------------------------------------------------------------------
   1. Inicio
   -------------------------------------------------------------------------- */
.hero {
  padding-top: calc(var(--cab-alto) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.hero__rejilla {
  display: grid;
  gap: clamp(var(--e7), 5vw, var(--e9));
  align-items: start;
}
@media (min-width: 56em) {
  .hero__rejilla { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
}

.hero__texto h1 { margin-bottom: clamp(var(--e5), 2.5vw, var(--e6)); max-width: 17ch; }
.hero__texto .plomo { margin-bottom: var(--e4); }
.hero__texto p { max-width: 54ch; color: var(--c-marron-suave); }
.hero__texto .plomo { color: var(--c-marron); }

.hero__accion {
  margin-top: clamp(var(--e6), 3vw, var(--e7));
  display: flex; flex-direction: column; align-items: center; gap: var(--e3);
  width: fit-content; /* el bloque mide lo que el botón, así la nota se centra debajo */
}
.hero__nota { font-size: var(--t-pq); color: var(--c-marron-suave); }

.hero__retrato { display: flex; flex-direction: column; gap: var(--e5); }
@media (min-width: 46em) and (max-width: 55.99em) {
  .hero__retrato { max-width: 430px; margin-inline: auto; }
}
.hero__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--r-gr);
}
.hero__retrato figcaption {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.6vw, 1.32rem);
  letter-spacing: 0;
  line-height: 1.38;
  color: var(--c-marron-suave);
  max-width: 30ch;
  margin-inline: auto;   /* el bloque, centrado bajo la foto */
  text-align: center;    /* y cada línea, centrada */
  text-wrap: balance;    /* líneas de largo parecido */
}

/* --------------------------------------------------------------------------
   2. Sobre mí  ·  campo crema
   -------------------------------------------------------------------------- */
.sobre {
  background: var(--c-crema);
  padding-block: var(--seccion);
}

.sobre__rejilla {
  display: grid;
  gap: clamp(var(--e6), 4.5vw, var(--e8));
  align-items: start;
}
@media (min-width: 56em) {
  /* foto a la izquierda, texto a la derecha */
  .sobre__rejilla { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}

.sobre__relato h2 { margin-bottom: var(--sep-titulo); }
.sobre__relato p { color: var(--c-marron-suave); max-width: 60ch; }
.sobre__relato p:first-of-type { color: var(--c-marron); font-size: var(--t-plomo); line-height: 1.52; }

.sobre__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 62% 50%;   /* Eva y Lumi, centrados en el encuadre */
  border-radius: var(--r-gr);
}
@media (max-width: 55.99em) {
  .sobre__foto img { aspect-ratio: 16 / 10; border-radius: var(--r-gr); }
}
@media (min-width: 46em) and (max-width: 55.99em) {
  .sobre__foto { max-width: 560px; margin-inline: auto; }
}
/* Escritorio: la foto ocupa exactamente la altura del texto, de forma que
   su borde de arriba y el de abajo quedan alineados con el título y con la
   última línea del texto. */
@media (min-width: 56em) {
  .sobre__rejilla { align-items: stretch; }
  .sobre__relato > :last-child { margin-bottom: 0; }
  .sobre__foto { position: relative; }
  .sobre__foto img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}

/* Lo que quiero que sientas: un recuadro suave, sin líneas, con el título
   y las cinco frases centradas en la tipografía del cuerpo. Se lee
   como unas palabras de Eva, no como una lista técnica. */
.sientas {
  margin-top: var(--sep-bloque);
  padding: clamp(var(--e6), 5vw, var(--e8)) clamp(var(--e5), 4vw, var(--e7));
  background: color-mix(in srgb, var(--c-fondo) 65%, transparent);
  border-radius: var(--r-gr);
  text-align: center;
}
.sientas__tit {
  margin: 0 auto var(--e6);
  max-width: 24ch;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  line-height: 1.2;
}
.sientas__lista { display: grid; gap: .9rem; }
.sientas__lista li {
  margin-inline: auto;
  max-width: 46ch;
  color: var(--c-marron-suave);   /* tipografía y tamaño del cuerpo, como el resto de textos */
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Cómo puedo ayudarte
   -------------------------------------------------------------------------- */
.ayuda { padding-block: var(--seccion); }
.ayuda h2 { margin-bottom: var(--sep-titulo); }
.ayuda__intro { color: var(--c-marron-suave); margin-bottom: var(--e6); }
.ayuda__cierre {
  margin-top: clamp(var(--e6), 3.5vw, var(--e7));
  max-width: 62ch;
  margin-inline: auto;  /* el bloque, centrado en la página */
  text-align: center;  /* cada línea, centrada dentro del bloque */
  color: var(--c-marron-suave);
}

@media (min-width: 46em) {
  /* Rejilla de 2 columnas: los elementos van por filas, de dos en dos,
     y cada pareja empieza a la misma altura. */
  .ayuda__lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(var(--e6), 4vw, var(--e8));
    row-gap: var(--e3);
  }
}

/* --------------------------------------------------------------------------
   Banda fotográfica
   -------------------------------------------------------------------------- */
.banda {
  width: 100%;
  height: clamp(200px, 30vw, 360px);
  overflow: hidden;
  background: var(--c-crema);
}
.banda img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
  filter: saturate(.86);
}

/* --------------------------------------------------------------------------
   3. Servicios y tarifas
   -------------------------------------------------------------------------- */
.serv { padding-block: var(--seccion); }
.serv > .env > h2 { margin-bottom: var(--sep-bloque); }

.serv__tit-planes {
  margin: clamp(var(--e8), 6vw, var(--e9)) 0 var(--e6);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

/* --------------------------------------------------------------------------
   4. Cómo trabajamos
   -------------------------------------------------------------------------- */
.proceso { padding-block: var(--seccion); }
/* Servicios y Cómo trabajamos comparten fondo: sin esto se sumaban
   los dos rellenos y quedaba un hueco enorme entre ellas. */
.serv + .proceso { padding-top: 0; }

.pilares {
  background: var(--c-azul-tenue);
  padding-block: clamp(var(--e7), 5vw, var(--e8));
  margin-block: clamp(var(--e8), 6vw, var(--e9));
}
.pilares h3 { margin-bottom: var(--e6); }

.difer__tit { margin-bottom: clamp(var(--e6), 4vw, var(--e7)); }

/* --------------------------------------------------------------------------
   5. Frase destacada  ·  campo beige
   -------------------------------------------------------------------------- */
.frase {
  background: var(--c-beige);
  padding-block: clamp(var(--e8), 9vw, var(--e10));
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. Testimonios
   -------------------------------------------------------------------------- */
.testi { padding-block: var(--seccion); }
.testi h2 { margin-bottom: var(--sep-bloque); text-align: center; }

/* --------------------------------------------------------------------------
   7. Conoce a Lumi  ·  bloque compacto
   -------------------------------------------------------------------------- */
.lumi {
  background: var(--c-crema);
  padding-block: clamp(var(--e7), 5vw, var(--e8));
}

.lumi__rejilla {
  display: grid;
  gap: clamp(var(--e5), 4vw, var(--e7));
  align-items: center;
}
@media (min-width: 46em) {
  .lumi__rejilla { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
}

.lumi__texto h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: var(--sep-titulo); }
.lumi__texto p { max-width: 48ch; color: var(--c-marron-suave); }
.lumi__firma {
  margin-top: var(--e4);
  font-family: var(--f-display);
  font-size: 1.1rem;
  letter-spacing: .02em;
  color: var(--c-marron-suave);
}

/* --------------------------------------------------------------------------
   8. Preguntas frecuentes
   -------------------------------------------------------------------------- */
.faq { padding-block: var(--seccion); }
.faq h2 { margin-bottom: var(--sep-bloque); }

/* --------------------------------------------------------------------------
   9. Contacto  ·  campo azul tenue
   -------------------------------------------------------------------------- */
.contacto {
  background: var(--c-azul-tenue);
  padding-block: clamp(var(--e8), 8vw, var(--e10));
  text-align: center;
}
.contacto h2 { margin-bottom: var(--sep-titulo); }
.contacto__txt {
  margin-inline: auto;
  margin-bottom: clamp(var(--e6), 3.5vw, var(--e7));
  max-width: 52ch;
  color: var(--c-marron-suave);
  font-size: var(--t-plomo);
  line-height: 1.55;
}
/* Las cuatro vías de contacto, todas con el mismo peso */
.vias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4);
  margin: 0; padding: 0;
  list-style: none;
  text-align: left;
}
@media (max-width: 47.99em) { .vias { grid-template-columns: minmax(0, 1fr); max-width: 26rem; margin-inline: auto; } }
@media (min-width: 62em) { .vias { margin-inline: -3rem; } }   /* algo más ancho que el texto: el email cabe en una línea */
.via {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--e3);
  align-items: center;
  align-content: center;
  height: 100%;
  padding: var(--e4);
  background: var(--c-fondo);
  border: var(--filete);
  border-radius: var(--r-md);
  color: var(--c-marron);
  text-decoration: none;
  transition: border-color .25s var(--salida), box-shadow .25s var(--salida), transform .25s var(--salida);
}
.via svg {
  box-sizing: content-box;
  width: 22px; height: 22px;
  padding: .7rem;
  border-radius: 50%;
  background: var(--c-azul-tenue);
  fill: none; stroke: var(--c-azul-fuerte);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.via__d { font-size: var(--t-pq); color: var(--c-marron); overflow-wrap: break-word; }
@media (hover: hover) {
  .via:hover { border-color: var(--c-azul); box-shadow: var(--sombra-suave); transform: translateY(-2px); }
}

.contacto__noscript {
  margin-top: var(--e5);
  font-size: var(--t-pq);
  color: var(--c-marron-suave);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Página de reserva (reserve/reserve.html): texto a la izquierda, calendario a la derecha
   -------------------------------------------------------------------------- */
.reserva {
  padding-top: calc(var(--cab-alto) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(var(--e8), 7vw, var(--e10));
}
.reserva__rejilla {
  display: grid;
  gap: clamp(var(--e7), 4vw, var(--e8));
  align-items: start;
}
@media (min-width: 62em) {
  .reserva__rejilla { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .reserva__texto { position: sticky; top: calc(var(--cab-alto) + var(--e7)); }
}
.reserva__volver {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px;
  margin-bottom: var(--e4);
  font-size: var(--t-pq);
  color: var(--c-marron-suave);
  text-decoration: none;
}
.reserva__volver svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transform: scaleX(-1);   /* la misma flecha, apuntando hacia atrás */
  transition: transform .25s var(--salida);
}
.reserva__volver:hover { color: var(--c-azul-fuerte); }
.reserva__volver:hover svg { transform: scaleX(-1) translateX(3px); }
.reserva__texto h1 { margin-bottom: clamp(var(--e5), 2.5vw, var(--e6)); max-width: 14ch; }
.reserva__texto .plomo { max-width: 46ch; color: var(--c-marron); }
.reserva__lista { margin: var(--e5) 0 0; }
.reserva__nota {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: var(--filete);
  max-width: 46ch;
  font-size: var(--t-pq);
  color: var(--c-marron-suave);
}
.reserva__calendario {
  overflow: hidden;
  background: var(--c-fondo);
  border: var(--filete);
  border-radius: var(--r-gr);
  box-shadow: var(--sombra-suave);
}
.reserva__calendario .calendly-inline-widget { min-width: 0; height: 700px; }
@media (max-width: 47.99em) { .reserva__calendario .calendly-inline-widget { height: 1000px; } }
.reserva__noscript { padding: var(--e6); color: var(--c-marron-suave); }

/* --------------------------------------------------------------------------
   10. Pie
   -------------------------------------------------------------------------- */
.pie {
  background: var(--c-marron-hondo);
  color: var(--c-crema-claro);
  padding-block: clamp(var(--e8), 7vw, var(--e9));
  text-align: center;
}
/* Logotipo en crema, pensado para el fondo oscuro del pie */
.pie__logo {
  width: clamp(150px, 18vw, 200px);
  height: auto;
  margin: 0 auto var(--e4);
}
.pie__eva {
  margin: 0 auto var(--e2);
  font-size: var(--t-pq);
  color: var(--c-crema-claro);
  max-width: none;
}
.pie__copy {
  margin: 0 auto clamp(var(--e6), 4vw, var(--e7));
  font-size: var(--t-mini);
  color: var(--c-crema-claro);
  max-width: none;
}
.pie__legal {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: var(--e3) var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid color-mix(in srgb, var(--c-crema-claro) 28%, transparent);
}
.pie__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .4rem;
  color: var(--c-crema-claro);
  font-size: var(--t-pq);
  text-decoration-color: color-mix(in srgb, var(--c-crema-claro) 45%, transparent);
}
.pie__legal a:hover { color: var(--c-crema); text-decoration-color: currentColor; }
.pie :focus-visible { outline-color: var(--c-crema); }