/**
 * DR. EVERT HAIR INSTITUTE — Secciones (patrones de bloques)
 * ============================================================================
 * Estilos de las secciones que se insertan desde el editor: hero, barra de
 * confianza, tarjetas, pasos, FAQ y CTA de cierre.
 *
 * Todo consume tokens.css. La regla del proyecto: quien edita cambia textos y
 * fotos; el aspecto no se toca desde el editor.
 * ============================================================================
 */

/* ==========================================================================
   0. Comportamiento común de las secciones
   ========================================================================== */

/*
 * Kadence enmarca el contenido de cada página con un colchón propio
 * (margen de hasta 5rem + relleno de 2rem) entre la franja del título y lo
 * nuestro. Nuestras páginas se componen de secciones que ya gestionan su
 * aire, así que ese marco solo estira la distancia 1 del hero. Fuera.
 * Se limita a .page: las entradas del blog (Fase 9) conservan el suyo.
 */
.page .content-area {
  margin-block: 0;
}

.page .entry-content-wrap {
  padding: 0;
}

/*
 * Las secciones a ancho completo se pintan de borde a borde, pero su contenido
 * respeta el contenedor central. Kadence ya limita el ancho del contenido, así
 * que aquí solo se fija el fondo y el aire vertical.
 */
/*
 * La clase va DOBLADA a propósito: WordPress imprime para estos grupos
 * (.has-global-padding) un relleno lateral de 0 con la misma fuerza que una
 * clase simple, y el texto quedaba pegado a los bordes en móvil y ventanas
 * estrechas (detectado por el cliente el 15-ago). Doblar la clase pesa como
 * dos y nuestra medida gana siempre, cargue quien cargue después.
 */
.dr-seccion--oscura.dr-seccion--oscura,
.dr-seccion--clara.dr-seccion--clara {
  padding-block: var(--dr-seccion-y);
  padding-inline: var(--dr-margen-lateral);
}

/* Dos secciones seguidas del mismo color: se funden en una sola y sobra el
   doble de aire en la costura. */
.dr-seccion--oscura + .dr-seccion--oscura,
.dr-seccion--clara + .dr-seccion--clara {
  padding-top: 0;
}

/*
 * WordPress centra con !important todo hijo de un grupo "constrained" que
 * sea más angosto que la columna de contenido (1200 px, centrada). Nuestros
 * bloques de lectura (párrafos con medida, listas, FAQ, formulario) tienen
 * ancho máximo por legibilidad y quedaban flotando centrados, desalineados
 * de títulos y botones (detectado por el cliente el 15-ago).
 *
 * El margen calculado los alinea con el BORDE IZQUIERDO de esa misma
 * columna: en pantallas anchas, (100% − columna) / 2 es exactamente donde
 * empieza el título; en pantallas angostas da negativo y el max() lo deja
 * en 0. Así todo arranca en la misma vertical, a cualquier tamaño.
 * El hero y el CTA de cierre sí van centrados por diseño.
 */
.is-layout-constrained > .dr-medida,
.is-layout-constrained > .dr-lista,
.is-layout-constrained > .dr-faq,
.is-layout-constrained > .fluentform {
  margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 100%)) / 2)) !important;
  margin-right: 0 !important;
}

/*
 * Matiz del 16-ago (pedido del cliente): en las secciones de PROSA PURA —
 * sin encabezado propio, como la biografía de /equipo — el texto alineado
 * al borde de la columna quedaba "descolgado" del hero centrado. Ahí la
 * columna de lectura se centra. El :not(:has(…)) pesa más que la regla de
 * arriba, así que en secciones CON título el texto sigue alineado a él.
 * (En navegadores muy antiguos sin :has, queda a la izquierda: aceptable.)
 */
.is-layout-constrained:not(:has(> .wp-block-heading)) > .dr-medida,
.is-layout-constrained:not(:has(> .wp-block-heading)) > .dr-lista {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */

/*
 * Ajuste del 15-ago (pedido del cliente, con esquema):
 *   Distancia 1 (franja de título → antetítulo): la mitad de la original.
 *   Distancia 2 (antetítulo → título): IGUAL a la distancia 1.
 *
 * Antes el hero medía 78vh con el texto centrado, así que la distancia 1
 * dependía de la pantalla (relleno + sobrante del centrado ≈ 130 px). Ahora
 * el contenido va arriba con una sola medida fija — --dr-esp-2xl — usada en
 * las dos distancias: quedan idénticas en cualquier pantalla. El hero es
 * flex, y en flex los márgenes no se funden: la cuenta es exacta.
 */
.dr-hero {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-block: var(--dr-hero-distancia) var(--dr-esp-3xl);
}

/* Contiene el texto para que no se estire a lo ancho de la pantalla. */
.dr-hero > * {
  max-width: 46ch;
  margin-inline: auto;
}

.dr-hero .dr-antetitulo {
  margin-bottom: 0; /* la distancia 2 la pone entera el margen del título */
}

.dr-hero h1 {
  margin-top: var(--dr-hero-distancia); /* distancia 2 = distancia 1 */
}

.dr-hero__entradilla {
  margin-top: var(--dr-esp-md);
  font-size: var(--dr-texto-lg);
  color: var(--dr-texto);
  max-width: 52ch;
}

.dr-hero__botones {
  margin-top: var(--dr-esp-lg);
  justify-content: center;
}

/* ==========================================================================
   1.b FRANJA DE TÍTULOS — lienzo de la animación de implante
   ==========================================================================
   El lienzo lo crea assets/js/franja-titulos.js y se elimina al terminar.
   Va entre el fondo de la franja y el título, sin capturar clics.
   ========================================================================== */

.entry-hero .entry-hero-container-inner {
  position: relative;
}

.dr-franja-lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  transition: opacity var(--dr-transicion-lenta);
}

.dr-franja-lienzo.es-final {
  opacity: 0;
}

/* El título de la franja siempre por encima del lienzo. */
.entry-hero .entry-header {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   2. BARRA DE CONFIANZA
   ========================================================================== */

/* Clase doblada por la misma razón que arriba: debe pesar igual que la
   regla general de secciones para conservar su relleno compacto propio. */
.dr-confianza.dr-confianza {
  /* 15-ago: más aire entre el texto y las líneas que demarcan el bloque
     (antes --dr-esp-lg). */
  padding-block: var(--dr-esp-xl);
  border-block: 1px solid var(--dr-borde);
}

.dr-confianza__item {
  margin: 0;
  font-size: var(--dr-texto-sm);
  color: var(--dr-texto);
  text-align: center;
  text-wrap: balance;
}

/* Línea vertical fina en oro entre credenciales. Solo cuando van en fila:
   apiladas en móvil, un separador vertical no significa nada. */
@media (min-width: 782px) {
  .dr-confianza__fila > .wp-block-column + .wp-block-column {
    border-left: 1px solid var(--dr-borde);
    padding-left: var(--dr-esp-md);
  }
}

/* ==========================================================================
   3. TARJETAS
   ========================================================================== */

.dr-cards {
  display: grid;
  gap: var(--dr-esp-md);
  grid-template-columns: 1fr;
  margin-top: var(--dr-esp-lg);
  align-items: stretch;
}

/*
 * 17-ago (pedido del cliente): todas las tarjetas de una misma fila miden lo
 * mismo. WordPress añade márgenes de flujo entre bloques hermanos que
 * descuadraban la retícula (la última tarjeta salía más alta que el resto);
 * dentro de una grilla la separación ya la pone el gap, así que fuera.
 */
.dr-cards > .dr-card {
  margin-block: 0;
  align-self: stretch;
  height: auto;
}

@media (min-width: 640px) {
  .dr-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .dr-cards { grid-template-columns: repeat(3, 1fr); }
}

.dr-card {
  display: flex;
  flex-direction: column;
  background-color: var(--dr-fondo-elevado);
  border: 1px solid var(--dr-borde);
  border-radius: var(--dr-radio-md);
  overflow: hidden;
  transition: border-color var(--dr-transicion), transform var(--dr-transicion);
}

.dr-card:hover {
  border-color: var(--dr-acento);
  transform: translateY(-3px);
}

.dr-card__imagen {
  margin: 0;
  aspect-ratio: 4 / 3;
  background-color: var(--dr-negro-700);
}

.dr-card__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* La foto llena el marco sin deformarse, sea cual sea su tamaño. */
  display: block;
}

.dr-card__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--dr-esp-2xs);
  padding: var(--dr-esp-md);
  flex-grow: 1; /* Empuja el enlace al fondo: todas las tarjetas lo alinean igual. */
}

.dr-card__titulo {
  font-size: var(--dr-texto-lg);
  margin: 0;
}

.dr-card__texto {
  margin: 0;
  font-size: var(--dr-texto-sm);
  color: var(--dr-texto-tenue);
  flex-grow: 1;
}

.dr-card__enlace {
  margin: var(--dr-esp-2xs) 0 0;
}

.dr-card__enlace a {
  font-size: var(--dr-texto-xs);
  font-weight: var(--dr-peso-semi);
  letter-spacing: var(--dr-tracking-boton);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dr-acento);
}

/* La flecha se dibuja desde el CSS y avanza al pasar el ratón. */
.dr-card__enlace a::after {
  content: " →";
  display: inline-block;
  transition: transform var(--dr-transicion);
}

.dr-card__enlace a:hover::after {
  transform: translateX(4px);
}

/* Tarjeta destacada: la que recoge a quien no sabe qué necesita.
   Usa el degradado de superficie, que no baja hasta el café: ahí el texto
   negro dejaría de leerse. */
.dr-card--destacada {
  background: var(--dr-degradado-superficie);
  border-color: transparent;
}

.dr-card--destacada .dr-card__titulo,
.dr-card--destacada .dr-card__texto {
  color: var(--dr-negro);
}

.dr-card--destacada .dr-card__enlace a {
  color: var(--dr-negro);
}

/* ==========================================================================
   4. PASOS NUMERADOS
   ========================================================================== */

.dr-pasos {
  display: grid;
  gap: var(--dr-esp-lg);
  grid-template-columns: 1fr;
  margin-top: var(--dr-esp-lg);

  /* Reinicia el contador en cada bloque de pasos. */
  counter-reset: dr-paso;
}

@media (min-width: 700px) {
  .dr-pasos { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .dr-pasos { grid-template-columns: repeat(4, 1fr); }
}

.dr-paso {
  counter-increment: dr-paso;
  padding-top: var(--dr-esp-md);
  border-top: 1px solid var(--dr-borde);
}

/*
 * El número lo genera el CSS a partir del contador. Si se añade o se borra un
 * paso desde el editor, los demás se renumeran solos.
 */
.dr-paso::before {
  content: counter(dr-paso, decimal-leading-zero);
  display: block;
  font-family: var(--dr-fuente-display);
  font-size: var(--dr-texto-2xl);
  line-height: 1;
  color: var(--dr-acento);
  margin-bottom: var(--dr-esp-2xs);
}

.dr-paso__titulo {
  font-size: var(--dr-texto-lg);
  margin: 0 0 var(--dr-esp-2xs);
}

.dr-paso__texto {
  margin: 0;
  font-size: var(--dr-texto-sm);
  color: var(--dr-texto-tenue);
}

/* ==========================================================================
   5. PREGUNTAS FRECUENTES
   ========================================================================== */

.dr-faq {
  max-width: var(--dr-ancho-texto);
  margin-top: var(--dr-esp-lg);
}

.dr-faq__item {
  border-bottom: 1px solid var(--dr-borde);
  padding: 0;
}

.dr-faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dr-esp-sm);
  padding: var(--dr-esp-md) 0;
  cursor: pointer;
  list-style: none; /* Fuera el triangulito por defecto del navegador. */
  font-family: var(--dr-fuente-display);
  font-size: var(--dr-texto-lg);
  color: var(--dr-texto-fuerte);
  transition: color var(--dr-transicion);
}

.dr-faq__item summary::-webkit-details-marker { display: none; }

.dr-faq__item summary:hover { color: var(--dr-acento); }

/* Signo + que gira hasta convertirse en − al abrir. Dos líneas cruzadas. */
.dr-faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.35em;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  color: var(--dr-acento);
  transition: transform var(--dr-transicion);
}

.dr-faq__item[open] summary::after {
  /* Al girar 90°, la línea vertical se superpone a la horizontal: queda un −. */
  transform: rotate(90deg);
}

.dr-faq__item[open] summary { color: var(--dr-acento); }

.dr-faq__item > p {
  margin: 0;
  padding-bottom: var(--dr-esp-md);
  color: var(--dr-texto-tenue);
  max-width: 62ch;
}

/* ==========================================================================
   5.b LISTAS DE BENEFICIOS Y CREDENCIALES
   ========================================================================== */

.dr-lista {
  list-style: none;
  padding: 0;
  margin: var(--dr-esp-md) 0 0;
  max-width: var(--dr-ancho-texto);
  display: grid;
  gap: var(--dr-esp-2xs);
}

.dr-lista li {
  position: relative;
  padding-left: var(--dr-esp-md);
  color: var(--dr-texto);
}

/* Viñeta propia en oro en lugar del punto del navegador. */
.dr-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 1px;
  background-color: var(--dr-acento);
}

/* ==========================================================================
   5.c AVISO DE BORRADOR
   ==========================================================================
   Marca los textos que redactó Claude Code y aún no ha aprobado el equipo
   médico. Se ve en la página a propósito: un comentario en el código no
   impediría publicar contenido sanitario sin validar.
   ========================================================================== */

.dr-aviso-borrador {
  --dr-fondo: #F5E9CE;
  --dr-texto: #4A3608;
  --dr-texto-fuerte: #4A3608;

  background-color: var(--dr-fondo);
  border-left: 4px solid var(--dr-aviso);
  padding-block: var(--dr-esp-md);
}

.dr-aviso-borrador h3 {
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-sm);
  font-weight: var(--dr-peso-semi);
  letter-spacing: var(--dr-tracking-boton);
  text-transform: uppercase;
  margin: 0 0 var(--dr-esp-2xs);
}

.dr-aviso-borrador p {
  margin: 0;
  font-size: var(--dr-texto-sm);
}

/* ==========================================================================
   6. CTA DE CIERRE
   ========================================================================== */

.dr-cta {
  text-align: center;
}

/*
 * 16-ago (pedido del cliente): el CTA de cierre siempre respira por arriba.
 * La fusión de secciones del mismo color (sección 0) le quitaba el relleno
 * superior cuando venía tras otra sección clara y "Da el primer paso"
 * quedaba pegado al contenido anterior. La clase doblada pesa igual que la
 * regla de fusión y, por venir después, gana.
 */
.dr-cta.dr-cta {
  padding-top: var(--dr-seccion-y);
}

.dr-cta > * {
  max-width: 48ch;
  margin-inline: auto;
}

.dr-cta__titulo {
  font-size: var(--dr-texto-2xl);
  margin: 0;
}

.dr-cta__texto {
  margin-top: var(--dr-esp-sm);
  color: var(--dr-texto-tenue);
}

.dr-cta__botones {
  margin-top: var(--dr-esp-lg);
  justify-content: center;
}

/* ==========================================================================
   7. BOTONES DE GUTENBERG
   ==========================================================================
   Los patrones usan el bloque nativo de botones. Se le da el aspecto de
   .dr-boton para que un botón insertado desde el editor sea idéntico a uno
   escrito en el código.
   ========================================================================== */

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--dr-esp-xs) var(--dr-esp-md);
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-sm);
  font-weight: var(--dr-peso-semi);
  letter-spacing: var(--dr-tracking-boton);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--dr-radio-md);
  border: 1px solid transparent;
  background-color: var(--dr-acento);
  color: var(--dr-sobre-acento);
  transition: background-color var(--dr-transicion), color var(--dr-transicion);
}

.wp-block-button__link:hover {
  background-color: var(--dr-acento-hover);
  color: var(--dr-sobre-acento);
}

/*
 * El :not(.has-text-color) está copiado de Kadence a propósito.
 *
 * Kadence pinta los botones de contorno con:
 *   .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color)
 *
 * Ese :not() cuenta como una clase más, así que su selector pesa 4 y el nuestro
 * pesaba 3: ganaba Kadence y los botones salían con su azul por defecto.
 * Igualando el selector, y como nuestro CSS carga después, ganamos nosotros.
 *
 * El :not() se mantiene también por su función original: si alguien elige un
 * color a mano desde el editor, WordPress añade .has-text-color y su elección
 * debe respetarse.
 */
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.wp-block-button.is-style-outline .wp-element-button:not(.has-text-color) {
  background-color: transparent;
  color: var(--dr-texto);
  border-color: var(--dr-acento);
  border-width: 1px;
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.wp-block-button.is-style-outline .wp-element-button:not(.has-text-color):hover {
  background-color: var(--dr-acento);
  color: var(--dr-sobre-acento);
  border-color: var(--dr-acento);
}

/*
 * Blindaje :visited (bug del 16-ago, detectado por el cliente): Kadence trae
 * una regla PARA ENLACES YA VISITADOS con un peso mayor que nuestras reglas
 * normales, y pinta el texto con su paleta resuelta a nivel de body (hueso).
 * Sobre una sección clara, hueso sobre hueso = texto invisible — y solo le
 * pasa a quien ya visitó la página de destino, por eso era intermitente.
 * Estas reglas igualan ese peso y, al cargar después, ganan.
 */
.wp-block-button.is-style-fill .wp-block-button__link:not(.has-text-color):visited,
.wp-block-button.is-style-fill .wp-element-button:not(.has-text-color):visited,
.wp-block-button .wp-block-button__link.wp-element-button:not(.has-text-color):visited {
  color: var(--dr-sobre-acento);
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):visited,
.wp-block-button.is-style-outline .wp-element-button:not(.has-text-color):visited {
  color: var(--dr-texto);
}

.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dr-esp-sm);
}

/* ==========================================================================
   8. MAPA (página de contacto)
   ==========================================================================
   El iframe de Google Maps llega con sus colores de siempre, que desentonan
   con el dark-first de la marca. En reposo se muestra en escala de grises;
   al pasar el ratón (o al tocarlo) recupera el color para orientarse.
   ========================================================================== */

.dr-mapa iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 45vw, 460px);
  border: 0;
  border-radius: var(--dr-radio-lg);
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dr-transicion);
}

.dr-mapa:hover iframe,
.dr-mapa:focus-within iframe {
  filter: none;
}

/* ==========================================================================
   9. FORMULARIO (Fluent Forms)
   ==========================================================================
   Fluent Forms trae su propia hoja de estilos (azul #1a7efb, bordes grises).
   Aquí se traduce a los tokens de marca. Los !important del botón son a
   propósito: el plugin pinta su botón con la misma especificidad y no está
   garantizado quién carga después.
   ========================================================================== */

.fluentform {
  margin-top: var(--dr-esp-lg);
  max-width: var(--dr-ancho-texto);
}

.fluentform .ff-el-input--label label {
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-sm);
  font-weight: var(--dr-peso-medio);
  color: var(--dr-texto-fuerte);
}

.fluentform .ff-el-form-control {
  width: 100%;
  background-color: var(--dr-fondo-elevado);
  color: var(--dr-texto);
  border: 1px solid var(--dr-borde);
  border-radius: var(--dr-radio-md);
  padding: var(--dr-esp-xs) var(--dr-esp-sm);
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-base);
  transition: border-color var(--dr-transicion-rapida);
}

.fluentform .ff-el-form-control:focus {
  border-color: var(--dr-acento);
  outline: none;
  box-shadow: none;
}

.fluentform .ff-el-form-control::placeholder {
  color: var(--dr-texto-tenue);
}

/* Texto de ayuda bajo los campos y aviso de habeas data. */
.fluentform .ff-el-help-message,
.fluentform .ff_t_c {
  font-size: var(--dr-texto-xs);
  color: var(--dr-texto-tenue);
}

/* Errores de validación. */
.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--dr-error);
}

.fluentform .error,
.fluentform .ff-el-is-error .error {
  color: var(--dr-error);
  font-size: var(--dr-texto-xs);
}

/* Botón de envío: idéntico al CTA primario del sitio. */
.fluentform .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-sm);
  font-weight: var(--dr-peso-semi);
  letter-spacing: var(--dr-tracking-boton);
  text-transform: uppercase;
  padding: var(--dr-esp-xs) var(--dr-esp-md);
  min-height: 48px;
  border-radius: var(--dr-radio-md);
  border: 1px solid transparent;
  cursor: pointer;
  background-color: var(--dr-acento) !important;
  color: var(--dr-sobre-acento) !important;
  transition: background-color var(--dr-transicion), color var(--dr-transicion);
}

.fluentform .ff-btn-submit:hover {
  background-color: var(--dr-acento-hover) !important;
  color: var(--dr-sobre-acento) !important;
}

/* Mensaje de confirmación tras el envío. */
.fluentform .ff-message-success,
.ff-message-success {
  background-color: var(--dr-fondo-elevado);
  color: var(--dr-texto);
  border: 1px solid var(--dr-acento);
  border-radius: var(--dr-radio-md);
  padding: var(--dr-esp-md);
  box-shadow: none;
}