/*
 * GANAN — ajustes.css
 *
 * Correcciones posteriores a la entrega. El CSS del diseño (base, home, tour,
 * curso, contacto, legal) sigue intacto; lo que haga falta corregir con el
 * contenido real va aqui, con su motivo. Se carga despues de la hoja de cada
 * pagina, asi que con la misma especificidad gana por orden.
 */

/* Home · Comunidad — el carril del carrusel tenia alto FIJO de 336px.
   Con citas largas (el recorte es de 8 lineas) o con la linea de «plan»
   rellena, la tarjeta llega a ~378px y desbordaba el carril: «¿Ya nos
   visitaste?» y el boton quedaban debajo de las tarjetas. Con alto minimo el
   carril crece con la tarjeta mas alta; con contenido corto se ve igual que
   antes. Las flechas siguen centradas (top:50% del carril). */
.comunidad-right .testimonios-carousel-wrap{
  height: auto;
  min-height: 336px;
}

/* Toda la web · BOTONES A 56px DE ALTO (pedido de Diego, 01/10).
   El diseño traia alturas distintas segun la seccion: 49 (cabecera y
   Contacto), 52-54 («Deja tu reseña»), 62, 65-66, 69, 73 y 84 (los de compra
   del Curso y la reserva del Tour, que heredan letra de 32px). Aqui se
   igualan todos los botones de texto a 56px, sin tocar color, borde, letra
   ni ancho.

   - min-height y no height: si en un movil estrecho un texto largo tuviera
     que partirse en dos lineas, el boton crece en vez de cortar el texto.
     En una linea, mide 56 exactos.
   - El relleno vertical pasa a 0 y el texto se centra con flex: asi el alto
     ya no depende del tamaño de letra de cada boton.
   - !important porque estas reglas tienen que ganar a las de las seis hojas
     del diseño, que usan selectores y media queries de especificidad
     distinta segun la pagina.

   Incluye los dos enlaces de redes de la franja «Únete a nuestra comunidad»
   (.comunidad-social), que tambien funcionan como botones.

   No entran los botones de icono (flechas de los carruseles, hamburguesa,
   play de los videos, la X del modal) ni los enlaces de texto («Cerrar»,
   «← Volver al inicio»): no son botones con caja. */
:is(.btn-gold, .btn-reservar, .btn-submit, .resena-plataforma, .comunidad-social){
  box-sizing: border-box !important;
  min-height: 56px !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
  align-items: center !important;
  justify-content: center !important;
}

/* .btn-submit (Contacto) es un bloque: sin flex, el texto no se centraria en
   vertical. Es hijo de .form-actions, que es flex, asi que su ancho no cambia.
   Al resto no se le toca el display: algunos se ocultan en ciertos anchos y
   forzarlo los volveria a mostrar. */
.btn-submit{
  display: flex !important;
}

/* Tour · Reserva — el boton de reserva tenia ANCHO fijo de 323px pensado
   para «Reserva en Airbnb». Con «Reservar por WhatsApp» el texto y la flecha
   se salian de la caja dorada (386px de contenido en 323). En escritorio
   pasa a ancho minimo: con textos cortos mide lo mismo que en el diseño y con
   textos largos crece. En tableta y movil el diseño ya lo pone a 100%. */
@media (min-width: 1025px){
  .airbnb-btn{
    width: auto;
    min-width: 323px;
  }
}

/* Franja «Únete a nuestra comunidad» — los dos enlaces de redes con el mismo
   filete que «Deja tu reseña» (.btn-gold--linea): 1px dorado (#C5A357) en
   lugar del gris del diseño. Se cambia solo el color del borde que ya tenian,
   asi que el ancho del enlace no varia. */
.comunidad-social{
  border-color: var(--gold);
}

/* Curso · La Orellana — las cuatro llamadas con el MISMO ANCHO, ninguna
   tocando la seta, y los trazos a la misma distancia de cada titulo
   (pedido de Diego, 02/10).

   Ancho: 16% del lienzo para las cuatro (205px a 1280, 163px a 1024).
   Colocacion simetrica: las de la izquierda del 2% al 18% y las de la
   derecha del 82% al 98%. El 82% no es casual: el sombrero de la seta llega
   al 80,4% del ancho entre el 30% y el 48% del alto (medido fila a fila
   sobre la foto), asi que la columna derecha queda libre sea cual sea el
   texto; la izquierda termina lejos del 24,3% donde empieza el sombrero.

   Trazos: el hueco entre el final de cada trazo y su titulo lo iguala
   assets/js/orellana.js (16px en las cuatro), porque depende de lo largo
   que sea cada titulo y eso lo escribe el cliente. El JS recorta o
   prolonga solo el tramo horizontal; el punto sobre la seta no se mueve.

   Cierre («Sabor. Nutrición. Tradición.»): con columnas de 16% los textos
   de abajo son mas altos, asi que en escritorio el cierre va siempre debajo
   del lienzo (antes se montaba con «Antioxidantes» entre 981 y 1279), y
   entre 981 y 1100, donde mas bajan, con 64px extra.

   Medido en produccion con los textos actuales de 990 a 1920px: trazo a 16px
   de los cuatro titulos, minimo 16px entre texto y seta, minimo ~60px entre
   «Antioxidantes» y el cierre. Por debajo de 981 el diseño ya apila foto y
   textos y oculta los trazos. */
@media (min-width: 981px){
  .callout-premium,
  .callout-ingrediente{
    left: 2%;
    width: 16%;
  }
  .callout-mercado,
  .callout-super{
    left: 82%;
    width: 16%;
  }
  .orellana-close{
    top: 100%;
  }
  .orellana-visual{
    margin-bottom: 130px;
  }
}
@media (min-width: 981px) and (max-width: 1100px){
  .orellana-close{
    top: calc(100% + 64px);
  }
  .orellana-visual{
    margin-bottom: 194px;
  }
}

/* Curso · Sistema M20 (01-04) — que aguante textos mas largos que el diseño.
   El diseño contaba con titulos cortos («Equipos», «Protocolos») y fijaba
   dos cosas que se rompen con textos reales:
   - .sistema-titlebox tenia ALTO fijo de 586px: con descripciones de 3
     lineas las columnas bajaban por encima de los avatares (hasta 8px
     montadas). Ahora es alto minimo: con textos cortos se ve igual, con
     largos el bloque crece y empuja lo de abajo.
   - los titulos (h4) iban en «nowrap»: «¿Qué debo controlar?» no cabia y se
     metia en la columna de al lado, pisando la linea divisoria. Ahora parten
     en dos lineas, y las cuatro columnas reparten el ancho por igual para
     que el corte sea parejo.
   Medido en produccion con el texto actual de 990 a 1920px: 40px libres
   hasta los avatares y ningun texto fuera de su columna. Por debajo de 981
   el diseño ya apila y parte los titulos. */
@media (min-width: 981px){
  .sistema-titlebox{
    height: auto;
    min-height: 586px;
  }
  .sistema-stats{
    max-width: none;
  }
  .sistema-stat{
    flex: 1 1 0;
  }
  .sistema-stat h4{
    white-space: normal;
  }
}

/* Curso · Sistema M20 — de 981 a 1280px, TELEFONO ABAJO (decision de Diego,
   01/10). Con el telefono a la derecha el bloque 01-04 se quedaba con el 70%
   del ancho y, con los textos reales, muy apretado. En este tramo todo el
   contenido va a ancho completo (el 01-04 pasa de ~600 a 900-1190px) y el
   telefono baja centrado, a 300px, debajo del boton y las garantias.
   Desde 1281 sigue el diseño original (telefono a la derecha); por debajo
   de 981 manda la version movil del diseño. */
@media (min-width: 981px) and (max-width: 1280px){
  .sistema-section .section-inner{
    flex-direction: column;
    align-items: stretch;
  }
  .sistema-inner{
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
  }
  .sistema-titlebox{
    width: 100%;
    min-height: 0;
  }
  .sistema-phone-col{
    flex: none;
    width: 100%;
    padding: 0 42px 72px;
    display: flex;
    justify-content: center;
  }
  .sistema-phone{
    width: 300px;
  }
}

/* Tour · El recorrido — los dos parrafos del encabezado en Gill Sans, la
   letra de texto del sitio («No es una visita guiada.» y el subtitulo
   .recorrido-sub). El diseño les daba Playfair con la regla
   «.recorrido-section .section-head p»; esta tiene la misma especificidad y
   va despues, asi que gana. El titulo «El recorrido» sigue en Playfair. */
.recorrido-section .section-head p{
  font-family: var(--font-sans);
}

/* Tour · La Orellana (las 4 cifras alrededor de la foto) — que el titulo
   quede centrado aunque el cliente ponga una palabra mas larga.
   El diseño daba a cada cifra un ANCHO FIJO pensado para su texto original:
   208, 262, 167 («13.000 años») y 284px. Con «ANTIOXIDANTES» en la de 167
   el titulo no cabia, se salia 81px por la derecha y se veia descentrado.
   En escritorio las cuatro pasan a ocupar su columna entera (260px), asi el
   centrado es el de la columna sea cual sea la palabra. Medido en
   produccion de 1024 a 1920: las cuatro centradas, ninguna se sale.
   En tablet y movil (<=980) el diseño ya les da 220px a todas y ahi se
   veian bien: no se toca. */
@media (min-width: 981px){
  .orellana-stat.stat-alta-cocina,
  .orellana-stat.stat-proteina,
  .orellana-stat.stat-13000-anos,
  .orellana-stat.stat-lovastatina{
    width: 100%;
  }
}

/* Tour · Nos visitan — botón «Comparte tu experiencia» a 20px (pedido de
   Diego, 02/10). El diseño lo dejaba en 32px (var(--fs-h3)). Gill Sans y
   sin transformar el texto: sale tal cual se escribe en el metabox, con solo
   la primera letra en mayúscula. Mantiene los 56px de alto de todos los
   botones. */
/* Tour · El tour (qué incluye) — botón «Reservar Tour», y Tour · Reserva —
   botón de reserva (.airbnb-btn, hoy «Reservar por WhatsApp»): tambien a
   20px y Gill Sans (pedido de Diego, 02/10). Venian en 32px. */
.visitan-section .join-community .btn-gold,
.incluye-inner .btn-gold,
.price-card .airbnb-btn{
  font-family: var(--font-sans);
  font-size: 20px;
  text-transform: none;
}

/* Home · Comunidad — las tres cifras (1.500+ · 24/7 · 5★) con aire entre
   columnas (pedido de Diego, 02/10). Con los textos reales se veian
   apretadas: la columna izquierda media 492px y los tres bloques de 150px
   dejaban solo 10px entre cada texto y su linea divisoria.
   - La rejilla de la seccion usa el marco completo del sitio (1280, como el
     resto de secciones) y 48px entre columnas en vez de 60: la izquierda
     pasa de 492 a ~550px. El carrusel de la derecha no cambia.
   - Las tres cifras reparten ese ancho a partes iguales con 28px a cada
     lado de las lineas divisorias (antes 10px).
   - Entre 1025 y 1279 la columna izquierda es demasiado estrecha para tres
     columnas (quedaban de 85-118px): ahi las cifras van una debajo de otra,
     numero a la izquierda y textos a la derecha, sin divisores.
   Desde 1024 hacia abajo manda el diseño (secciones apiladas; en movil las
   cifras se ocultan). */
@media (min-width: 1025px){
  .comunidad-grid{
    max-width: var(--frame);
    gap: 48px;
  }
  .comunidad-stats{
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    justify-content: stretch;
    column-gap: 28px;
  }
}
@media (min-width: 1025px) and (max-width: 1279px){
  .comunidad-stats{
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .comunidad-stats .cs-divider{
    display: none;
  }
  .cs-stat{
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  .cs-stat .cs-number{
    grid-row: 1 / span 2;
  }
  .cs-stat .cs-label{
    margin: 4px 0 6px;
  }
}

/* Home · Comunidad — de 641 a 1024px las tres cifras juntas y CENTRADAS
   (pedido de Diego, 02/10). Ahi la seccion va apilada y el diseño las
   repartia con «space-between» por todo el ancho: a 1024 quedaban 130px
   entre cada texto y su linea. Ahora van agrupadas al centro, con un hueco
   que crece con la pantalla (20px a 40px a cada lado de las lineas: 32px a
   800, 40px a 1024). Por debajo de 641 el diseño las oculta. */
@media (min-width: 641px) and (max-width: 1024px){
  .comunidad-stats{
    justify-content: center;
    column-gap: clamp(20px, 4vw, 40px);
  }
}

/* ==========================================================================
   WhatsApp flotante (inc/whatsapp-flotante.php) — abajo a la derecha en todas
   las paginas. z-index 9: por debajo de la cabecera (10), asi el menu movil a
   pantalla completa lo tapa; los <dialog> van en la capa superior.
   ========================================================================== */
.wa-flotante {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wa-flotante-icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold, #C5A357);
  color: #171512;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(242, 234, 217, .12);
  transition: transform .2s ease, filter .2s ease;
}
/* Un pulso suave para que se vea "activo". */
.wa-flotante-icono::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gold, #C5A357);
  opacity: 0;
  animation: wa-pulso 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-pulso {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
.wa-flotante-texto {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--card, #171512);
  border: 1px solid var(--border, rgba(197, 163, 87, .25));
  color: var(--cream, #f2ead9);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.wa-flotante:hover .wa-flotante-icono,
.wa-flotante:focus-visible .wa-flotante-icono {
  transform: scale(1.06);
  filter: brightness(1.08);
}
.wa-flotante:hover .wa-flotante-texto,
.wa-flotante:focus-visible .wa-flotante-texto {
  opacity: 1;
  transform: none;
}
.wa-flotante:focus-visible { outline: none; }
.wa-flotante:focus-visible .wa-flotante-icono {
  box-shadow: 0 0 0 3px var(--bg, #0c0b0a), 0 0 0 5px var(--gold, #C5A357);
}
@media (min-width: 1025px) {
  .wa-flotante { right: 28px; bottom: 28px; }
  .wa-flotante-icono { width: 60px; height: 60px; }
}
/* En tactil no hay hover: la etiqueta no se muestra. */
@media (hover: none) {
  .wa-flotante-texto { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-flotante-icono::after { animation: none; }
  .wa-flotante-icono,
  .wa-flotante-texto { transition: none; }
}
/* Con el menu movil abierto, fuera. */
body:has(header.menu-abierto) .wa-flotante { visibility: hidden; }
/* Hueco al final del pie para que el boton no tape «© GANAN 2026» al llegar
   abajo (pasaba de 641 a ~1600px). */
.wa-hay .footer-bottom { padding-bottom: 72px; }
@media (min-width: 1025px) {
  .wa-hay .footer-bottom { padding-bottom: 88px; }
}