/* GANAN — home.css
   Estilos propios de esta pagina. Lo compartido esta en base.css */

/* ===== HEADER (shared) ===== */

/* ===== FOOTER (shared) ===== */

/* ===== HOME HERO - ALIMENTO ANCESTRAL ===== */

/* ===== HERO DE PORTADA =====
   El titular es texto real, reconstruido midiendo el diseno original:
   margen izquierdo 42px, Playfair Regular ~49,5px con interlinea de 71px,
   "despierta" en dorado, parrafo 16px/27px y regla de 162x1px. */
.hero-ancestral{
    position: relative;
    width: 100%;
    /* --- PANTALLA COMPLETA ---
       'svh' es el alto del viewport con la barra del navegador desplegada, o
       sea lo que de verdad se ve al cargar. Es la unidad correcta aqui porque
       el texto va anclado ABAJO: con '100vh' (que mide la ventana con la barra
       ya escondida) el titular y la regla dorada caerian por debajo del corte
       en el movil. Con 'dvh' el hero cambiaria de alto al desplazarse, que se
       nota como un salto. La primera linea es el respaldo para navegadores
       sin unidades de viewport nuevas. */
    min-height: 100vh;
    min-height: 100svh;
    margin-top: calc(var(--header-h) * -1);   /* el hero pasa bajo la cabecera */
    padding-top: var(--header-h);
    display: flex;
    align-items: flex-end;
    /* --- FONDO POR DISPOSITIVO ---
       La foto apaisada solo funciona en horizontal. En vertical, 'cover'
       descartaba entre el 39% y el 65% del ancho, asi que cada formato usa
       su propio recorte. Ver ANTES-DE-PUBLICAR.md para las medidas. */
    background: #000 url("../img/hero-fondo-movil.webp") no-repeat top center;
    background-size: cover;
    /* Debe ir DESPUES del atajo 'background', que lo reinicia a padding-box.
       Coloca la foto dentro del area de contenido, o sea por debajo de la
       cabecera: si no, la etiqueta "ALTITUD 2.600m" queda tapada por el menu. */
    background-origin: content-box;
    overflow: hidden;
  }

/* Tableta en vertical: formato casi cuadrado */
@media (min-width: 641px) and (max-width: 1023px){
  .hero-ancestral{
    background-image: url("../img/hero-fondo-tablet.webp");
  }
}

/* De 1024px en adelante el hero ya es apaisado: la foto horizontal encaja y
   con contain se ve la seta entera. La banda de la izquierda no se aprecia
   porque la imagen es practicamente negra en ese lado. */
@media (min-width: 1024px){
  .hero-ancestral{
    background-image: url("../img/hero-fondo-01.webp");
    background-position: top right;
    background-size: contain;
  }
}

/* Movil apaisado: es horizontal aunque sea estrecho, asi que le va mejor la
   foto apaisada recortada que el recorte vertical. */
@media (max-width: 1023px) and (orientation: landscape){
  .hero-ancestral{
    background-image: url("../img/hero-fondo-01.webp");
    background-position: top right;
    background-size: cover;
  }
}

/* Velo por la izquierda: mantiene el texto legible sea cual sea el recorte */
.hero-ancestral::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      rgba(6,6,6,0.92) 0%,
      rgba(6,6,6,0.78) 32%,
      rgba(6,6,6,0.35) 58%,
      rgba(6,6,6,0) 78%);
    pointer-events: none;
  }

/* En movil el texto ocupa todo el ancho, asi que el velo horizontal no lo
   cubre por la derecha y se cruzaba con las etiquetas de la foto. Se anade
   un degradado vertical que oscurece la mitad inferior. */
@media (max-width: 1023px){
  .hero-ancestral::before{
    background:
      linear-gradient(0deg,
        rgba(6,6,6,0.94) 0%,
        rgba(6,6,6,0.82) 38%,
        rgba(6,6,6,0.35) 68%,
        rgba(6,6,6,0.15) 100%),
      linear-gradient(90deg,
        rgba(6,6,6,0.55) 0%,
        rgba(6,6,6,0.30) 60%,
        rgba(6,6,6,0) 100%);
  }
}

.hero-inner{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--frame);
    margin: 0 auto;
    /* El margen inferior vive aqui y no en la seccion: asi no reduce el area
       donde se coloca la foto.
       El diseno original dejaba la regla dorada al 84,5% del alto (13,6vh,
       o sea 91-139px de hueco). Se pidio un hueco de unos 40px, asi que el
       texto baja y la regla queda hacia el 95%. El valor que manda es el
       4,7vh: el minimo y el maximo solo acotan los extremos (movil apaisado
       por abajo, pantallas muy altas por arriba). */
    padding: 0 42px clamp(32px, 4.7vh, 52px);
  }

/* --- ESCRITORIO: el bloque de texto, centrado en vertical ---
   En movil y tableta el texto sigue anclado abajo, que es para lo que estan
   compuestos los recortes verticales.

   No basta con filtrar por ancho: una tableta en horizontal mide 1024px (iPad
   mini) o 1366px (iPad Pro), asi que un 'min-width' sola las centraria tambien.
   Y subir el corte por encima de 1366 dejaria fuera a los portatiles de
   1366x768, que son muchos. Por eso se mira el tipo de puntero:
     hover:hover + pointer:fine  = raton o trackpad -> escritorio
     (tableta y movil declaran pointer:coarse y hover:none)
   El ancho se mantiene para que una ventana estrecha en escritorio se comporte
   como el responsive.

   El margen inferior no es decorativo: la seccion lleva 76px de relleno
   superior (para que la foto arranque bajo la cabecera) y eso desplazaria
   el centrado 38px hacia abajo. Un margen del mismo alto en el hijo lo
   devuelve al centro real de la pantalla. Se hace con margen y no con
   relleno inferior porque el relleno encogeria tambien el area donde se
   coloca la foto, y en escritorio va con 'contain': saldria mas pequena. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine){
  .hero-ancestral{ align-items: center; }

  .hero-inner{
    padding-bottom: 0;
    margin-bottom: var(--header-h);
  }
}

.hero-eyebrow{
    display: block;
    font-family: var(--font-sans);
    font-size: clamp(0.8125rem, 0.74rem + 0.31vw, 1rem);   /* 13 -> 16 */
    font-weight: 400;
    letter-spacing: 0.40em;   /* el original va muy espaciado: 284px de ancho */
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: clamp(18px, 2vw, 28px);
  }

/* El titular original NO va en negrita: es Playfair Display Regular a ~54px.
   Comprobado midiendo el PNG — con peso 700 las lineas salian un 24% mas
   anchas (594px frente a los 480px del original) y la mayuscula no cuadraba. */
.hero-title{
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.22rem + 3.08vw, 3.09rem);   /* 32 -> 49,5 */
    font-weight: 400;
    line-height: 1.43;   /* = los 71px de interlinea del original */
    color: #fff;
    margin: 0;
  }

.hero-title-accent{ color: var(--gold); }

.hero-lead{
    font-family: var(--font-sans);
    /* 16px fijos. Es el parrafo de entrada de la portada, texto corrido:
       antes bajaba a 15px en movil, por debajo de la convencion. En
       pantallas bajas el bloque de mas abajo lo compacta para que el
       hero siga cabiendo en una pantalla. */
    font-size: 1rem;
    line-height: 1.69;
    color: #C7C5C2;
    max-width: 500px;
    margin-top: clamp(20px, 2.1vw, 30px);
  }

.hero-rule{
    width: 162px;
    max-width: 100%;
    height: 0.8px;
    background: var(--gold);
    border: none;
    margin: clamp(16px, 1.8vw, 26px) 0 0;
  }

/* --- PANTALLAS BAJAS (movil apaisado) ---
   Unico caso donde el hero no cabe en una pantalla: a 390px de alto el
   titular a 45px, el parrafo y la regla suman 488px y la regla se iba por
   debajo del corte. Aqui el texto se compacta para que quepa entero.
   Se filtra por ALTO, no por ancho: lo que falta es altura. */
@media (max-height: 500px) and (orientation: landscape){
  .hero-inner{ padding-bottom: 24px; }

  .hero-eyebrow{
    font-size: 0.8125rem;
    margin-bottom: 10px;
  }

  .hero-title{
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    line-height: 1.25;
  }

  .hero-lead{
    font-size: 0.875rem;
    line-height: 1.5;
    margin-top: 12px;
  }

  .hero-rule{ margin-top: 12px; }
}

/* ===== HOME - QUIENES SOMOS =====
   Excepcion a la regla general: aqui el contenedor interno NO se detiene en
   1280px. La division foto | texto va a sangre, de borde a borde. */

.quienes-somos{ width: 100%; }

/* Sin min-height: el alto de la seccion es EXACTAMENTE el de la imagen.
   Si la foto mide 800px, la seccion y el section-inner miden 800px. */
.quienes-somos .section-inner{
    max-width: none;
    display: flex;
    align-items: stretch;
  }

/* La foto ocupa su mitad completa, de borde a borde, y se ve entera.
   Al no llevar padding, su alto es exactamente el de la seccion. */
.qs-photo{
    width: 50%;
    /* mismo fondo que la mitad del texto: si no, se ve una costura vertical
       justo en el centro de la seccion */
    background: #1a1a1a;
  }

.qs-photo picture{ display: block; width: 100%; }

/* Cada tramo carga su propia imagen y cada una tiene su proporcion. Se declara
   aqui para que el navegador reserve el hueco correcto antes de descargarla y
   no haya salto de maquetacion. Al cambiar un archivo, actualizar su ratio. */
.qs-photo img{
    display: block;
    width: 100%;
    height: auto;              /* conserva su proporcion: no se recorta nada */
    aspect-ratio: 1400 / 1500; /* xl, a partir de 1367px */
  }

/* Los cortes coinciden con el del apilado (980px): las dos imagenes
   apiladas son de ancho completo y las dos de 50/50, de media columna. */
@media (max-width: 1366px){ .qs-photo img{ aspect-ratio: 760 / 1000; } }
@media (max-width: 980px) { .qs-photo img{ aspect-ratio: 1000 / 900; } }
@media (max-width: 640px) { .qs-photo img{ aspect-ratio: 760 / 850; } }

.qs-text{
    position: relative;
    width: 50%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
  }

/* El aire del texto vive aqui dentro: asi no suma al alto de la seccion
   salvo que el propio texto sea mas alto que la foto. */
.qs-text-inner{
    position: relative;
    z-index: 2;
    padding: 40px clamp(24px, 5vw, 70px);
  }

.qs-text-inner h2{
    font-size: var(--fs-h2);
    color: var(--gold);
    font-weight: normal;
  }

.qs-text-inner .rule.left{ margin: 22px 0 26px; }

.qs-text-inner p{
    font-family: var(--font-sans);
    color: var(--cream);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    max-width: 620px;
  }

.qs-text-inner p + p{ margin-top: 16px; }

.qs-text-inner p strong{ font-weight: bold; }

/* ===== HOME - NUESTRA FINCA (stats) ===== */

/* Excepcion a la regla general: la foto de la finca va a sangre, sin el tope
   de 1280px. Conserva su proporcion (1280x616), asi que se ve entera y su
   alto crece con el ancho de la pantalla. */
.finca-photo{ width: 100%; overflow: hidden; }

.finca-photo img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 616;
  }

.finca-stats{
    background: #202020;
    padding: 70px 0;
  }

.finca-bottom-spacer{ height: 80px; background: #202020; }

.finca-stats-grid{
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    align-items: center;
    max-width: var(--frame);
    margin: 0 auto;
    padding: 0 24px;
  }

.finca-divider{ background: var(--gold); height: 180px; }

.finca-stat{ text-align: center; }

.finca-stat .fs-icon{ width: 36px; height: 36px; margin: 0 auto 18px; object-fit: contain; filter: url(#icon-tint-bfa462); }

.finca-stat .fs-label{
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cream);
    margin-bottom: 20px;
  }

.finca-stat .fs-number{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    font-weight: bold;
    color: var(--gold);
  }

.finca-stat .fs-unit{
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: normal;
    color: var(--cream);
    margin-top: 14px;
  }

/* ===== HOME - LA ORELLANA ===== */

.orellana-home{
    background: #1a1a1a;
    padding: 90px 0;
    /* ancla del trazo decorativo */
    position: relative;
    /* El trazo sobresale por la izquierda y por abajo. Sin recortar aqui,
       ese sobrante generaria scroll lateral en toda la pagina. */
    overflow: hidden;
  }

/* --- TRAZO DECORATIVO, ABAJO A LA IZQUIERDA ---
   Una sola imagen, en su orientacion original y sin transform en ningun
   tramo. Su masa va en la diagonal arriba-izquierda / abajo-derecha. */
.orellana-deco{
    position: absolute;
    left: 100px;
    /* Ancla al borde INFERIOR de la seccion. En negativo, la empuja hacia
       abajo y el 'overflow:hidden' de la seccion recorta lo que sobra.
       Ojo: 'top' hace lo contrario, mide desde el borde de arriba, asi que
       un 'top' grande no baja la imagen, la coloca desde arriba. */
    bottom: -200px;
    z-index: 0;
    width: clamp(320px, 45vw, 720px);
    /* El archivo venia en gris oscuro (rgb 62,55,39) y al 30% de opacidad:
       sobre el fondo #1a1a1a daba 1,10:1 de contraste, o sea invisible.
       Se regenero en dorado de marca y alfa solido, y la intensidad se
       gradua desde aqui. A 0,10 el contraste es 1,2:1: muy tenue. */
    opacity: .10;
    pointer-events: none;   /* decorativo: no debe interceptar clics */
    user-select: none;
  }

/* Por debajo de escritorio, el trazo pegado a la esquina sin desplazamientos.
   Los 100px y los -200px estan calculados para el escritorio: ahi la imagen
   mide 648-720px de ancho y le sobra sitio. En movil se queda en 320px, asi
   que ese mismo -200px se comia el 88% del dibujo y solo asomaba una franja
   de 27px; y los 100px de la izquierda lo sacaban por la derecha del
   viewport. A cero, para ver donde cae de forma natural. */
/* Hasta 1024px INCLUIDO: 1024 es el ancho exacto del iPad Pro en vertical y
   del iPad mini apaisado, y ahi el trazo debe ir pegado al borde como en el
   resto de tabletas, no con los 100px de escritorio. */
@media (max-width: 1024px){
  .orellana-deco{
    left: 0;
    bottom: 0;
  }
}

/* El contenido, por encima del trazo */
.orellana-home .container,
.orellana-home .orellana-cards{
    position: relative;
    z-index: 1;
  }

.orellana-home .eyebrow{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
    margin-bottom: 20px;
  }

.orellana-home h2{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    color: var(--gold);
    font-weight: bold;
  }

.orellana-home .rule.left{ margin: 22px 0 30px; }

.orellana-home p{
    font-family: var(--font-sans);
    color: var(--cream);
    font-size: var(--fs-base);
    font-weight: normal;
    line-height: var(--lh-relaxed);
  }

.orellana-home p + p{ margin-top: 18px; }

/* Las tarjetas se pegan a los extremos del contenedor de 1280px: la primera
   arranca donde arranca el titulo de la seccion y la ultima acaba en el borde
   opuesto. Antes iban a 1196px centradas, 66px hacia dentro, y no alineaban
   con el texto de arriba. */
.orellana-cards{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: space-between;
    gap: var(--sp-4);
    width: 100%;
    max-width: var(--frame);
    margin: 52px auto 0;
    padding: 0 var(--sp-4);
  }

.orellana-card{
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 456px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.05' numOctaves='2' seed='7' result='turb'/%3E%3CfeColorMatrix in='turb' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      #ad904f;
    background-blend-mode: multiply;
    background-size: 400px 400px;
    border-radius: 16px;
    padding: 62px 24px;
    overflow: hidden;
  }

/* La textura iba en "top left no-repeat" sin cubrir la tarjeta: dejaba una
   costura horizontal visible donde acababa la imagen. Con cover desaparece.

   Hubo un velo dorado encima (30% arriba, 97% abajo) que garantizaba que el
   texto oscuro cayera siempre sobre fondo claro. Se retiro a peticion: se
   queria la imagen sin alterar. Consecuencia medida: en card-bg-1, que tiene
   40 puntos de rango de luminancia, el texto #1a1a1a baja a 3,01 de contraste
   sobre sus zonas oscuras, por debajo del 4,5 que pide WCAG AA. Las otras dos
   son planas (7-8 puntos) y se mantienen sobre 5,0. */
.orellana-card.oc-card-1,
.orellana-card.oc-card-2,
.orellana-card.oc-card-3{
    /* La imagen tal cual, sin velo ni mezcla. El color de debajo solo se veria
       si la imagen no cargara: con 'cover' siempre queda tapado.
       'normal' es obligatorio aunque no anada nada: la regla base aplica
       'multiply', y sin anularlo la textura se mezclaria con el color y
       saldria oscurecida. */
    background: var(--oc-textura) center / cover no-repeat, #ad904f;
    background-blend-mode: normal;
  }

/* Lo unico que distingue a una tarjeta de otra es su textura. */
.orellana-card.oc-card-1{ --oc-textura: url("../img/card-bg-1-boosted.webp"); }
.orellana-card.oc-card-2{ --oc-textura: url("../img/card-bg-2-boosted.webp"); }
.orellana-card.oc-card-3{ --oc-textura: url("../img/card-bg-3-boosted.webp"); }

.oc-icon{ width: 72px; height: 72px; margin-bottom: 12px; filter: url(#icon-tint-2a2a2a); }

/* Sin altos fijos: los titulos alinean solos y no se recortan al cambiar
   el tamano de letra. mt:auto empuja la descripcion al pie de la tarjeta,
   asi las 3 quedan alineadas entre si. */
.oc-title-box{ width: 100%; }

.oc-desc-box{ width: 100%; margin-top: auto; }

.orellana-card h3{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: bold;
    color: #1a1a1a;
    line-height: var(--lh-tight);
  }

.orellana-card h3.oc-title-sm{
    font-size: var(--fs-h1);
    font-weight: 600;
    line-height: var(--lh-heading);
  }

.orellana-card h3 .oc-unit{
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: normal;
    display: block;
  }

.orellana-card .rule.left{ width: 82px; margin: 16px 0; background: #1a1a1a; }

.orellana-card p{
    font-family: var(--font-sans);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: normal;
    line-height: var(--lh-base);
  }

/* ===== HOME - EXPERIENCIAS ===== */

/* Excepcion a la regla general: aqui el contenido tampoco se detiene en
   1280px. Las dos tarjetas de experiencia van a sangre, de borde a borde. */
.experiencias-section{ background: linear-gradient(180deg, #1a1a1a 0px, #1e1e1e 207px, #1e1e1e 100%); padding: 90px 0 0; }

.experiencias-section .section-inner{ max-width: none; }

.experiencias-section h2{
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    line-height: var(--lh-base);
    font-weight: 600;
    color: var(--cream);
    text-align: center;
    margin-bottom: 90px;
  }

.experiencias-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
  }

.exp-card{
    position: relative;
    display: block;
    min-height: 816px;
    overflow: hidden;
  }

/* La foto va tal cual: sin velo, sin filtro y sin mezcla. Habia encima un
   .exp-card-overlay con dos degradados negros (80% por la izquierda y 50%
   por abajo) y se retiro a peticion. Las fotos ya son muy oscuras en la zona
   del texto (rgb 33,31,27 de media), asi que el titular dorado conserva
   6,8:1 de contraste y el texto crema 13,7:1. */
.exp-card-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.exp-card-content{
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* era flex-end: el contenido iba anclado abajo */
    padding: 56px;
  }

.exp-card .eyebrow{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: normal;
    margin-bottom: 18px;
  }

.exp-card .rule.left{ margin: 0 0 26px; }

.exp-card h3{
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    line-height: var(--lh-base);
    font-weight: 600;
    color: var(--gold);   /* #C5A357 */
    margin-bottom: 40px;
    max-width: 460px;
  }

.exp-features{ display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: 40px; }

.exp-feature{ display: flex; align-items: center; gap: var(--sp-3); }

.exp-feature .ef-icon{ flex-shrink: 0; width: 44px; height: 44px; object-fit: contain; }

.exp-feature .ef-text strong{
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: bold;
    color: var(--cream);
    margin-bottom: 4px;
  }

.exp-feature .ef-text span{
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    font-weight: normal;
    color: var(--muted);
  }

.exp-card .btn-gold{
    align-self: flex-start;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: normal;
  }

.exp-card .btn-gold svg{ stroke: #171512; }   /* el tamano lo pone base.css */

/* ===== HOME - COMUNIDAD ===== */

.comunidad-section{ background: #1a1a1a; padding: 90px 0 0; }

.comunidad-grid{
    display: grid;
    /* 632px y no 683: es lo que mide el carrusel desde que se ajusto a dos
       tarjetas exactas. Los 51px que sobraban se los queda la columna
       izquierda, que es donde hacen falta para los tres bloques de 150px. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 632px);
    max-width: 1232px;
    gap: 60px;
    align-items: start;
  }

.comunidad-left .eyebrow{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: normal;
    margin-bottom: 18px;
  }

.comunidad-left .rule.left{ margin: 0 0 26px; }

.comunidad-left h2{
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 600;
    color: var(--cream);
    line-height: var(--lh-heading);
  }

.comunidad-left h2 .gold{ color: var(--gold); }

.comunidad-left > p{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: normal;
    color: var(--muted);
    margin: 24px 0 56px;
  }

/* Tres bloques de 150px con los divisores centrados entre ellos.
   El reparto lo hace 'space-between' y no un gap fijo: asi el sobrante se
   divide en cuatro huecos iguales y cada divisor queda a la misma distancia
   de los dos bloques que separa. */
.comunidad-stats{
    display: grid;
    grid-template-columns: 150px 1px 150px 1px 150px;
    justify-content: space-between;
    max-width: 100%;
    align-items: start;
    gap: 0;
  }

/* De 1024px hacia abajo, las dos mitades van una encima de otra. Antes el
   corte estaba en 980 y entre 981 y 1024 seguian lado a lado, con la columna
   izquierda muy estrecha. */
@media (max-width: 1024px){
  .comunidad-grid{ grid-template-columns: minmax(0, 1fr); gap: 50px; }
}

/* Los 150px fijos solo caben de 1200px en adelante: los tres bloques mas los
   dos divisores piden 452px, y la columna izquierda mide 'viewport - 740'.
   Por debajo vuelven a ser flexibles; si no, el ultimo bloque se salia hasta
   211px e invadia el carrusel.
   Va ANTES del bloque de 980px a proposito: ahi la rejilla pasa a dos
   columnas y esa regla debe ganar por orden. */
@media (min-width: 1025px) and (max-width: 1199px){
  .comunidad-stats{
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    justify-content: stretch;
    gap: var(--sp-3);
  }
}

.cs-divider{ height: 143px; align-self: center; }

.cs-number{
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
    font-weight: 600;
    color: var(--gold);
  }

.cs-label{
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    font-weight: normal;
    color: var(--gold);   /* #C5A357 */
    margin: 12px 0 14px;
  }

.comunidad-stats p{
    font-family: var(--font-sans);
    /* 14px a peticion. Es el token de rotulos, no el de texto corrido: aqui
       hacen de pie del dato grande, no de parrafo de lectura. */
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    font-weight: normal;
    color: var(--muted);
  }

.comunidad-stats p strong{ color: var(--cream); font-weight: bold; }

.comunidad-right{ position: relative; }

/* El carril mide EXACTAMENTE dos tarjetas, para que no asome un trozo de la
   tercera. La cuenta: 2 tarjetas de 254 + 1 hueco de 32 + los 92 de margen
   que dejan sitio a las flechas (46 por lado) = 632px.
   Antes eran 683px y esos 51px de mas eran justo el pico de la siguiente. */
.comunidad-right .testimonios-carousel-wrap{
    position: relative;
    width: calc(254px * 2 + 32px + 92px);
    max-width: 100%;
    height: 336px;
  }

/* --- CUANTAS TARJETAS SE VEN EN CADA TRAMO ---
   Escritorio (>=1025) manda la regla de arriba: carril de 632px y tarjetas de
   254 fijos, o sea 2 enteras.

   En tableta y movil el carrusel ocupa todo el ancho disponible y es la
   TARJETA la que se adapta, no el carril. Es la unica forma de que entren
   3 y 1 exactas: con los 254px fijos, en un iPad mini el carril util es de
   628px y solo caben 2; y en un iPhone (250px de carril) no cabe ni una.
   El calculo va sobre el 100% del carril, asi que siempre encajan justas y
   nunca asoma un trozo de la siguiente. */

/* Tabletas: 2 tarjetas */
@media (min-width: 680px) and (max-width: 1024px){
  .comunidad-right .testimonios-carousel-wrap{ width: 100%; }
  .comunidad-right .comunidad-card{ flex: 0 0 calc((100% - 32px) / 2); }
}

/* Movil: 1 tarjeta */
@media (max-width: 679px){
  .comunidad-right .testimonios-carousel-wrap{ width: 100%; }
  .comunidad-right .comunidad-card{ flex: 0 0 100%; }
  /* Con .comunidad-right delante y no '.comunidad-strip' a secas: la regla
     base del strip vive mas abajo en el archivo y ganaria por orden. */
  .comunidad-right .comunidad-strip{ margin: 0 44px; }
}

/* El testimonio, COMPLETO en tableta y movil.
   La tarjeta trae un recorte de 8 lineas ('-webkit-line-clamp') que en
   escritorio no molesta, pero al estrecharse el texto necesita mas lineas y
   cortaba la cita a media frase. Aqui se retira: la tarjeta crece a lo alto
   y el 'align-items: stretch' de la tira las deja todas a la misma altura. */
@media (max-width: 1024px){
  .comunidad-right .comunidad-quote{
    -webkit-line-clamp: none;
    overflow: visible;
  }
  .comunidad-right .comunidad-card{ height: auto; }
}

.comunidad-right .testi-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
  }

.comunidad-right .testi-arrow img{ width: 36px; height: 36px; object-fit: contain; }

.comunidad-right .testi-arrow-prev{ left: 0; }

.comunidad-right .testi-arrow-next{ right: 0; }

.comunidad-strip{
    display: flex;
    align-items: stretch;   /* todas las tarjetas, a la misma altura */
    gap: 32px;
    min-height: 100%;
    margin: 0 46px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 8px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

.comunidad-strip::-webkit-scrollbar{ display: none; }

.comunidad-card{
    position: relative;
    /* Ancho fijo de 254px. El alto sigue siendo minimo y no fijo: con la cita
       a 16px hacen falta 7 lineas en 212px utiles de texto, y el recorte esta
       en 8, asi que la tarjeta crece en vez de truncar. */
    flex: 0 0 254px;
    min-height: 320px;
    background: linear-gradient(to top, #352e26 0%, #222222 25%);
    border: 1px solid var(--border);
    border-radius: 10px;
    /* El relleno inferior reserva la banda de las estrellas, que van en
       absoluto: sin el, la cita mas larga se les monta encima. */
    padding: 20px 20px 54px;
    overflow: hidden;
  }

.comunidad-card-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

.comunidad-avatar{
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: #2A2A2A;
    border: 1px solid var(--border);
    overflow: hidden;
  }

.comunidad-avatar img{ width: 100%; height: 100%; object-fit: cover; }

.comunidad-name{
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    line-height: var(--lh-base);
    font-weight: bold;
    color: var(--gold);
  }

.comunidad-plan, .comunidad-location{
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: normal;
    color: var(--muted);
  }

.comunidad-card .rule.left{ margin: 0 0 14px; }

.comunidad-quote{
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    font-weight: normal;
    color: var(--cream);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 8 y no 6: a 16px la cita ocupa mas lineas. Con la tarjeta de alto
       minimo, crecer a lo alto es preferible a truncar el testimonio. */
    -webkit-line-clamp: 8;
    overflow: hidden;
  }

.comunidad-stars{ position: absolute; left: 20px; bottom: 20px; display: flex; gap: var(--sp-1); }

.comunidad-star{ width: 18px; height: 18px; object-fit: contain; }

.comunidad-bar{ margin-top: 70px; }

/* ===== RESPONSIVE ===== */

@media (max-width: 980px){
    /* Solo los lados: en abreviado ('padding: 0 var(--sp-4)') tambien se
       ponia a cero el inferior y el texto quedaba pegado al borde de abajo
       en tablet y movil, que es justo donde mas se nota. */
    .hero-inner{ padding-inline: var(--sp-4); }

.quienes-somos .section-inner{ height: auto; flex-direction: column; }

.qs-photo{ width: 100%; }



.qs-text{ width: 100%; }

.orellana-cards{ grid-template-columns: 1fr 1fr; }



.finca-stats-grid{ grid-template-columns: 1fr; row-gap: var(--sp-5); }

.finca-divider{ display: none; }

.experiencias-section{ padding: 60px 0 0; }

.experiencias-section h2{ margin-bottom: 50px; }

/* Apiladas: 50px de aire entre las dos tarjetas. Valor literal y no un paso
   de la escala porque queda a 10px del --sp-5 (40) y a 14px del --sp-6 (64),
   fuera del margen de 3px con el que se normalizaron los demas huecos. */
.experiencias-grid{ grid-template-columns: 1fr; gap: 50px; }

.exp-card{ min-height: 640px; }

.exp-card-content{ padding: 40px; }

.comunidad-section{ padding: 60px 0 0; }

.comunidad-right .testi-arrow-prev{ left: 8px; }

.comunidad-right .testi-arrow-next{ right: 8px; }
}

/* --- LA TERCERA TARJETA, CENTRADA ---
   Solo en el tramo de 2 columnas: con 3 tarjetas, la ultima se queda sola en
   la segunda fila y por defecto se alinea a la izquierda. Se le da el ancho
   exacto de una columna —la mitad del hueco disponible menos el gap— y se
   centra en la fila completa, asi mide lo mismo que sus companeras.
   Se filtra tambien por abajo: de 640px hacia abajo la rejilla ya es de una
   sola columna y la tarjeta ocupa todo el ancho. */
@media (min-width: 641px) and (max-width: 980px){
  .orellana-cards .orellana-card:last-child{
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--sp-4)) / 2);
  }
}

@media (max-width: 640px){




.orellana-cards{ grid-template-columns: 1fr; }

.finca-photo img{ height: 240px; aspect-ratio: auto; object-fit: cover; }

.finca-stats{ padding: 50px 0; }

.finca-stats-grid{ row-gap: 32px; }

.finca-bottom-spacer{ height: 48px; }

.exp-card{ min-height: 560px; }

.exp-card-content{ padding: 28px; }

.exp-features{ gap: var(--sp-3); }

/* Solo en movil bajan a una columna y se ocultan los divisores. En tableta
   las tres se mantienen en fila, que es donde se leen bien. */
.comunidad-stats{ grid-template-columns: 1fr; row-gap: 28px; }

.cs-divider{ display: none; }
}