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

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

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

/* ===== EL PROBLEMA ===== */

.problema-section{
    width: 100%;
    padding: 62px 42px;
    background: var(--bg-soft) url("../img/el-problema.webp") no-repeat center center;
    background-size: cover;
  }

.problema-header{
    width: 1196px;
    max-width: 100%;
    height: 349px;
  }

.problema-section .eyebrow{
    font-family: var(--font-sans);
    font-weight: normal;
    font-size: var(--fs-base);
  }

.problema-title{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: bold;
    color: var(--cream);
    line-height: var(--lh-tight);
    margin-top: 24px;
  }

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

.problema-text{
    font-family: var(--font-sans);
    color: var(--cream);
    font-size: var(--fs-base);
    font-weight: normal;
    max-width: 1020px;
    margin-top: 24px;
  }

.problema-text .accent{ color: var(--gold); }

.problema-conclusion{
    font-family: var(--font-sans);
    color: var(--cream);
    font-size: var(--fs-base);
    font-weight: bold;
    text-align: center;
    width: 1196px;
    max-width: 100%;
    height: 27px;
    margin: 42px auto;
  }

.problema-conclusion .accent{ color: var(--gold); }

.problema-cards{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    width: 100%;
    max-width: 1184px;
    margin-top: 50px;
  }

.problema-card{
    position: relative;
    flex: 1 1 300px;
    min-width: 0;
    min-height: 296px;
    background-color: #1a1815;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 6px;
    padding: 32px 28px;
  }

/* Barra roja del canto izquierdo. Va en un pseudo-elemento y no en
   'border-left' porque un borde no admite radio propio: tomaria el de la
   tarjeta y quedaria en pico. Con 5px de ancho el navegador reduce los 6px
   de radio hasta que caben, y los extremos salen redondeados. */
.problema-card::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background: #FB2C36;
    border-radius: 6px;
  }

.card-contaminacion{ background-image: url("../img/card-contaminacion.webp"); }

.card-sincontrol{ background-image: url("../img/card-sincontrol.webp"); }

.card-desorden{ background-image: url("../img/container-crads.webp"); }

.problema-card-content{ width: 336px; max-width: 100%; }

.card-contaminacion .problema-card-content{ height: 188px; }

.card-sincontrol .problema-card-content{ height: 212px; }

.card-desorden .problema-card-content{ height: 212px; }

.problema-card-icon{
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 20px;
  }

.problema-card h3{
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: normal;
    color: var(--gold);
    margin-bottom: 4px;
  }

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

.problema-card p{
    font-family: var(--font-sans);
    color: var(--cream);
    font-size: var(--fs-sm);
    font-weight: bold;
  }

.problema-card p strong{ font-weight: 700; }

/* ===== SISTEMA M20 ===== */

.sistema-section{
    position: relative;
    width: 100%;
    background: #202020;
    overflow: hidden;
  }

/* Dos columnas en porcentaje, 70 / 30. Antes el telefono iba en
   'position: absolute' con top y right en pixeles: no reaccionaba al ancho
   de la ventana y en pantallas medias se montaba sobre el texto. */
.sistema-section .section-inner{
    display: flex;
    align-items: flex-start;
  }

/* El color vive en .sistema-section, que va a ancho completo. Aqui dentro
   solo llegaba a los 1280px del contenedor y los lados quedaban en negro. */
.sistema-inner{
    flex: 0 0 70%;
    min-width: 0;
    min-height: 1067px;
    padding: 112px 42px 40px;
  }

.sistema-phone-col{
    flex: 0 0 30%;
    min-width: 0;
    /* A la altura del contenido de la izquierda, que arranca con ese padding */
    padding-top: 112px;
  }

.sistema-phone{ display: block; width: 100%; }

/* Por debajo de 1364px el marco de 1280 deja de tener 42px de aire a los
   lados y el telefono acababa pegado al canto de la pantalla: el contenido
   de la izquierda si tiene su padding, esta columna no. Se lo damos solo en
   ese tramo, para no encoger el telefono en pantallas anchas. */
@media (min-width: 981px) and (max-width: 1364px){
  .sistema-phone-col{ padding-right: 42px; }
}

.sistema-phone img{ width: 100%; height: auto; object-fit: contain; }

.sistema-titlebox{
    width: 773px;
    height: 586px;
    max-width: 100%;
  }

.sistema-inner .eyebrow{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
  }

.sistema-title{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: bold;
    line-height: var(--lh-heading);
    color: var(--cream);
    margin-top: 44px;
  }

.sistema-title .accent{ color: var(--gold); display: block; }

.sistema-subtitle{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
    color: #ffffff;
    margin-top: 40px;
  }

.sistema-stats{
    display: flex;
    margin-top: 70px;
    max-width: 900px;
  }

/* 24+24 y no 32+32: con 64px entre columnas los cuatro titulos en una linea
   pedian 797px y el contenedor da 773, asi que 'Estructura tecnica' se partia.
   Con 48px caben los cuatro con holgura. */
.sistema-stat{ padding-right: 24px; margin-right: 24px; border-right: 1px solid rgba(197,163,87,0.3); }

.sistema-stat:last-child{ border-right: none; padding-right: 0; margin-right: 0; }

.sistema-stat .num{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 10px;
  }

.sistema-stat h4{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: bold;
    color: var(--gold);
    /* La columna la marca el titulo entero: nunca parte a dos lineas.
       Por debajo de 980px vuelve a 'normal', que ahi no hay sitio. */
    white-space: nowrap;
    margin-bottom: 4px;
  }

.sistema-stat p{
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: normal;
    color: #ffffff;
  }

.sistema-stat{ min-width: 0; }

.sistema-community{
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-top: 40px;
  }

.profile{
    position: relative;
    width: 292px;
    height: 62px;
    flex-shrink: 0;
  }

.profile img{
    position: absolute;
    top: 0;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
  }

.profile img:nth-child(1){ left: 0; z-index: 1; }

.profile img:nth-child(2){ left: 46px; z-index: 2; }

.profile img:nth-child(3){ left: 92px; z-index: 3; }

.profile img:nth-child(4){ left: 138px; z-index: 4; }

.profile img:nth-child(5){ left: 184px; z-index: 5; }

.profile img:nth-child(6){ left: 230px; z-index: 6; }

.sistema-community .headline{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: bold;
    color: #ffffff;
  }

.sistema-community p{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
    color: #ffffff;
    margin-top: 4px;
  }

.sistema-cta-btn{
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: normal;
    padding: 18px 24px;
    margin-top: 30px;
    justify-content: space-between;
    white-space: nowrap;
    width: auto;
    max-width: 100%;
  }

.sistema-perks{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: var(--sp-4);
  }

/* Solo los de esta seccion. Las otras tres filas de .cta-perk de la pagina
   siguen en el gris apagado de .cta-perk. */
.sistema-perks .cta-perk{ color: #ffffff; }

/* La barra es .comunidad-bar (base.css) y no necesita nada mas. Iba en
   'position: absolute; bottom: 0' dentro del contenedor de 1280px: quedaba
   por debajo del contenido de la seccion, que la tapaba, y su fondo no
   llegaba a los bordes. Ahora va en el flujo y fuera del contenedor. */
.sistema-bottom-bar{ width: 100%; }

/* ===== LA ORELLANA ===== */

/* La composicion es un lienzo de 1280x1080 con la foto al centro y 4 llamadas
   alrededor. Antes iban en px fijos: por debajo de 1207px de ancho el
   contenedor encogia, las coordenadas no, y overflow:hidden cortaba las dos
   llamadas de la derecha a media palabra. Ahora todo va en % del lienzo,
   asi que la composicion se mantiene a cualquier ancho. */
.orellana-section{
    position: relative;
    width: 100%;
    padding-top: 64px;
    padding-bottom: 64px;
    /* El PNG lleva alfa, asi que debajo va el fondo de la pagina */
    background: var(--bg) url("../img/fondo-laorellana.png") no-repeat center center;
    background-size: cover;
  }

.orellana-head{
    text-align: center;
  }

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

.orellana-head-divider{ width: 162px; height: auto; margin: 20px auto 0; }

.orellana-head p{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
    color: var(--cream);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 20px;
  }

.orellana-visual{
    position: relative;
    width: 100%;
    aspect-ratio: 1280 / 1080;
    margin-top: 62px;
  }

.orellana-photo{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 75%;          /* 810 / 1080 */
    object-fit: cover;
    z-index: 0;
  }

.orellana-connector{
    position: absolute;
    width: 17.73%;        /* 227 / 1280 */
    height: auto;
    z-index: 1;
  }

.connector-premium{     left: 20.31%; top: 10.00%; }  /* 260 / 108 */
.connector-ingrediente{ left: 23.13%; top: 50.09%; }  /* 296 / 541 */
.connector-mercado{     left: 54.92%; top:  7.13%; }  /* 703 /  77 */
.connector-super{       left: 54.92%; top: 59.81%; }  /* 703 / 646 */

.orellana-callout{
    position: absolute;
    z-index: 2;
  }

.orellana-callout h3{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: bold;
    color: var(--gold);
    letter-spacing: 1px;
    text-transform: uppercase;
  }

.orellana-callout .rule.left{ width: 60px; margin: 10px 0 12px; }

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

/* left/top/width en % del lienzo; sin height fija para que el texto nunca
   se recorte aunque cambie el tamano de letra. */
.callout-premium{     left:  3.28%; top:  9.26%; width: 21.02%; text-align: left; }
.callout-mercado{     left: 73.28%; top:  6.02%; width: 21.02%; text-align: left; }
.callout-ingrediente{ left:  3.28%; top: 56.02%; width: 21.02%; text-align: left; }
.callout-super{       left: 73.28%; top: 65.74%; width: 21.02%; text-align: left; }

.orellana-close{
    position: absolute;
    left: 0;
    top: 83.33%;          /* 900 / 1080 */
    width: 100%;
    text-align: center;
    z-index: 2;
  }

.orellana-close .rule{ width: 162px; }

.orellana-close h3{
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: bold;
    color: var(--gold);
    margin-top: 24px;
  }

.orellana-close p{
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: normal;
    color: var(--cream);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 14px;
  }

/* ===== 10 MODULOS ===== */

.modulos-section{
    width: 100%;
    background: #202020;
  }

.modulos-section .container{
    max-width: var(--frame);
  }

.modulos-section .section-head{
    max-width: 1196px;
    margin-bottom: 62px;
  }

.modulos-section .section-head h2{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: bold;
  }

.modulos-list{
    max-width: 896px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

.modulo-item{
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #1A1A1A;
    overflow: hidden;
  }

.modulo-item summary{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 42px 40px;
    cursor: pointer;
  }

.modulo-item summary::-webkit-details-marker{ display: none; }

.modulo-left{
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex: 1 1 auto;
    min-width: 0;
  }

.modulo-num{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: bold;
    color: var(--gold);
    line-height: 1;
  }

.modulo-divider{ width: 1px; height: 44px; background: var(--border); }

.modulo-title{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: bold;
    color: var(--cream);
    flex: 1 1 auto;
    min-width: 0;
  }

.modulo-item[open] .modulo-title{ color: var(--gold); }

.modulo-item summary .chev{ color: var(--gold); transition: transform .2s; flex-shrink: 0; }

.modulo-item[open] summary .chev{ transform: rotate(180deg); }

.modulo-answer{
    border-top: 1px solid var(--border);
    background: #2A2A2A;
    padding: 23px 40px 24px;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
    color: var(--cream);
  }

.modulos-note{
    max-width: 1102px;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
    color: var(--cream);
    margin: 62px auto;
  }

/* ===== ESTO ES PARA TI ===== */

.paraTi-section{
    width: 100%;
    min-height: 945px;
    background: #000 url("../img/esto-es-para-ti.webp") no-repeat center center;
    background-size: cover;
  }

.paraTi-section .section-head h2{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: bold;
  }

.paraTi-section .section-head p{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
  }

.paraTi-section .container{
    max-width: var(--frame);
  }

.paraTi-section .section-head{
    margin-bottom: 48px;
  }

.paraTi-grid{
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    align-items: stretch;
    gap: var(--sp-6);
    width: 1196px;
    max-width: 100%;
    margin: 0 auto;
  }

.paraTi-divider{ width: 2px; height: 360px; object-fit: cover; justify-self: center; align-self: center; }

.paraTi-col h3{
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: normal;
    color: var(--cream);
  }

.paraTi-col h3 .accent{ color: var(--gold); }

.paraTi-col .rule.left{ margin: 18px 0 40px; }

.paraTi-list{
    list-style: none;
    position: relative;
    padding-left: 26px;
  }


.paraTi-list--yes{ --dot-color: #3BA55D; }

.paraTi-list--no{ --dot-color: #C0392B; }



.paraTi-item{
    position: relative;
    padding-bottom: 11px;
    margin-bottom: 12px;
    border-bottom: 1px solid #ffffff;
  }

.paraTi-item:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.paraTi-item::before{
    content: "";
    position: absolute;
    left: -26px;
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dot-color);
  }

/* La linea iba de una pieza a lo largo de toda la lista, asi que seguia
   36px por debajo del ultimo punto. Ahora es un tramo por elemento, del
   punto al siguiente: los -18px de 'bottom' cruzan el margen que los separa
   y funcionan aunque un item cambie de alto. El ultimo no lleva. */
.paraTi-item::after{
    content: "";
    position: absolute;
    left: -22px;
    top: 6px;
    bottom: -18px;
    width: 2px;
    background: var(--dot-color);
  }

.paraTi-item:last-child::after{ display: none; }

.paraTi-item h4{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
    color: var(--cream);
    margin-bottom: 6px;
  }

.paraTi-item p{
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: normal;
    color: var(--muted);
  }

.paraTi-cta{
    text-align: center;
    margin-top: 80px;
  }

.paraTi-cta .eyebrow{
    /* .eyebrow es inline-block y el boton inline-flex: los dos son de linea,
       asi que se colocaban uno al lado del otro. En bloque el boton baja. */
    display: block;
    color: var(--cream);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
    /* El hueco lo pone entero el margen del boton: los 18px que .eyebrow
       trae de serie se sumaban a los 24 del boton y daban 42. */
    margin-bottom: 0;
  }

.paraTi-buy-btn{ font-size: var(--fs-lg); margin-top: 18px; }

/* Este boton lleva dos svg. La regla de base.css pone los dos a 30px, pero
   el primero es el carrito y va mas discreto que la flecha. */
.paraTi-buy-btn svg:first-child{ width: 20px; height: 20px; }

.paraTi-perks{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
  }

.paraTi-perks .cta-perk{ color: #ffffff; }

/* ===== VIDEO DE PRESENTACION + CTA ===== */

/* Antes esta seccion tenia 1040px de alto fijo con el contenido pegado abajo:
   los 695px que sobraban arriba eran el hueco reservado para el video. Ahora
   lo ocupa de verdad, asi que el alto lo dictan sus dos bloques. */
.cta-section{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
  }

/* A sangre: el video ocupa el ancho completo de la seccion, no los 1280px
   del contenedor. El bloque del CTA que va debajo si respeta el marco. */
.curso-video{
    width: 100%;
  }

/* 'aspect-ratio' reserva el alto antes de que cargue nada, asi que al pegar
   el iframe de Bunny la pagina no pega un salto. */
.curso-video-frame{
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--ink);
    overflow: hidden;
  }

/* Bunny copia el iframe con sus propias medidas; se le obliga a llenar el
   marco para que mande la proporcion del contenedor y no la suya. */
.curso-video-frame iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

/* Caratula del video: ocupa el marco entero y es el boton de reproducir. */
.curso-video-play{
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: block;
  }

.curso-video-play img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

.curso-video-icono{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold);
    border-radius: 50%;
    background: rgba(12, 11, 10, 0.45);
    color: var(--gold);
    transition: background-color .25s ease, transform .25s ease;
  }

.curso-video-play:hover .curso-video-icono{
    background: rgba(12, 11, 10, 0.75);
    transform: translate(-50%, -50%) scale(1.06);
  }

.curso-video-play:focus-visible{ outline: 2px solid var(--gold); outline-offset: 4px; }

@media (max-width: 640px){
  .curso-video-icono{ width: 64px; height: 64px; }
}

.cta-band{
    width: 100%;
    background: var(--ink);   /* #1A1A1A */
  }

.cta-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    width: 100%;
    max-width: var(--frame);
    margin: 0 auto;
    height: 345px;
    padding: 80px 0;
  }

.cta-left{ width: 600px; height: 185px; }

.cta-left h1,
.cta-left h2{
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 600;
    color: var(--cream);
  }

.cta-subtitle{
    font-family: var(--font-display);
    color: var(--gold);
    font-size: var(--fs-h3);
    font-weight: normal;
    margin-top: 6px;
  }

.cta-text{
    font-family: var(--font-sans);
    color: var(--muted);
    font-size: var(--fs-base);
    font-weight: normal;
    margin-top: 22px;
  }

.cta-divider{
    width: 1px;
    align-self: stretch;
    background: rgba(197,163,87,0.4);
  }

.cta-right{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 30px; width: 428px; height: 158px; }

.cta-buy-btn{
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: normal;
    width: 287px;
    height: 84px;
    justify-content: center;
    white-space: nowrap;
  }

.cta-perks{
    display:flex;
    align-items:center;
    gap: 20px;
  }

.cta-perk{
    display:flex;
    align-items:center;
    gap: var(--sp-2);
    font-family: var(--font-sans);
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: normal;
    white-space: nowrap;
  }

.cta-perk-icon{
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    filter: url(#gold-tint);
  }

.cta-perk-sep{ width: 1px; height: 32px; background: rgba(197,163,87,0.3); }

/* ===== TU CLIENTE YA EXISTE ===== */

.cliente-section{
    width: 100%;
    background: #1A1A1A;
    overflow: hidden;
  }

.cliente-hero{
    position: relative;
    height: 544px;
    display: flex;
    align-items: center;
    background: #000 url("../img/container.webp") no-repeat center 25%;
    background-size: cover;
    overflow: hidden;
  }

/* El texto arranca donde lo haria el contenedor de 1280px, en vez de pegarse
   al borde de la pantalla. El padding crece solo, sin necesidad de otro div. */
.cliente-hero-inner{
    position: relative;
    z-index: 1;
    padding: 60px 48px;
    padding-inline-start: max(48px, calc((100% - var(--frame)) / 2 + 48px));
    max-width: calc(640px + (100% - var(--frame)) / 2);
  }

.cliente-hero-inner .eyebrow{ font-size: var(--fs-xs); }

.cliente-hero-inner h2{
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: bold;
    color: var(--cream);
    line-height: var(--lh-heading);
    margin-top: 20px;
  }

.cliente-hero-sub{
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: normal;
    color: var(--gold);
    line-height: 1.4;
    margin-top: 22px;
  }

.cliente-body{ padding: 64px 0; }

.cliente-divider-row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    margin-bottom: 56px;
  }

.cliente-divider-row .line{
    flex: 1 1 auto;
    max-width: 300px;
    height: 1px;
    background: rgba(197,163,87,0.4);
  }

.cliente-divider-row h3{
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: normal;
    color: var(--gold);
    white-space: nowrap;
  }

.cliente-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

.cliente-photo{
    width: 100%;
    aspect-ratio: 367.33 / 220;
    background: no-repeat center / cover;
    margin-bottom: 24px;
  }

.cliente-photo-res{ background-image: url("../img/image-res.webp"); }

.cliente-photo-merc{ background-image: url("../img/image-merc.webp"); }

.cliente-photo-vent{ background-image: url("../img/image-vent.webp"); }

.cliente-info{
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
  }

.cliente-icon{ width: 62px; height: 62px; min-width: 62px; object-fit: contain; }

.cliente-info h4{
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 6px;
  }

.cliente-info p{
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: normal;
    color: var(--muted);
  }

.cliente-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
    /* fondo a sangre, contenido dentro de los 1280px */
    padding: 32px max(48px, calc((100% - var(--frame)) / 2 + 48px));
    background: #2A2A2A;
    border-top: 1px solid rgba(255,255,255,0.05);
  }

.cliente-bar-left{
    display: flex;
    align-items: center;
    gap: 20px;
  }

.cliente-mushroom-icon{ width: 62px; height: 62px; object-fit: contain; flex-shrink: 0; }

.cliente-bar-divider{ width: 1px; height: 60px; background: rgba(197,163,87,0.3); flex-shrink: 0; }

.cliente-bar-left p{
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: normal;
  }

.cliente-bar-left .l1{ color: var(--cream); }

.cliente-bar-left .l2{ color: var(--gold); margin-top: 2px; }

.cliente-cta-btn{ font-size: var(--fs-lg); white-space: nowrap; }

.cliente-perks{
    display: flex;
    align-items: center;
    gap: 20px;
  }

/* ===== TESTIMONIOS ===== */

.testimonios-section{
    width: 100%;
    padding: 72px 0 82px;
    background: #0c0b0a url("../img/hero-bg.webp") no-repeat center center;
    background-size: cover;
  }

.testimonios-section .section-head h2{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: bold;
  }

.testimonios-carousel-wrap{
    position: relative;
    max-width: 1102px;
    margin: 56px auto 0;
  }

.testi-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

.testi-arrow img{ width: 42px; height: 42px; object-fit: contain; }

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

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

.testimonios-strip{
    display: flex;
    gap: 32px;
    /* La ventana mide justo 3 tarjetas: 3x254 + 2 huecos de 32 + los 6px de
       relleno de cada lado. Cuadrando el ancho a un numero entero de
       tarjetas nunca asoma media por el borde. */
    width: calc(254px * 3 + 32px * 2 + 12px);
    max-width: 100%;
    min-height: 336px;
    align-items: stretch;
    margin: 0 auto;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

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

.testimonio-card{
    position: relative;
    /* 254px en todas las pantallas. El alto si es libre: 'min-height' deja
       que la tarjeta crezca con su cita y 'align-items: stretch' iguala
       todas a la mas alta. */
    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;
  }

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

.testimonio-avatar{
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: #2A2A2A;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

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

.testimonio-name{
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: bold;
    color: var(--gold);
  }

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

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

.testimonio-quote{
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: normal;
    color: var(--cream);
    line-height: var(--lh-base);
  }

.testimonio-stars{
    /* Iban en 'left:128.66px; top:280px', coordenadas del diseno original
       que daban por hecha una tarjeta de 254x320. Con la tarjeta fluida
       se descolocaban: ahora van ancladas abajo y centradas solas. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    display: flex;
    justify-content: center;
    gap: var(--sp-1);
  }

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

/* ===== EL PAQUETE COMPLETO ===== */

/* La linea bajo el titular de esta seccion, mas larga que la de 70px que
   comparte el resto del sitio. */
.paquete-section .section-head .rule{ width: 120px; }

.paquete-section{
    width: 100%;
    padding: 72px 0;
    background-color: #202020;
    background-image: linear-gradient(to bottom, #191919 0%, #202020 50px);
  }

.paquete-section .section-head{
    width: 1196px;
    max-width: 100%;
    height: 169px;
    margin-bottom: 0;
  }

.paquete-section .section-head h2{
    font-size: var(--fs-display);
    font-weight: bold;
  }

.paquete-section .section-head p{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
  }

.paquete-section .section-head p strong{
    color: var(--gold);
    font-weight: bold;
  }

.paquete-section .container{
    max-width: var(--frame);
  }

.paquete-features{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--sp-4);
    width: 100%;
    max-width: 1196px;
    margin: 62px auto 0;
  }

.paquete-feature{
    flex: 1 1 220px;
    max-width: 258px;
    min-height: 167px;
    text-align: center;
    padding: 0 4px;
  }

.paquete-feature.is-tall{ height: 190px; }

.paquete-feature-icon{
    width: 62px;
    height: 62px;
    object-fit: contain;
    margin: 0 auto 4px;
  }

.paquete-feature h3{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: bold;
    color: var(--gold);
  }

.paquete-feature p{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
    color: var(--muted);
    line-height: 1.35;
    margin-top: 2px;
  }

.paquete-feature-sep{
    width: 1px;
    height: 190px;
    align-self: center;
    object-fit: cover;
  }

.paquete-box{
    width: 1196px;
    max-width: 100%;
    margin: 64px auto 0;
    /* El contorno va en un box-shadow y no en 'border': el navegador redondea
       el grosor de los bordes a pixel entero, asi que 0.8px se dibujaba a 1px.
       El spread del shadow si admite decimales y sigue el radio de la caja.
       Va por fuera y no 'inset' porque la franja dorada de la garantia llega
       al borde inferior y taparia un contorno interior. */
    box-shadow: 0 0 0 0.8px var(--gold);   /* #C5A357 */
    border-radius: 12px;
    overflow: hidden;
    background: var(--card);
  }

.paquete-box-top{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 130px;
    flex: 0 0 auto;
    width: 1079px;
    max-width: 100%;
    height: 254px;
  }

.paquete-price-col{
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 163px;
    height: 254px;
  }

.paquete-price-label{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);   /* #C5A357 */
    /* Encoge la caja al texto para que la linea de abajo mida lo mismo */
    width: fit-content;
  }

/* Linea de adorno, la misma que va bajo otros titulos: 0.8px en dorado. Va
   en un pseudo-elemento en vez de 'border-bottom' porque el navegador
   redondea el grosor de los bordes a pixel entero. */
.paquete-price-label::after{
    content: "";
    display: block;
    height: 0.8px;
    margin-top: 10px;
    background: var(--gold);
  }

.paquete-price{
    display: flex;
    align-items: baseline;
    gap: var(--sp-1);
    font-family: var(--font-display);
    color: var(--gold);
    margin-top: 6px;
  }

.paquete-price-symbol{ font-size: var(--fs-h1); font-weight: 600; }

.paquete-price-num{ font-size: var(--fs-display); font-weight: bold; }

.paquete-price-usd{ font-size: var(--fs-h3); font-weight: bold; margin-left: 6px; }

.paquete-box-divider{
    width: 1px;
    height: 238px;
    align-self: center;
    object-fit: contain;
  }

.paquete-buy-col{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    width: 428px;
    height: 158px;
  }

.paquete-price-block{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* 'min-height' y no 'height': con alto fijo, al apilarse la garantia en
       tres filas el contenido se salia de los 334px y el 'overflow: hidden'
       de .paquete-box lo recortaba. */
    min-height: 334px;
    background: linear-gradient(to top, #352e26 0%, #222222 25%);
  }

.paquete-guarantee{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    flex: 0 0 auto;
    width: 100%;
    min-height: 80px;
    background: var(--gold);
    color: #171512;
    /* Los 14px de arriba y abajo iban antes en un 'padding-block' que este
       atajo borraba: el texto quedaba pegado al canto de la franja. */
    padding: 14px 40px;
    text-align: center;
  }

.paquete-guarantee-icon{ width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }

.paquete-guarantee-title{
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
  }

.paquete-guarantee-text{
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: normal;
  }

.paquete-footnote{
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: normal;
    color: var(--muted);
    text-align: center;
    margin-top: 24px;
  }

/* ===== FAQ ===== */

.faq-section{
    padding: 90px 0;
    background: #1A1A1A;
  }

.faq-section .section-head h2{
    font-size: var(--fs-display);
    font-weight: bold;
  }

.faq-list{ max-width: 900px; margin: 0 auto; display:flex; flex-direction:column; gap: var(--sp-3); }

/* Sin relleno propio: lo llevan el summary y la respuesta. Con el relleno
   aqui, esa banda de 22x26px quedaba fuera del <summary> y pulsarla no abria
   nada; solo respondia el texto. */
.faq-item{
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #202020;
  }

.faq-item summary{
    list-style: none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--sp-3);
    /* El relleno va aqui para que toda la fila sea zona pulsable */
    padding: 22px 26px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: bold;
    color: var(--cream);
  }

.faq-item[open] summary{ color: var(--gold); }

.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item summary .chev{ color: var(--gold); transition: transform .2s; flex-shrink: 0; }

.faq-item[open] summary .chev{ transform: rotate(180deg); }

.faq-item .answer{
    padding: 0 26px 22px;
    font-family: var(--font-sans);
    color: var(--cream);
    font-size: var(--fs-base);
    font-weight: normal;
  }

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

/* La garantia se apila desde 1024 y no desde 980: en tableta el icono, el
   titulo y el texto en una sola fila quedan demasiado apretados. */
@media (max-width: 1024px){
.paquete-guarantee{ flex-direction: column; gap: var(--sp-2); padding: 24px; }
}

@media (max-width: 980px){
/* CTA final */

.cta-section{ width: 100%; height: auto; }

.cta-container{ flex-direction: column; align-items: flex-start; height: auto; padding: 60px 24px; gap: 30px; }

.cta-left{ width: 100%; height: auto; }.cta-divider{ display: none; }

.cta-right{ width: 100%; height: auto; align-items: flex-start; }

.cta-buy-btn{ width: 100%; height: auto; padding: 18px 30px; white-space: normal; }

.cta-perks{ flex-wrap: wrap; row-gap: var(--sp-2); }

/* El problema */

.problema-section{ width: 100%; height: auto; padding: 60px 24px; }

.problema-header{ width: 100%; height: auto; }.problema-cards{ flex-wrap: wrap; width: 100%; height: auto; }

.problema-card{ width: 100%; height: auto; min-height: 220px; }

.problema-card-content{ height: auto !important; }

.problema-conclusion{ width: 100%; height: auto; }

/* Sistema M20 */

.sistema-section{ width: 100%; height: auto; overflow: visible; }

.sistema-section .section-inner{ flex-direction: column; }

.sistema-inner{ flex: 1 1 auto; width: 100%; height: auto; padding: 70px 24px 40px; }

.sistema-phone-col{ flex: 1 1 auto; width: 100%; padding-top: 0; }

.sistema-titlebox{ width: 100%; height: auto; }.sistema-stats{ flex-wrap: wrap; row-gap: var(--sp-4); }

/* En responsive el numero pasa a la izquierda, con el titulo y la
   descripcion a su derecha. Se resuelve con una rejilla de dos columnas sin
   tocar el marcado: el numero ocupa las dos filas de la izquierda y el h4 y
   el p se apilan en la de la derecha. */
.sistema-stat{
      flex: 1 1 40%;
      padding-right: 20px;
      margin-right: 0;
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: var(--sp-3);
      align-items: center;
    }

.sistema-stat .num{ grid-row: 1 / span 2; margin-bottom: 0; }

.sistema-stat h4{ grid-column: 2; align-self: end; }

.sistema-stat p{ grid-column: 2; align-self: start; }

.sistema-stat h4, .sistema-stat p{ white-space: normal; }

.sistema-community{ flex-wrap: wrap; }

.sistema-perks{ flex-wrap: wrap; row-gap: var(--sp-2); }

.sistema-phone{ width: 220px; margin: 0 auto 40px; }

.sistema-cta-btn{width: 100%; justify-content: center; white-space: normal; }

.sistema-bottom-bar{ position: static; width: 100%; height: auto; flex-wrap: wrap; padding: 24px; gap: var(--sp-3); }

/* La Orellana */

.orellana-section{ width: 100%; height: auto; overflow: visible; padding-bottom: 60px; }.orellana-visual{ height: auto; display: flex; flex-direction: column; gap: 30px; margin-top: 40px; }

.orellana-connector{ display: none; }

.orellana-photo{ position: static; width: 100%; height: auto; aspect-ratio: 1280 / 810; }

.orellana-callout, .callout-premium, .callout-mercado, .callout-ingrediente, .callout-super{
      position: static; width: 100%; height: auto; text-align: left; padding: 0 24px;
    }

.orellana-close{ position: static; width: 100%; padding: 0 24px; }

/* 10 Modulos */.modulo-item summary{ padding: 26px 24px; gap: var(--sp-3); }

.modulo-left{ gap: var(--sp-3); }.modulo-divider{ height: 32px; }.modulo-answer{ padding: 20px 24px; }

/* Esto es para ti */

.paraTi-section{ height: auto; padding: 70px 0; }.paraTi-grid{ grid-template-columns: 1fr; gap: 50px; }

.paraTi-divider{ display: none; }/* Tu cliente ya existe */

.cliente-section{ width: 100%; }

.cliente-hero{ height: auto; min-height: 380px; background-position: center; padding: 60px 0; }

.cliente-hero-inner{ padding: 0 24px; max-width: 100%; }.cliente-body{ padding: 50px 0; }

.cliente-divider-row .line{ max-width: 60px; }

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

.cliente-bar{ justify-content: center; text-align: center; padding: 30px 24px; }

.cliente-bar-left{ flex-direction: column; text-align: center; }

.cliente-bar-divider{ display: none; }

.cliente-perks{ flex-wrap: wrap; justify-content: center; row-gap: var(--sp-2); }

/* Testimonios */

.testimonios-section{ width: 100%; padding: 60px 0; }

.testimonios-strip{ width: calc(254px * 2 + 32px + 12px); }

/* El paquete completo */

.paquete-section{ width: 100%; height: auto; padding: 60px 0 70px; }.paquete-features{ flex-wrap: wrap; row-gap: var(--sp-5); height: auto; margin-top: 50px; }

.paquete-feature, .paquete-feature.is-tall{ flex: 1 1 40%; width: auto; height: auto; }

.paquete-feature-sep{ display: none; }

.paquete-box{ margin-top: 50px; }

.paquete-price-block{ height: auto; }

.paquete-box-top{ flex-direction: column; text-align: center; height: auto; padding: 40px 24px; gap: 28px; }

.paquete-box-divider{ display: none; }

/* FAQ */

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

.faq-item summary{ padding: 20px 22px; }

.faq-item .answer{ padding: 0 22px 20px; }

.faq-item summary{gap: 12px; }}

/* Apiladas en dos filas, la linea vertical entre columnas deja de separar
   nada: la de la derecha queda colgando al final de cada fila. */
@media (max-width: 820px){
.sistema-stat{ border-right: none; padding-right: 0; }

/* El telefono sube justo debajo de las cuatro estadisticas. Para colarlo
   entre los hijos de .sistema-inner sin tocar el marcado, ese contenedor
   pasa a 'display: contents': su caja desaparece y sus hijos se convierten
   en items directos de .section-inner, donde ya se pueden reordenar con
   'order'. Su padding se muda al padre, que es quien los envuelve ahora. */
.sistema-section .section-inner{
      align-items: stretch;
      padding: 70px 24px 40px;
    }

.sistema-inner{ display: contents; }

.sistema-phone-col{ order: 1; margin-top: var(--sp-5); }

.sistema-community{ order: 2; }

.sistema-cta-btn{ order: 3; }

.sistema-perks{ order: 4; }
}

@media (max-width: 640px){.paraTi-perks{ flex-wrap: wrap; row-gap: var(--sp-2); }.testimonio-card{ padding: 24px 24px 54px; }

.testimonios-strip{ width: calc(254px + 12px); }

/* Solo en movil, una debajo de otra */
.sistema-stat{ flex: 1 1 100%; }

/* Y una linea vertical entre el numero y el texto, la misma que separa las
   columnas en escritorio. 'align-self: stretch' hace que la celda del numero
   llene las dos filas para que la linea las cruce entera; el flex de dentro
   mantiene la cifra centrada. */
.sistema-stat .num{
      align-self: stretch;
      display: flex;
      align-items: center;
      padding-right: var(--sp-3);
      border-right: 1px solid rgba(197,163,87,0.3);
    }

/* Los avales, tambien uno debajo de otro y centrados. Las lineas que los
   separaban son verticales: en columna quedarian como guiones sueltos. */
.sistema-perks{
      flex-direction: column;
      align-items: center;
      gap: var(--sp-3);
      margin-top: var(--sp-5);
    }

.sistema-perks .cta-perk-sep{ display: none; }

/* Lo mismo para las filas de .cta-perks (el CTA de arriba y el del paquete).
   Aqui se quedan alineados a la izquierda, como el resto de su columna. */
.cta-perks{ flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

.cta-perks .cta-perk-sep{ display: none; }

/* Y los de 'Tu cliente ya existe', estos centrados. */
.cliente-perks{ flex-direction: column; align-items: center; gap: var(--sp-3); }

.cliente-perks .cta-perk-sep{ display: none; }
}