/* =============================================================================
   MYBEYOGA — sistema visual "editorial sereno" (tema de bloques WordPress)
   Portado de SparkCMS: themes/mybeyoga.css. Las clases yg-* son las mismas;
   solo cambia lo que choca con el marcado de WordPress (wp-block-*, layouts).
   -----------------------------------------------------------------------------
   Contraste (medido en el original, mismos pares aquí):
     ink     #22271C sobre blanco 15.27 · crema 13.92 · arena 11.35   AA
     body    #4A5145 sobre blanco  8.22 · crema  7.49 · arena  6.11   AA
     muted   #6B7263 sobre blanco  4.99 · crema  4.54                 AA
     forest  #47601F sobre blanco  7.09 · crema  6.46 · arena  5.27   AA
     blanco sobre forest 7.09 · blanco sobre night 15.85 · salvia sobre night 10.07
   Los colores, tipografías y tamaños salen de theme.json (presets); aquí solo
   se les da el nombre corto que usa el CSS portado.
   Todos los selectores van precedidos de ":root": sube un escalón la
   especificidad para ganar a las reglas de espaciado de WordPress
   (":root :where(.is-layout-flow) > *") tanto en el portal como en el editor,
   donde el orden de carga de las hojas es distinto. Sin !important.
   ============================================================================ */

:root {
  --yg-paper:       var(--wp--preset--color--paper);
  --yg-cream:       var(--wp--preset--color--cream);
  --yg-sand:        var(--wp--preset--color--sand);
  --yg-sand-deep:   var(--wp--preset--color--sand-deep);
  --yg-night:       var(--wp--preset--color--night);
  --yg-ink:         var(--wp--preset--color--ink);
  --yg-body:        var(--wp--preset--color--body);
  --yg-muted:       var(--wp--preset--color--muted);
  --yg-sage:        var(--wp--preset--color--sage);
  --yg-sage-soft:   var(--wp--preset--color--sage-soft);
  --yg-forest:      var(--wp--preset--color--forest);
  --yg-forest-deep: var(--wp--preset--color--forest-deep);

  --yg-line:       rgba(34, 39, 28, 0.16);
  --yg-line-soft:  rgba(34, 39, 28, 0.08);
  --yg-line-light: rgba(255, 255, 255, 0.24);

  --yg-serif: var(--wp--preset--font-family--serif);
  --yg-sans:  var(--wp--preset--font-family--sans);

  --yg-fs-display: var(--wp--preset--font-size--display);
  --yg-fs-h1:      var(--wp--preset--font-size--h-1);
  --yg-fs-h2:      var(--wp--preset--font-size--h-2);
  --yg-fs-h3:      var(--wp--preset--font-size--h-3);
  --yg-fs-lead:    var(--wp--preset--font-size--lead);
  --yg-fs-body:    var(--wp--preset--font-size--body);
  --yg-fs-small:   var(--wp--preset--font-size--small);
  --yg-fs-eyebrow: var(--wp--preset--font-size--eyebrow);

  --yg-s1: 0.5rem;  --yg-s2: 1rem;    --yg-s3: 1.5rem;  --yg-s4: 2rem;
  --yg-s5: 3rem;    --yg-s6: 4rem;    --yg-s7: 6rem;    --yg-s8: 8rem;
  --yg-section-y: clamp(4.5rem, 2.5rem + 6.5vw, 8.5rem);

  --yg-maxw:      1440px;
  --yg-maxw-wide: 1600px;
  --yg-maxw-text: 34rem;
  --yg-gutter:    clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);

  --yg-radius:   2px;
  --yg-radius-m: 4px;
  --yg-arch:     50% 50% 0 0 / 30% 30% 0 0;
  --yg-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --yg-t:        0.55s var(--yg-ease);
}

/* Preferencia "tipografía de lectura" del panel de accesibilidad: cambia la
   serif de titulares por la sans del cuerpo. Se redefine el preset de WP, así
   que alcanza a todo lo que lo usa (elementos de theme.json y clases yg-*). */
html[data-a11y-font="1"] {
  --wp--preset--font-family--serif: var(--wp--preset--font-family--sans);
}

/* =============================================================================
   1. BASE
   ========================================================================== */

:root body{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cabecera, contenido y pie van pegados: sin el hueco de blockGap de WP. */
:root body .wp-site-blocks > *{ margin-block: 0; }

/* Las secciones del sitio van a sangre y seguidas, sin hueco entre ellas. */
:root .wp-block-post-content > .alignfull,
:root .is-root-container > .alignfull{ margin-block: 0; }

/* Página sin secciones de diseño (contenido suelto): aire arriba y abajo. */
:root .yg-main .wp-block-post-content:not(:has(> .alignfull:first-child)){ padding-block: var(--yg-section-y); }

/* Dentro de una sección de la familia yg-* los márgenes los decide cada
   componente, como en el original (que partía de un reset). Esta regla pesa
   (0,1,0): gana al espaciado automático de WordPress y pierde contra
   cualquier clase de componente declarada más abajo. */
:root :is(.yg-section, .yg-hero, .yg-phero, .yg-cta, .yg-formsec, .yg-footer, .yg-header, .yg-mmenu) *{ margin-block: 0; }

/* Foco visible en todo el sitio. */
:root a:focus-visible,
:root button:focus-visible,
:root input:focus-visible,
:root textarea:focus-visible,
:root select:focus-visible,
:root [tabindex]:focus-visible{
  outline: 2px solid var(--yg-forest);
  outline-offset: 3px;
  border-radius: var(--yg-radius);
}
:root .yg-on-dark a:focus-visible,
:root .yg-on-dark button:focus-visible,
:root .yg-footer a:focus-visible{ outline-color: var(--yg-sage); }

::selection { background: var(--yg-sage); color: var(--yg-ink); }

:root a{ text-underline-offset: 4px; }

/* =============================================================================
   2. PRIMITIVAS
   ========================================================================== */

:root .yg-section{
  position: relative;
  padding-block: var(--yg-section-y);
  background-color: var(--yg-paper);
  color: var(--yg-body);
  font-family: var(--yg-sans);
}
:root .yg-section--cream{ background-color: var(--yg-cream); }
:root .yg-section--sand{ background-color: var(--yg-sand); }
:root .yg-section--flush{ padding-block: 0; }

:root .yg-wrap{
  box-sizing: border-box;
  width: 100%;
  max-width: var(--yg-maxw);
  margin-inline: auto;
  padding-inline: var(--yg-gutter);
}
:root .yg-wrap--wide{ max-width: var(--yg-maxw-wide); }

:root .yg-eyebrow{
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 var(--yg-s3);
  font-family: var(--yg-sans);
  font-size: var(--yg-fs-eyebrow);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--yg-forest);
}
:root .yg-eyebrow::before{
  content: "";
  width: 2.25rem;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: 0.6;
}
:root .yg-eyebrow--center{ justify-content: center; }
:root .yg-on-dark .yg-eyebrow{ color: var(--yg-sage); }

:root .yg-title{
  margin: 0;
  font-family: var(--yg-serif);
  font-size: var(--yg-fs-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--yg-ink);
  text-wrap: balance;
}
:root .yg-title em{ font-style: italic; color: var(--yg-forest); }
:root .yg-on-dark .yg-title{ color: var(--yg-cream); }
:root .yg-on-dark .yg-title em{ color: var(--yg-sage); }

:root .yg-lead{
  margin: var(--yg-s3) 0 0;
  max-width: 44rem;
  font-size: var(--yg-fs-lead);
  line-height: 1.6;
  color: var(--yg-body);
}
:root .yg-on-dark .yg-lead{ color: rgba(247, 244, 239, 0.86); }
:root .yg-lead + .yg-lead{ margin-top: var(--yg-s2); }

:root .yg-text{
  margin: var(--yg-s3) 0 0;
  max-width: var(--yg-maxw-text);
  color: var(--yg-body);
}
:root .yg-text p + p{ margin-top: var(--yg-s2); }

/* --- Botones: core/button con sus tres estilos ---------------------------
   Por defecto (sólido bosque), "Contorno" (is-style-ghost) y "Sobre foto"
   (is-style-light). El aspecto base viene de theme.json (elements.button);
   aquí va lo que theme.json no sabe expresar: altura mínima, flecha y
   el pequeño despegue al pasar el ratón. */
:root .wp-block-button .wp-block-button__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  text-decoration: none;
  transition: background-color var(--yg-t), border-color var(--yg-t), color var(--yg-t), transform var(--yg-t);
}
:root .wp-block-button .wp-block-button__link:hover{ transform: translateY(-2px); }

:root .wp-block-button.is-style-ghost .wp-block-button__link,
:root .wp-block-button.is-style-light .wp-block-button__link{ background: transparent; }
:root .wp-block-button.is-style-ghost .wp-block-button__link{ color: var(--yg-forest); border-color: var(--yg-forest); }
:root .wp-block-button.is-style-ghost .wp-block-button__link:hover{ background: var(--yg-forest); color: #FFFFFF; }
:root .wp-block-button.is-style-light .wp-block-button__link{ color: var(--yg-cream); border-color: rgba(247, 244, 239, 0.55); }
:root .wp-block-button.is-style-light .wp-block-button__link:hover{ background: var(--yg-sage); border-color: var(--yg-sage); color: var(--yg-ink); }

/* La flecha es decoración: va por CSS, no la puede borrar nadie al editar. */
:root .wp-block-button:is(.is-style-ghost, .is-style-light) .wp-block-button__link::after{
  content: "\2192";
  content: "\2192" / "";
  transition: transform var(--yg-t);
}
:root .wp-block-button:is(.is-style-ghost, .is-style-light) .wp-block-button__link:hover::after{ transform: translateX(4px); }

:root .wp-block-buttons{ gap: var(--yg-s2); }

/* --- Figura con arco (motivo gráfico de la marca) --- */
:root .yg-arch{
  position: relative;
  overflow: hidden;
  border-radius: var(--yg-arch);
  background: var(--yg-sand);
}
:root .yg-arch img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--yg-ease);
}

/* Imágenes de diseño: el figure de core/image hace de marco, la foto lo llena. */
:root .wp-block-image:is(.yg-phero__figure, .yg-split__figure, .yg-card__figure, .yg-bio__figure) img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================================================================
   3. PORTADA — patrón "Portada" (section.yg-hero > cover + franja)
   ========================================================================== */

:root .yg-hero{ position: relative; background: var(--yg-night); }

:root .wp-block-cover.yg-hero__media{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 78svh;
  padding: 0;
  overflow: hidden;
}
@media (min-width: 768px) { :root .wp-block-cover.yg-hero__media{ min-height: 88svh; max-height: 860px; } }

:root .yg-hero__media > .wp-block-cover__image-background{
  inset: -6% 0;
  height: 112%;
}
/* Dos velos superpuestos, idénticos al original (AA medido sobre la foto
   real). Se fijan aquí y no en el panel del bloque para que la legibilidad
   no dependa de lo que se toque en el editor. */
:root .yg-hero__media > .wp-block-cover__background{
  opacity: 1 !important;
  background:
    linear-gradient(to right, rgba(24, 28, 19, 0.88) 0%, rgba(24, 28, 19, 0.72) 42%, rgba(24, 28, 19, 0.24) 76%, rgba(24, 28, 19, 0.06) 100%),
    linear-gradient(to top, rgba(24, 28, 19, 0.82) 0%, rgba(24, 28, 19, 0.42) 46%, rgba(24, 28, 19, 0.12) 74%, rgba(24, 28, 19, 0.34) 100%) !important;
}
:root .wp-block-cover.has-custom-content-position.yg-hero__media > .wp-block-cover__inner-container{
  width: 100%;
  margin: 0;
  color: inherit;
}
:root .yg-hero__inner{
  position: relative;
  width: 100%;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
:root .yg-hero__title{
  margin: 0;
  max-width: 16ch;
  font-family: var(--yg-serif);
  font-size: var(--yg-fs-display);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--yg-cream);
}
:root .wp-block-quote.yg-hero__quote{
  margin: var(--yg-s4) 0 0;
  max-width: 40rem;
  font-family: var(--yg-serif);
  font-style: italic;
  font-size: var(--yg-fs-lead);
  line-height: 1.5;
  color: rgba(247, 244, 239, 0.92);
}
:root .yg-hero__quote cite{
  display: block;
  margin-top: var(--yg-s2);
  font-family: var(--yg-sans);
  font-style: normal;
  font-size: var(--yg-fs-eyebrow);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yg-sage);
}
:root .yg-hero__quote cite{ line-height: 1.5; }
:root .yg-hero__cta{ margin-top: var(--yg-s5); }

:root .yg-hero__lede{
  background: var(--yg-cream);
  border-bottom: 1px solid var(--yg-line-soft);
}
:root .yg-hero__lede p{
  margin: 0;
  padding-block: clamp(2.5rem, 4vw, 4.5rem);
  max-width: 40ch;
  font-family: var(--yg-serif);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-style: italic;
  line-height: 1.28;
  color: var(--yg-ink);
}

/* =============================================================================
   4. CABECERA DE PÁGINA INTERIOR
   ========================================================================== */

:root .yg-phero{
  position: relative;
  background: var(--yg-cream);
  border-bottom: 1px solid var(--yg-line-soft);
  overflow: hidden;
}
:root .yg-phero__grid{
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(3.5rem, 3rem + 5vw, 7rem) clamp(2.5rem, 2rem + 4vw, 5rem);
}
@media (min-width: 900px) {
  :root .yg-phero__grid{ grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
/* Sin foto, el texto ocupa todo el ancho. Con :has() no hace falta que la
   clienta añada ninguna clase al borrar la imagen. */
:root .yg-phero--solo .yg-phero__grid,
:root .yg-phero__grid:not(:has(> .yg-phero__figure)){ grid-template-columns: 1fr; }
:root .yg-phero--solo .yg-phero__body,
:root .yg-phero__grid:not(:has(> .yg-phero__figure)) .yg-phero__body{ max-width: 52rem; }
:root .yg-phero__title{
  margin: 0;
  font-family: var(--yg-serif);
  font-size: var(--yg-fs-h1);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--yg-ink);
  text-wrap: balance;
}
:root .yg-phero__intro{
  margin: var(--yg-s4) 0 0;
  max-width: 44rem;
  font-size: var(--yg-fs-lead);
  line-height: 1.6;
  color: var(--yg-body);
}
:root .yg-phero__figure{
  height: clamp(200px, 26vw, 320px);
  margin: 0;
  border-radius: var(--yg-arch);
  overflow: hidden;
  background: var(--yg-sand);
}
/* Horarios: la foto de clase es muy vertical (retrato); centra el recorte
   mas abajo del techo para que se vea la accion, no el falso techo. */
:root .yg-phero__figure img[src*="inicio-servicios-01"]{ object-position: 50% 62%; }
@media (min-width: 900px) {
  :root .yg-phero__figure{
    height: clamp(260px, 30vw, 420px);
    align-self: end;
  }
}

/* =============================================================================
   5. FOTO + TEXTO
   ========================================================================== */

:root .yg-split__grid{
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  :root .yg-split__grid{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  :root .yg-split--right .yg-split__figure{ order: 2; }
}
:root .yg-split__figure{
  height: clamp(340px, 46vw, 560px);
  margin: 0;
  border-radius: var(--yg-arch);
  overflow: hidden;
  background: var(--yg-sand);
}
:root .yg-split__figure img{ transition: transform 1.2s var(--yg-ease); }
:root .yg-split__figure:hover img{ transform: scale(1.04); }
:root .yg-split__body{ max-width: 34rem; }
:root .yg-split__cta{ margin-top: var(--yg-s4); }

/* =============================================================================
   6. TARJETAS DE PRÁCTICA
   El número (01, 02…) lo pone CSS con un contador: al duplicar o reordenar
   tarjetas en el editor se renumeran solas, como hacía el PHP original.
   ========================================================================== */

:root .yg-cards__head{
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(2.5rem, 4vw, 4.5rem);
}
@media (min-width: 900px) {
  :root .yg-cards__head{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
:root .yg-cards__grid{
  display: grid;
  gap: clamp(2rem, 3vw, 2.75rem);
  counter-reset: yg-card;
}
@media (min-width: 640px) { :root .yg-cards__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { :root .yg-cards__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

:root .yg-card{ display: flex; flex-direction: column; counter-increment: yg-card; }
:root .yg-card > *{ order: 2; }
:root .yg-card > .yg-card__figure{ order: 0; }
:root .yg-card::before{
  content: counter(yg-card, decimal-leading-zero);
  order: 1;
  font-family: var(--yg-serif);
  font-size: var(--yg-fs-small);
  line-height: 1.75;
  letter-spacing: 0.18em;
  color: var(--yg-forest);
}
:root .yg-card__figure{
  height: clamp(280px, 32vw, 420px);
  margin: 0 0 var(--yg-s3);
  border-radius: var(--yg-arch);
  overflow: hidden;
  background: var(--yg-sand);
}
:root .yg-card .yg-card__figure{ margin-bottom: var(--yg-s3); }
:root .yg-card__figure img{ transition: transform 1.2s var(--yg-ease); }
:root .yg-card:hover .yg-card__figure img{ transform: scale(1.05); }
:root .yg-card__title{
  margin: 0.375rem 0 var(--yg-s2);
  font-family: var(--yg-serif);
  font-size: var(--yg-fs-h3);
  font-weight: 400;
  line-height: 1.16;
  color: var(--yg-ink);
}
:root .yg-card .yg-card__title{ margin: 0.375rem 0 var(--yg-s2); }
:root .yg-card__text{ margin: 0; color: var(--yg-body); }
:root .yg-cards__foot{ margin-top: clamp(2.5rem, 4vw, 4rem); }

/* =============================================================================
   7. LISTA DE VALORES / RAZONES — número en disco por contador
   ========================================================================== */

:root .yg-values__head{ max-width: 46rem; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
:root .yg-values__list{
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 2rem);
  margin: 0;
  padding: 0;
  counter-reset: yg-value;
}
@media (min-width: 640px) { :root .yg-values__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { :root .yg-values__list{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

:root .yg-value{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--yg-s2);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--yg-cream);
  border: 1px solid var(--yg-line-soft);
  border-top: 2px solid var(--yg-forest);
  counter-increment: yg-value;
  transition: background-color var(--yg-t), transform var(--yg-t);
}
:root .yg-value:hover{ background: var(--yg-sage-soft); transform: translateY(-3px); }

:root .yg-value::before{
  content: counter(yg-value, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  box-sizing: border-box;
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border-radius: 50%;
  background: var(--yg-sage-soft);
  border: 1px solid rgba(71, 96, 31, 0.18);
  font-family: var(--yg-serif);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--yg-forest);
  transition: background-color var(--yg-t);
}
:root .yg-value:hover::before{ background: var(--yg-paper); }
:root .yg-value__title{
  margin: 0;
  font-family: var(--yg-serif);
  font-size: var(--yg-fs-h3);
  font-weight: 400;
  line-height: 1.15;
  color: var(--yg-ink);
  text-wrap: balance;
}
:root .yg-value__text{ margin: 0; color: var(--yg-body); }

/* Sin texto ("Nuestros Valores") la tarjeta se compensa con aire y un filete
   salvia. Se activa sola cuando la tarjeta no lleva párrafo de texto. */
:root .yg-value--solo,
:root .yg-value:not(:has(.yg-value__text)){ justify-content: flex-start; min-height: clamp(11rem, 16vw, 14rem); }
:root .yg-value--solo .yg-value__title,
:root .yg-value:not(:has(.yg-value__text)) .yg-value__title{ margin-top: auto; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); }
:root .yg-value--solo::after,
:root .yg-value:not(:has(.yg-value__text))::after{
  content: "";
  width: 2.5rem;
  height: 2px;
  background: var(--yg-sage);
}

/* =============================================================================
   8. DECLARACIÓN / CITA
   ========================================================================== */

:root .yg-statement{ text-align: center; }
:root .yg-statement__inner{ max-width: 54rem; margin-inline: auto; }
:root .wp-block-quote.yg-statement__quote{
  margin: 0;
  font-family: var(--yg-serif);
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--yg-ink);
  text-wrap: balance;
}
:root .yg-statement__quote em{ font-style: italic; color: var(--yg-forest); }
:root .yg-statement__quote::before{
  content: "\201C";
  content: "\201C" / "";
  display: block;
  margin: 0 auto var(--yg-s3);
  font-family: var(--yg-serif);
  font-size: 5rem;
  line-height: 0.45;
  color: var(--yg-sage);
}
:root .yg-statement__body{
  margin: var(--yg-s4) auto 0;
  max-width: 40rem;
  color: var(--yg-body);
}
:root .yg-statement__author{
  display: block;
  margin-top: var(--yg-s3);
  font-size: var(--yg-fs-eyebrow);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--yg-muted);
}

/* Desde 900px la cita deja de ir centrada en una columna estrecha: el
   antetítulo y, debajo, las comillas grandes van en un tercio a la izquierda y la
   frase, el texto y la firma en los otros dos tercios, alineados a la
   izquierda. Las comillas son el ::before del propio contenedor, que así es
   una celda más de la rejilla (no hay bloque que la clienta pueda borrar).
   Por debajo de 900px sigue igual que antes: todo centrado y apilado. */
@media (min-width: 900px) {
  :root .yg-statement{ text-align: left; }
  :root .yg-statement__inner{
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-auto-rows: auto;
    column-gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
    max-width: var(--yg-maxw);
  }
  :root .yg-statement__inner > *{ grid-column: 2; }
  :root .yg-statement__inner > .yg-eyebrow{ grid-column: 1; grid-row: 1; justify-content: flex-start; margin: 0.5rem 0 0; }
  :root .yg-statement__inner::before{
    content: "\201C";
    content: "\201C" / "";
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    justify-self: start;
    margin-top: clamp(3.5rem, 2rem + 3vw, 5rem);
    font-family: var(--yg-serif);
    font-size: clamp(9rem, 6rem + 6vw, 13rem);
    line-height: 0.62;
    color: var(--yg-sage);
  }
  :root .yg-statement__quote::before{ content: none; }
  :root .yg-statement__inner > .wp-block-quote.yg-statement__quote{ grid-row: 1; }
  :root .yg-statement .yg-statement__body{ margin-inline: 0; }
}

/* =============================================================================
   9. SEMBLANZA DE LA FUNDADORA — diseñada para sostenerse SIN retrato
   ========================================================================== */

:root .yg-bio__header{ display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: var(--yg-s6); }
@media (min-width: 960px) {
  :root .yg-bio__header{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
  :root .yg-bio__header .yg-bio__facts{ margin-top: 0; }
}
:root .yg-bio__name{
  margin: 0;
  font-family: var(--yg-serif);
  font-size: var(--yg-fs-h1);
  font-weight: 400;
  line-height: 0.98;
  color: var(--yg-ink);
}
:root .yg-bio__role{
  margin: var(--yg-s2) 0 0;
  font-size: var(--yg-fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yg-muted);
}
:root .yg-bio__figure{
  margin: 0 0 var(--yg-s4);
  height: clamp(280px, 30vw, 420px);
  border-radius: var(--yg-arch);
  overflow: hidden;
  background: var(--yg-sand);
}

/* Ficha: parejas rótulo/valor (en el original era un <dl>). */
:root .yg-bio__facts{ margin: var(--yg-s5) 0 0; border-top: 1px solid var(--yg-line); }
:root .yg-bio__fact{ display: grid; gap: 0.25rem; padding-block: var(--yg-s2); border-bottom: 1px solid var(--yg-line-soft); }
:root .yg-bio__fact-label{
  font-size: var(--yg-fs-eyebrow);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yg-forest);
}
:root .yg-bio__fact-value{ margin: 0; font-family: var(--yg-serif); font-size: 1.125rem; line-height: 1.75; color: var(--yg-ink); }

/* Prosa a todo el ancho del wrap, justificada con partición silábica (html
   lang="es"). En escritorio (>=1024px) corre en dos columnas de periódico:
   una sola columna a ese ancho daría líneas de ~150 caracteres, ilegibles.
   Para volver a una columna ancha: cambiar el "2" de column-count por "1"
   (o borrar el bloque @media siguiente). */
:root .yg-bio__prose{ font-size: 1.0625rem; line-height: 1.85; color: var(--yg-body); }
:root .yg-bio__prose p{ margin: 0 0 var(--yg-s3); }
:root .yg-bio__prose > p{ text-align: justify; -webkit-hyphens: auto; hyphens: auto; text-wrap: pretty; }
@media (min-width: 1024px) {
  :root .yg-bio__prose{
    column-count: 2;
    column-gap: clamp(2.5rem, 4vw, 4rem);
    column-rule: 1px solid var(--yg-line);
  }
}

/* Entradilla: el primer párrafo entra más grande y en tinta. */
:root .yg-bio__prose > p:first-of-type{
  font-size: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
  line-height: 1.6;
  color: var(--yg-ink);
  margin-bottom: var(--yg-s4);
}
/* Capitular: la da el interruptor nativo "Letra capital" del párrafo. */
:root .yg-bio__prose > p.has-drop-cap:not(:focus)::first-letter{
  float: left;
  margin: 0.28em 0.1em 0 0;
  font-family: var(--yg-serif);
  font-size: 3.4em;
  font-weight: 400;
  font-style: normal;
  line-height: 0.62;
  text-transform: none;
  color: var(--yg-forest);
}
:root .wp-block-quote.yg-bio__pull{
  margin: var(--yg-s5) 0;
  padding-left: var(--yg-s4);
  border-left: 2px solid var(--yg-sage);
  font-family: var(--yg-serif);
  font-style: italic;
  font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem);
  line-height: 1.28;
  color: var(--yg-ink);
  break-inside: avoid-column;
}
/* Firma: ya no vive dentro de la prosa (no cuenta como columna de texto),
   va a todo el ancho del wrap cerrando la sección con su propio respiro. */
:root .yg-bio__sign{
  margin: var(--yg-s6) 0 0;
  padding-top: var(--yg-s4);
  border-top: 1px solid var(--yg-line);
  font-family: var(--yg-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  line-height: 1;
  color: var(--yg-forest);
}

/* =============================================================================
   10. PARRILLA DE HORARIOS
   ========================================================================== */

:root .yg-sched__head{ max-width: 46rem; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
:root .yg-sched__grid{ display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 860px) { :root .yg-sched__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

:root .yg-sched__group{
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--yg-paper);
  border: 1px solid var(--yg-line-soft);
  border-top: 2px solid var(--yg-forest);
}
:root .yg-sched__group .yg-sched__days{
  margin: 0 0 var(--yg-s3);
  font-family: var(--yg-serif);
  font-size: var(--yg-fs-h3);
  font-weight: 400;
  line-height: 1.15;
  color: var(--yg-ink);
}
:root .yg-sched__slots{ margin: 0; padding: 0; }
:root .yg-sched__slot{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.875rem;
  border-top: 1px solid var(--yg-line-soft);
}
:root .yg-sched__time{
  font-family: var(--yg-serif);
  font-size: 1.375rem;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--yg-ink);
}
:root .yg-sched__tag{
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--yg-sage-soft);
  color: var(--yg-forest);
  font-size: var(--yg-fs-eyebrow);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
:root .yg-sched__note{
  margin: clamp(2rem, 3vw, 3rem) 0 0;
  padding-top: var(--yg-s3);
  border-top: 1px solid var(--yg-line);
  max-width: 44rem;
  font-family: var(--yg-serif);
  font-style: italic;
  font-size: var(--yg-fs-lead);
  color: var(--yg-ink);
}
:root .yg-section .yg-sched__note{ margin-top: clamp(2rem, 3vw, 3rem); }

/* =============================================================================
   11. TARIFAS
   ========================================================================== */

:root .yg-price__head{ max-width: 46rem; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
:root .yg-price__grid{ display: grid; gap: clamp(2rem, 3vw, 3rem); }
@media (min-width: 768px) { :root .yg-price__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { :root .yg-price__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

:root .yg-price__group{
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--yg-paper);
  border: 1px solid var(--yg-line-soft);
  border-top: 2px solid var(--yg-forest);
}
:root .yg-price__group .yg-price__group-title{
  margin: 0 0 var(--yg-s2);
  padding-bottom: var(--yg-s2);
  border-bottom: 1px solid var(--yg-forest);
  font-family: var(--yg-sans);
  font-size: var(--yg-fs-eyebrow);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--yg-forest);
}
:root .yg-price__rows{ margin: 0; padding: 0; }
:root .yg-price__row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.25rem;
  padding-block: var(--yg-s3);
  border-bottom: 1px solid var(--yg-line-soft);
}
:root .yg-price__name{
  flex: 1 1 9rem;
  min-width: 0;
  font-family: var(--yg-serif);
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--yg-ink);
  hyphens: auto;
}
:root .yg-price__detail{ flex: 1 1 100%; font-size: var(--yg-fs-small); color: var(--yg-muted); }
:root .yg-price__row .yg-price__detail{ margin: 0.25rem 0 0; }
:root .yg-price__amount{
  flex: 0 1 auto;
  max-width: 100%;
  text-align: right;
  font-family: var(--yg-serif);
  font-size: 1.375rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--yg-forest);
}
:root .yg-price__note{
  max-width: 44rem;
  font-size: var(--yg-fs-small);
  color: var(--yg-muted);
}
:root .yg-section .yg-price__note{ margin-top: clamp(2rem, 3vw, 3rem); }

/* Columna del medio (Mensualidades): tarifa destacada con el verde de
   marca, texto crema/blanco para contraste AA. Sin etiqueta nueva: la
   distincion es solo de color, tal y como pidio la clienta. */
:root .yg-price__group:nth-child(2){
  background: var(--yg-forest);
  border-color: var(--yg-forest);
  border-top-color: var(--yg-sage);
}
:root .yg-price__group:nth-child(2) .yg-price__group-title{
  border-bottom-color: rgba(247, 244, 239, 0.32);
  color: var(--yg-cream);
}
:root .yg-price__group:nth-child(2) .yg-price__row{ border-bottom-color: rgba(247, 244, 239, 0.16); }
:root .yg-price__group:nth-child(2) .yg-price__name{ color: rgba(247, 244, 239, 0.92); }
:root .yg-price__group:nth-child(2) .yg-price__amount{ color: var(--yg-paper); }
@media (min-width: 1100px) {
  :root .yg-price__group:nth-child(2){ box-shadow: 0 24px 48px -28px rgba(31, 36, 25, 0.4); }
}

/* =============================================================================
   12. FRANJA CTA (core/cover con etiqueta <section>)
   ========================================================================== */

:root .wp-block-cover.yg-cta{
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--yg-night);
}
:root .yg-cta > .wp-block-cover__image-background{ object-position: center 40%; }
:root .yg-cta > .wp-block-cover__background{
  opacity: 1 !important;
  background: linear-gradient(to right, rgba(24, 28, 19, 0.92) 0%, rgba(24, 28, 19, 0.82) 48%, rgba(24, 28, 19, 0.58) 100%) !important;
}
:root .yg-cta > .wp-block-cover__inner-container{ width: 100%; margin: 0; color: inherit; }
:root .yg-cta__inner{
  position: relative;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
  max-width: 44rem;
}
:root .yg-cta .yg-cta__title{
  margin: 0;
  font-family: var(--yg-serif);
  font-size: var(--yg-fs-h1);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.016em;
  color: var(--yg-cream);
}
:root .yg-cta .yg-cta__text{ margin: var(--yg-s3) 0 0; font-size: var(--yg-fs-lead); line-height: 1.6; color: rgba(247, 244, 239, 0.88); }
:root .yg-cta .yg-cta__actions{ margin-top: var(--yg-s5); }

/* =============================================================================
   13. CONTACTO — datos + mapa
   ========================================================================== */

:root .yg-contact__grid{ display: grid; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start; }
@media (min-width: 960px) { :root .yg-contact__grid{ grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
:root .yg-section .yg-contact__list{ margin: var(--yg-s5) 0 0; padding: 0; border-top: 1px solid var(--yg-line); }
:root .yg-contact__item{ padding-block: var(--yg-s3); border-bottom: 1px solid var(--yg-line-soft); }
:root .yg-contact__item .yg-contact__label{
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--yg-fs-eyebrow);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yg-forest);
}
:root .yg-contact__value{
  font-family: var(--yg-serif);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--yg-ink);
}
:root .yg-contact__value a{
  display: inline-block;
  min-height: 2.75rem;
  color: var(--yg-ink);
  text-decoration: underline;
  text-decoration-color: var(--yg-sage);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
:root .yg-contact__value a:hover{ color: var(--yg-forest); text-decoration-color: currentColor; }
:root .yg-contact__map{
  position: relative;
  min-height: clamp(320px, 42vw, 520px);
  border: 1px solid var(--yg-line);
  background: var(--yg-sand);
  overflow: hidden;
}
:root .yg-contact__map iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
:root .yg-contact__note{ font-size: var(--yg-fs-small); color: var(--yg-muted); }
:root .yg-section .yg-contact__note{ margin-top: var(--yg-s3); }

/* =============================================================================
   13 bis. FORMULARIO DE CONTACTO — envoltorio del shortcode [mybeyoga_contacto]
   Se estiliza por elemento: el marcado lo genera el shortcode (inc/).
   ========================================================================== */

:root .yg-formsec{ padding-block: 5rem; background: var(--yg-paper); --brand-primary: var(--yg-forest); }
:root .yg-formsec__inner{
  box-sizing: border-box;
  max-width: 36rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
:root .yg-formsec__head{ margin-bottom: var(--yg-s4); text-align: center; }
:root .yg-formsec .yg-formsec__title{
  margin-bottom: 0.75rem;
  font-family: var(--yg-serif);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: -0.02em;
  color: var(--yg-ink);
}
:root .yg-formsec__intro{ color: var(--yg-body); }
/* flow-root: el margen del primer campo no se funde con el de la cabecera
   (en el original los campos eran inline-block y no colapsaban). */
:root .yg-formsec form{ display: flow-root; }
:root .yg-formsec form > * + *,
:root .yg-formsec form p + p{ margin-top: 1rem; }
:root .yg-formsec form p{ margin: 0; }
:root .yg-formsec :is(input[type="text"], input[type="tel"], input[type="email"], input:not([type]), textarea){
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--yg-line);
  border-radius: var(--yg-radius-m);
  background: var(--yg-paper);
  color: var(--yg-ink);
  font-family: var(--yg-sans);
  font-size: 1rem;
  line-height: 1.75;
}
:root .yg-formsec textarea{ min-height: 10.375rem; resize: vertical; }
:root .yg-formsec :is(input, textarea)::placeholder{ color: var(--yg-muted); opacity: 1; }
:root .yg-formsec :is(input, textarea):focus-visible{ border-color: var(--yg-forest); }
/* Casilla de privacidad: fila con la casilla a la izquierda. */
:root .yg-formsec .mby-consent{
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--yg-fs-small);
  line-height: 1.6;
  color: var(--yg-body);
}
:root .yg-formsec .mby-consent input{ accent-color: var(--yg-forest); width: 1.125rem; height: 1.125rem; flex: none; }
:root .yg-formsec :is(button, input[type="submit"]){
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--yg-forest);
  color: #FFFFFF;
  font-family: var(--yg-sans);
  font-size: var(--yg-fs-small);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--yg-t), transform var(--yg-t);
}
:root .yg-formsec :is(button, input[type="submit"]):hover{ --brand-primary: var(--yg-forest-deep); background: var(--yg-forest-deep); transform: translateY(-2px); }
/* Avisos del envío (role=status / role=alert, los pinta el shortcode). */
:root .yg-formsec :is([role="status"], [role="alert"]){
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--yg-line);
  border-left: 3px solid var(--yg-forest);
  border-radius: var(--yg-radius-m);
  background: var(--yg-sage-soft);
  color: var(--yg-ink);
  font-size: var(--yg-fs-small);
}
:root .yg-formsec [role="alert"]{ border-left-color: #9B2C1F; background: #FBEDEA; }

/* El formulario va en dos bloques (marcado de inc/contact.php): los datos
   (.mby-form__fields) y el envío (.mby-form__send: protección de datos,
   casilla y botón). Nombre y teléfono van en pareja desde 560px; desde
   900px la sección ocupa el ancho del sitio: título a la izquierda y
   entradilla a la derecha, y debajo los datos (7/12) junto al envío (5/12),
   con el mensaje estirándose hasta el pie del botón. */
:root .yg-formsec :is(.mby-form__fields, .mby-form__send){ display: grid; gap: 1rem; align-content: start; }
@media (min-width: 560px) {
  :root .yg-formsec .mby-form__fields{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  :root .yg-formsec .mby-form__fields > :nth-child(n+3){ grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  :root .yg-formsec__inner{ max-width: var(--yg-maxw); padding-inline: var(--yg-gutter); }
  :root .yg-formsec__head,
  :root .yg-formsec form{
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  :root .yg-formsec__head{
    align-items: end;
    margin-bottom: var(--yg-s5);
    padding-bottom: var(--yg-s4);
    border-bottom: 1px solid var(--yg-line);
    text-align: left;
  }
  :root .yg-formsec .yg-formsec__title{ margin-bottom: 0; }
  :root .yg-formsec form > * + *{ margin-top: 0; }
  :root .yg-formsec .mby-form__fields{ grid-template-rows: auto auto 1fr; }
  :root .yg-formsec .mby-form__fields > :last-child{ display: flex; flex-direction: column; }
  :root .yg-formsec .mby-form__fields > :last-child textarea{ flex: 1 1 auto; }
  /* La ayuda del mensaje no pasa de ~80 caracteres por línea. */
  :root .yg-formsec .mby-field__help{ max-width: 36rem; }
}

/* =============================================================================
   13 ter. SELLOS Y CERTIFICACIONES
   ========================================================================== */

:root .yg-section.yg-creds{ padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
:root .yg-creds .yg-creds__title{ justify-content: center; margin-bottom: clamp(2.25rem, 3.5vw, 3.5rem); }

:root .yg-creds .yg-creds__medals{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  margin: 0 0 clamp(2.25rem, 3.5vw, 3.5rem);
  padding: 0;
}
:root .yg-creds .yg-creds__medal{
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: clamp(7rem, 11vw, 9.5rem);
  height: clamp(7rem, 11vw, 9.5rem);
  margin: 0;
  padding: clamp(0.5rem, 1vw, 0.875rem);
  border-radius: 50%;
  background: var(--yg-paper);
  border: 1px solid var(--yg-line-soft);
  box-shadow: 0 10px 28px -20px rgba(34, 39, 28, 0.55);
  transition: transform var(--yg-t), box-shadow var(--yg-t);
}
:root .yg-creds__medal:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px -20px rgba(34, 39, 28, 0.6); }
/* Los JPG de sello llevan fondo cuadrado: se recortan en círculo. */
:root .yg-creds__medal img{ width: 100%; height: 100%; object-fit: contain; clip-path: circle(49.5% at 50% 50%); }

:root .yg-creds .yg-creds__banners{
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin: 0 auto;
  padding: 0;
  max-width: 68rem;
}
@media (min-width: 720px) { :root .yg-creds__banners{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:root .yg-creds .yg-creds__banner{
  box-sizing: border-box;
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(0.875rem, 1.6vw, 1.375rem) clamp(1rem, 2vw, 1.75rem);
  background: var(--yg-paper);
  border: 1px solid var(--yg-line-soft);
  transition: transform var(--yg-t), border-color var(--yg-t);
}
:root .yg-creds__banner:hover{ transform: translateY(-3px); border-color: rgba(71, 96, 31, 0.35); }
:root .yg-creds .yg-creds__banner img{
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: clamp(3rem, 4.6vw, 4.25rem);
  object-fit: contain;
  mix-blend-mode: multiply;
}
@media (min-width: 720px) {
  :root .yg-creds__banners > :last-child:nth-child(odd){
    grid-column: 1 / -1;
    max-width: calc(50% - 0.75rem);
    margin-inline: auto;
  }
}
:root .yg-creds__note{
  max-width: 44rem;
  text-align: center;
  font-size: var(--yg-fs-small);
  color: var(--yg-muted);
}
:root .yg-creds .yg-creds__note{ margin: clamp(2rem, 3vw, 3rem) auto 0; }

/* =============================================================================
   14. BLOQUE DE TEXTO ("Información importante", páginas legales)
   ========================================================================== */

:root .yg-section.yg-textblock{ padding-block: 4rem; }
:root .yg-textblock .yg-textblock__title{
  position: relative;
  max-width: 24ch;
  margin-bottom: var(--yg-s5);
  padding-top: var(--yg-s3);
  font-family: var(--yg-serif);
  font-weight: 400;
  font-size: var(--yg-fs-h2);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--yg-ink);
}
:root .yg-textblock__title::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2px;
  background: var(--yg-sage);
}
:root .yg-prose{ max-width: 46rem; color: var(--yg-body); font-size: 1.0625rem; line-height: 1.85; }
:root .yg-prose > p,
:root .yg-prose > .wp-block-paragraph{ margin: 0 0 1.25rem; }
:root .yg-prose strong{ color: var(--yg-ink); font-weight: 600; }
:root .yg-prose ul{ list-style: none; margin: 0; padding: 0; }
:root .yg-prose ul li{
  position: relative;
  padding: 0 0 0 1.75rem;
  margin-bottom: 0.875rem;
}
:root .yg-prose ul li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--yg-sage);
}
:root .yg-prose h3{ margin: var(--yg-s4) 0 var(--yg-s2); font-size: var(--yg-fs-h3); }
/* Textos largos por apartados (páginas legales): h2 de apartado, h3 de
   subapartado un paso por debajo, listas y tabla con aire entre bloques. */
:root .yg-textblock .yg-lead{ margin-bottom: var(--yg-s5); }
:root .yg-prose h2{ margin: var(--yg-s5) 0 var(--yg-s2); font-size: var(--yg-fs-h3); line-height: 1.16; }
:root .yg-prose > h2:first-child{ margin-top: 0; }
:root .yg-prose:has(> h2) h3{ margin: var(--yg-s4) 0 var(--yg-s1); font-size: var(--yg-fs-lead); line-height: 1.3; }
:root .yg-prose > ul{ margin: 0 0 1.25rem; }
:root .yg-prose .wp-block-table{ margin: var(--yg-s3) 0; font-size: var(--yg-fs-small); line-height: 1.6; }
/* En móvil la tabla se desplaza en horizontal (lo hace el propio bloque) en vez de estrujar las columnas. */
:root .yg-prose .wp-block-table table{ min-width: 40rem; }
:root .yg-prose .wp-block-table :is(th, td){ padding: 0.6rem 0.75rem; border: 1px solid var(--yg-line); text-align: left; vertical-align: top; }
:root .yg-prose .wp-block-table th{ color: var(--yg-ink); font-weight: 600; background: var(--yg-sand); }
:root .yg-prose .wp-block-table figcaption{ margin-top: 0.5rem; color: var(--yg-muted); font-size: var(--yg-fs-small); }
:root .yg-prose code{ font-size: 0.9em; overflow-wrap: anywhere; }

/* Textos largos por apartados (3 o más h2 en el texto: las páginas legales).
   inc/legal.php pinta delante del texto un índice (.yg-toc) con un enlace a
   cada apartado. Desde 900px el índice va en una columna a la izquierda y se
   queda fijo al bajar (sticky); el texto, a la derecha, en una columna de
   lectura de ~75 caracteres. Desde 1200px el título y la entradilla suben a
   esa columna izquierda, encima del índice, y el texto ocupa la derecha
   desde arriba. Por debajo de 900px todo se apila: título, entradilla,
   índice y texto. */
:root .yg-textblock .yg-toc{
  margin: 0 0 var(--yg-s5);
  border-top: 1px solid var(--yg-line);
  font-size: var(--yg-fs-small);
  line-height: 1.5;
}
:root .yg-textblock .yg-toc__list{ margin: 0; padding: 0; list-style: none; }
:root .yg-toc__list a{
  display: block;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--yg-line-soft);
  color: var(--yg-body);
  text-decoration: none;
  transition: color var(--yg-t), padding var(--yg-t);
}
:root .yg-toc__list a:hover{ color: var(--yg-forest); padding-left: 0.375rem; }
:root .yg-prose > h2{ scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 6.5rem); }
:root .yg-textblock > .yg-wrap:has(> .yg-prose > h2 ~ h2 ~ h2) > .yg-prose{ max-width: 40rem; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.yg-toc):not([data-a11y-motion="1"]){ scroll-behavior: smooth; }
}
@media (min-width: 900px) {
  :root .yg-textblock > .yg-wrap:has(> .yg-prose > h2 ~ h2 ~ h2){
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 40rem);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "title title" "lead lead" "toc prose";
    column-gap: clamp(3rem, 6vw, 7rem);
  }
  :root .yg-textblock > .yg-wrap > .yg-textblock__title{ grid-area: title; }
  :root .yg-textblock > .yg-wrap > .yg-lead{ grid-area: lead; }
  :root .yg-textblock > .yg-wrap > .yg-prose{ grid-area: prose; }
  :root .yg-textblock > .yg-wrap > .yg-toc{
    grid-area: toc;
    align-self: start;
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
    max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 9rem);
    overflow-y: auto;
    margin: 0;
  }
}
@media (min-width: 1200px) {
  :root .yg-textblock > .yg-wrap:has(> .yg-prose > h2 ~ h2 ~ h2){
    grid-template-areas: "title prose" "lead prose" "toc prose";
  }
}

/* "Informacion importante" + "Puntos importantes": dos tarjetas lado a
   lado en escritorio, apiladas en movil (mismo corte que la parrilla de
   horarios, 860px). */
:root .yg-info__grid{ display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 860px) { :root .yg-info__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:root .yg-info__col{ padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--yg-cream); border: 1px solid var(--yg-line-soft); }

/* =============================================================================
   15. CABECERA (template part "header")
   ========================================================================== */

:root .wp-site-blocks > header.wp-block-template-part{
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 40;
}
/* El desenfoque va en un pseudo-elemento: backdrop-filter en la propia
   cabecera la convertiría en bloque contenedor de los position:fixed y el
   menú móvil quedaría encerrado en sus 80 px de alto. */
:root .yg-header{
  position: relative;
  z-index: 0;
  border-bottom: 1px solid var(--yg-line-soft);
}
:root .yg-header::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
}
:root .yg-header__inner{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 80rem;
  height: 5rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
:root .yg-header .yg-header__logo{ margin: 0; flex: none; }
:root .yg-header__logo a{ display: block; }
/* Logos por max-height y no por height: el editor pone style="height:auto"
   en línea a las imágenes y anularía una altura fija. */
:root .yg-header__logo img{ display: block; width: auto; height: auto; max-height: 3.5rem; max-width: 280px; }
@media (min-width: 640px) { :root .yg-header__logo img{ max-height: 4rem; } }

/* Menú principal. El color va en el contenedor: WP fuerza color:inherit en
   los enlaces con especificidad (0,3,0). */
:root .yg-nav{ color: var(--yg-ink); }
:root .yg-nav .wp-block-navigation__container{ gap: 2rem; }
:root .yg-nav .wp-block-navigation-item__content{
  position: relative;
  padding-block: 0.75rem;
  font-family: var(--yg-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
:root .yg-nav .wp-block-navigation-item__content::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  width: 0;
  height: 2px;
  background: var(--yg-forest);
  transition: width 0.35s var(--yg-ease), left 0.35s;
}
:root .yg-nav .wp-block-navigation-item__content:hover,
:root .yg-nav .current-menu-item > .wp-block-navigation-item__content{ color: var(--yg-forest); }
:root .yg-nav .wp-block-navigation-item__content:hover::before,
:root .yg-nav .wp-block-navigation-item__content[aria-current="page"]::before{ left: 0; width: 100%; }

/* Botón "Escríbenos": misma píldora pero más compacta, como en el original. */
:root .yg-header__cta .wp-block-button__link{ padding: 0.5rem 1rem; line-height: 1.43; }

/* El menú se pliega por debajo de 768 px (en WP de serie sería 600 px):
   entre 600 y 767 no caben cinco enlaces, el logo y el botón. */
:root .yg-nav .wp-block-navigation__responsive-container-open{
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  color: var(--yg-ink);
}
/* Por debajo de 1360px no caben con holgura en una fila logo + seis enlaces + tema e
   idioma + "Escríbenos": el menú se recoge en la hamburguesa, que va al final,
   y la cabecera sigue en una sola línea. Medido con el sexto enlace ("Formación
   Yoga") y la cabecera a 1440px (assets/css/formacion-nav.css), 2rem entre enlaces:
   el menú completo cabe desde 1300px; el corte en 1360px deja el mismo margen
   de antes para zoom y fuentes del sistema (y los portátiles de 1366px lo ven entero). */
@media (max-width: 1359px) {
  :root .yg-nav .wp-block-navigation__responsive-container-open:not(.always-shown){ display: flex; }
  :root .yg-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){ display: none; }
  :root .yg-header__inner > .yg-nav{ order: 10; }
  :root .yg-header__inner > .yg-header__tools{ margin-inline-start: auto; }
}
@media (max-width: 767px) {
  :root .yg-header .wp-block-buttons.yg-header__cta{ display: none; }
}

/* =============================================================================
   16. MENÚ MÓVIL (template part "menu-movil", área navigation-overlay)
   ========================================================================== */

:root .yg-mmenu{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  /* Opaco: la animación de apertura del overlay de WP anula el desenfoque
     (backdrop-filter) y un 95 % de blanco sin él deja ver la portada. */
  background: var(--yg-paper);
  color: var(--yg-ink);
}
:root .yg-mmenu__top{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  padding-inline: 1.25rem;
  border-bottom: 1px solid var(--yg-line);
}
:root .yg-mmenu__top .yg-mmenu__logo{ margin: 0; }
:root .yg-mmenu__logo img{ display: block; width: auto; height: auto; max-height: 2rem; max-width: 160px; }
:root .yg-mmenu .wp-block-navigation-overlay-close{ color: var(--yg-ink); min-width: 2.75rem; min-height: 2.75rem; }

/* El overlay usa nuestro propio botón de cierre (disable-default-overlay),
   así que queda fuera de la regla del núcleo que compensa la barra de
   admin en ".wp-block-navigation__responsive-dialog" (solo se aplica a
   ":not(.disable-default-overlay)", ver wp-includes/blocks/navigation/
   style.css). Sin esto, con sesión iniciada el botón "X" queda tapado por
   la barra de administración a los anchos móviles. Mismos valores que usa
   el propio núcleo para el caso que sí cubre (46px / 32px desde 782px). */
.admin-bar .is-menu-open.disable-default-overlay .wp-block-navigation__responsive-dialog{
  margin-top: 46px;
}
@media (min-width: 782px){
  .admin-bar .is-menu-open.disable-default-overlay .wp-block-navigation__responsive-dialog{
    margin-top: 32px;
  }
}
:root .yg-mmenu > .yg-mmenu__nav{ flex: 1; padding: 2rem 1.25rem; }
:root .yg-mmenu__nav .wp-block-navigation__container{ flex-direction: column; align-items: stretch; gap: 0.25rem; width: 100%; }
:root .yg-mmenu__nav .wp-block-navigation-item{ width: 100%; }
:root .yg-mmenu__nav{ color: var(--yg-ink); }
:root .yg-mmenu__nav .wp-block-navigation-item__content{
  display: block;
  width: 100%;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--yg-line);
  font-family: var(--yg-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--yg-ink);
}
:root .yg-mmenu__nav .wp-block-navigation-item__content:hover{ color: var(--yg-forest); }
/* El menu movil vive dentro de .yg-nav, asi que heredaba el subrayado animado
   del menu de escritorio: en enlaces a todo el ancho la linea barria la
   pantalla entera. Aqui basta el cambio de color. */
:root .yg-mmenu__nav .wp-block-navigation-item__content::before{ content: none; }
:root .yg-mmenu__nav .wp-block-navigation-item__content{ transition: color 0.2s ease; }
:root .yg-mmenu__foot{ padding: 1rem 1.25rem 2rem; border-top: 1px solid var(--yg-line); }
:root .yg-mmenu__foot .wp-block-button{ width: 100%; }
:root .yg-mmenu__foot .wp-block-button__link{ width: 100%; }

/* =============================================================================
   17. PIE (template part "footer") — cuatro columnas, mismo cuerpo de letra
   ========================================================================== */

:root .yg-footer{
  background: var(--yg-night);
  color: rgba(247, 244, 239, 0.8);
  border-top: 1px solid rgba(179, 219, 123, 0.28);
}
:root .yg-footer__inner{
  box-sizing: border-box;
  max-width: 80rem;
  margin-inline: auto;
  padding: 3.5rem 1.25rem;
}
:root .yg-footer .yg-footer__grid{
  display: grid;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  :root .yg-footer .yg-footer__grid{
    grid-template-columns: 1.25fr 1fr 0.85fr 1.05fr;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}
:root .yg-footer__col{ align-self: start; }
:root .yg-footer__col > * + *{ margin-top: 0.5rem; }

/* Rótulo de columna: idéntico en las cuatro. */
:root .yg-footer .yg-footer__col > h2{
  margin-bottom: 1.5rem;
  font-family: var(--yg-sans);
  font-size: var(--yg-fs-eyebrow);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yg-sage);
}

/* Contenido: un solo tamaño y tratamiento en las cuatro columnas. */
:root .yg-footer__col :is(p, a, li, span){
  font-family: var(--yg-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(247, 244, 239, 0.82);
}
:root .yg-footer a{ text-decoration: none; }
:root .yg-footer a:hover,
:root .yg-footer .wp-block-navigation-item__content.wp-block-navigation-item__content:hover{ color: var(--yg-sage); }
:root .yg-footer__nav{ color: rgba(247, 244, 239, 0.82); }
:root .yg-footer__legal{ color: rgba(247, 244, 239, 0.65); }

/* Columna de marca: logo y lema en serif (lo único que se distingue). */
:root .yg-footer .yg-footer__logo{ margin: 0 0 1rem; }
:root .yg-footer__logo img{ display: block; width: auto; height: auto; max-height: 8rem; max-width: 300px; }
@media (min-width: 768px) { :root .yg-footer__logo img{ max-height: 6rem; max-width: 340px; } }
:root .yg-footer__col > .yg-footer__logo + *{ margin-top: 0; }
:root .yg-footer__col p.yg-footer__claim{
  max-width: 28rem;
  margin-bottom: 1.25rem;
  font-family: var(--yg-serif);
  font-size: 1.0625rem;
  color: var(--yg-cream);
}

/* Sub-rótulos del contacto ("Correo electrónico:", "Síguenos en:"). */
:root .yg-footer__col p.yg-footer__sub{
  margin-top: 1rem;
  font-size: var(--yg-fs-eyebrow);
  line-height: 1.7;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.5);
}

/* Enlaces de contacto con icono. El icono sale del propio enlace (mailto:,
   tel:, WhatsApp, Instagram), así que al editar el texto no se pierde. */
:root .yg-footer__col a[href^="mailto:"],
:root .yg-footer__col a[href^="tel:"],
:root .yg-footer__col a[href*="wa.me"],
:root .yg-footer__col a[href*="whatsapp"],
:root .yg-footer__col a[href*="instagram.com"],
:root .yg-footer__col a[href*="facebook.com"]{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
:root .yg-footer__col a[href^="mailto:"]::before,
:root .yg-footer__col a[href^="tel:"]::before,
:root .yg-footer__col a[href*="wa.me"]::before,
:root .yg-footer__col a[href*="whatsapp"]::before,
:root .yg-footer__col a[href*="instagram.com"]::before,
:root .yg-footer__col a[href*="facebook.com"]::before,
:root .yg-footer__col .yg-footer__addr::before{
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: var(--yg-icon) center / contain no-repeat;
  mask: var(--yg-icon) center / contain no-repeat;
}
:root .yg-footer__col a[href^="mailto:"]{ --yg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); }
:root .yg-footer__col a[href^="tel:"]{ --yg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
:root .yg-footer__col :is(a[href*="wa.me"], a[href*="whatsapp"]){ --yg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.571-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E"); }
:root .yg-footer__col :is(a[href*="wa.me"], a[href*="whatsapp"])::before{ background-color: #25D366; }
:root .yg-footer__col a[href*="instagram.com"]{ --yg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E"); }
:root .yg-footer__col a[href*="facebook.com"]{ --yg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); }
:root .yg-footer__col .yg-footer__addr{
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  --yg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
:root .yg-footer__col .yg-footer__addr::before{ margin-top: 0.125rem; }

/* Navegación del pie: lista vertical. */
:root .yg-footer__nav .wp-block-navigation__container{ flex-direction: column; align-items: flex-start; gap: 0.5rem; }
:root .yg-footer__nav .wp-block-navigation-item__content{ padding: 0; }

/* Franja legal y créditos, al pie del pie. */
:root .yg-footer nav.yg-footer__legal{
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 244, 239, 0.12);
}
:root .yg-footer__legal .wp-block-navigation__container{
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  width: 100%;
}
:root .yg-footer__legal{ justify-content: center; }
:root .yg-footer :is(.yg-footer__legal, .yg-footer__bottom) :is(a, p){
  font-size: 0.8125rem;
  line-height: 1.75;
  color: rgba(247, 244, 239, 0.65);
}
:root .yg-footer .yg-footer__bottom{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.5rem;
  text-align: center;
}
:root .yg-footer__bottom a{ font-weight: 600; }
@media (min-width: 768px) {
  :root .yg-footer .yg-footer__bottom{ flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
  :root .yg-footer__bottom > p:first-child{ text-align: left; }
  :root .yg-footer__bottom > p:last-child{ text-align: right; }
}

/* Área táctil de 44 px en móvil sin cambiar el aspecto. */
@media (max-width: 767px) {
  :root .yg-footer__col a{ display: flex; align-items: center; min-height: 2.75rem; }
  :root .yg-footer__legal .wp-block-navigation__container{ gap: 0 1.25rem; }
  :root .yg-footer nav.yg-footer__legal .wp-block-navigation-item__content{ display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* =============================================================================
   18. PORTADILLAS DE SISTEMA (404, índice)
   ========================================================================== */

:root .yg-index__list{ display: grid; gap: var(--yg-s5); }
:root .yg-index__item h2{ font-size: var(--yg-fs-h3); margin-bottom: var(--yg-s2); }
:root .yg-index__item h2 a{ color: var(--yg-ink); text-decoration: none; }
:root .yg-index__item h2 a:hover{ color: var(--yg-forest); }

/* =============================================================================
   19. MOVIMIENTO Y AJUSTES MÓVIL
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* En pantalla estrecha la rayita del antetítulo pasa a ir encima. */
@media (max-width: 600px) {
  :root .yg-eyebrow{ display: block; letter-spacing: 0.2em; line-height: 1.6; }
  :root .yg-eyebrow::before{ display: block; width: 2rem; margin-bottom: 0.625rem; }
  :root .yg-eyebrow--center{ text-align: center; }
  :root .yg-eyebrow--center::before{ margin-inline: auto; }
}

@media (max-width: 480px) {
  :root .yg-hero__title{ max-width: none; }
  :root .yg-hero__lede p{ max-width: none; }
}

/* ---------- Valóranos (final de /contacto/, ancla #valoranos) ----------
   Tarjeta al estilo de la insignia de reseñas de Google. El logo G y las
   estrellas son SVG en línea: la página no pide nada a Google hasta que la
   persona pulsa un botón. Colores con var(--yg-*) para el tema oscuro. */
:root .yg-reviews{ scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 5rem); }
:root .yg-reviews__grid{ display: grid; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 960px) { :root .yg-reviews__grid{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
:root .yg-reviews .yg-reviews__text{ margin-top: var(--yg-s3); max-width: var(--yg-maxw-text); font-size: var(--yg-fs-lead); line-height: 1.6; color: var(--yg-body); }
:root .yg-reviews__card{
  box-sizing: border-box;
  padding: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  border: 1px solid var(--yg-line);
  border-radius: var(--yg-radius-m);
  background: var(--yg-paper);
  box-shadow: 0 1.5rem 3rem -2rem rgba(34, 39, 28, 0.45);
  text-align: center;
}
:root .yg-reviews .yg-reviews__brand{
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--yg-ink);
}
:root .yg-reviews__brand::before{
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FBBC05' d='M43.6 20.1H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23EA4335' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%2334A853' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%234285F4' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root .yg-reviews__stars{
  width: 12.5rem;
  max-width: 100%;
  aspect-ratio: 5 / 1;
  margin: 1.25rem auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cdefs%3E%3Cpath id='s' fill='%23FBBC04' d='M12 1.5l3.1 6.9 7.4.7-5.6 5 1.7 7.3L12 17.6l-6.6 3.8 1.7-7.3-5.6-5 7.4-.7z'/%3E%3C/defs%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='96'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root .yg-reviews .yg-reviews__lead{ margin-top: 1rem; font-family: var(--yg-serif); font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.3; color: var(--yg-ink); }
:root .yg-reviews .yg-reviews__actions{ justify-content: center; gap: 0.75rem; margin-top: var(--yg-s4); }
:root .yg-reviews .yg-reviews__note{ margin-top: 1.25rem; font-size: var(--yg-fs-small); line-height: 1.6; color: var(--yg-muted); }

/* ---------- Semblanza: retrato de la fundadora y saludo (2026-09-25) ----------
   Con retrato, la cabecera pasa a foto a la izquierda y, a su derecha,
   identidad + ficha. object-position encuadra la foto actual (Belén sentada
   abajo a la izquierda); si se cambia la foto, ajustar esos dos valores. */
:root .yg-bio__header > .yg-bio__figure{ margin: 0; height: clamp(320px, 80vw, 440px); }
:root .yg-bio__figure img{ object-position: 28% 78%; }
@media (min-width: 960px) {
  :root .yg-bio__header:has(> .yg-bio__figure){ grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; row-gap: var(--yg-s4); }
  :root .yg-bio__header > .yg-bio__figure{ grid-row: 1 / span 2; height: clamp(440px, 40vw, 580px); }
}
/* "Namasté" va aparte, como saludo; la entradilla pasa al párrafo siguiente. */
:root .yg-bio__prose > p.yg-bio__greeting{
  margin: 0 0 var(--yg-s2);
  font-family: var(--yg-serif);
  font-style: italic;
  font-size: clamp(2.25rem, 1.7rem + 2vw, 3.25rem);
  line-height: 1.1;
  text-align: left;
  color: var(--yg-forest);
  break-after: avoid-column;
}
:root .yg-bio__prose > p.yg-bio__greeting + p{
  text-align: left;
  font-size: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
  line-height: 1.6;
  color: var(--yg-ink);
  margin-bottom: var(--yg-s4);
}
:root .yg-bio__brand{ font-family: var(--yg-serif); font-weight: 400; font-size: 1.4em; line-height: 1; color: var(--yg-forest); }