/* RDI Fichas — landing de la suscripción v2 (calco de la maqueta de Nahuel del 15-10-2026).
   1) Las variables y la base tipográfica de su núcleo (src/nucleo/variables.css y typography.css), DENTRO de .sus-main
      para no tocar el resto del sitio (en su repo están en :root y en body).
   2) Lo de src/nucleo/animaciones.css que usa la página (destellos, arcoíris, onda, lluvia, data-anima, rdi-hunde).
   3) Su publicado/suscripcion/styles.css, tal cual.
   Generado por herramientas/landing-v2/armar-css.py: si Nahuel manda otra versión, se vuelve a generar. */
/* Las medidas en rem de su maqueta se pasaron a px con SU base (16 px): el sitio tiene la letra base en 17 px (Astra) y
   todo salía un 6 % más grande, con otros cortes de renglón que los de sus capturas. */

.sus-main{--rincon-pink:        #F25C92;  
    --rincon-pink-astra:  #EB5C91;  
    --rincon-pink-light:  #F79DBE;  
    --rincon-pink-soft:   #FAC4D8;  
    --rincon-pink-mid:    #FF6FA3;  
    --rincon-pink-alt:    #F27AA5;  
    --rincon-fuchsia:     #E61F67;  
    --rincon-fuchsia-2:   #E20857;  
    --rincon-magenta:     #C4017B;  
    --rincon-yellow:      #FFAB1B;  

    
    --marca-amarillo-base:  #FAE9B5;
    --marca-amarillo:       #F7DA83;
    --marca-amarillo-focal: #F2C230;
    --marca-verde-base:     #C8FFFD;
    --marca-verde:          #A4FFFB;
    --marca-verde-focal:    #87E6E2;
    --marca-lila-base:      #DCC3EB;
    --marca-lila:           #C49BDE;
    --marca-lila-focal:     #9173A5;
    
    --marca-amarillo-suave: #FCF3D6;   
    --marca-amarillo-claro: #FDF7E5;   
    --marca-verde-suave:    #E1FFFE;
    --marca-verde-claro:    #ECFFFE;
    --marca-lila-suave:     #ECDEF4;
    --marca-lila-claro:     #F3EAF8;
    --marca-rosa-suave:     #FCDFEA;
    --marca-rosa-claro:     #FDEAF1;

    
    --rincon-dark:        #3A3A3A;  
    --rincon-gray:        #545454;  
    --rincon-gray-2:      #666666;
    --rincon-gray-3:      #4B4F58;  
    --rincon-bg:          #F9F9F9;  
    --rincon-bg-2:        #F4F4F4;  
    --rincon-bg-3:        #F5F5F5;  
    --rincon-white:       #FFFFFF;
    
    --rincon-black:       #000000;

    
    --font-text:    'Natom Pro', 'Baloo 2', system-ui, sans-serif;
    
    --font-title:   'Arbotek Light', 'Natom Pro', 'Quicksand', system-ui, sans-serif;
    --font-display: 'Benny Black', 'Baloo 2', system-ui, sans-serif;
    
    --font-precio:  'Natom Pro', 'Baloo 2', system-ui, sans-serif;

    
    --container:       1200px;   
    --bp-header:       921px;    

    
    --btn-radius:      30px;     
    --btn-pad:         10px 20px;
    --btn-bg:          var(--rincon-pink-astra);
    --btn-color:       #FFFFFF;

    
    --susc:        #EB5C91;   
    --susc-hover:  #E61F67;   
    --susc-borde:  #FAC4D8;
    --susc-bg:     #FFF5F9;   

    --compra:       #9173A5;
    --compra-hover: #7B5F8E;
    --compra-borde: #DCC3EB;
    --compra-bg:    #FAF6FD;

    
    --rdi-lila-base:  var(--susc-borde);
    --rdi-lila:       var(--susc);
    
    --rdi-lila-focal: var(--texto-rosa-fondo);
    --rdi-lila-bg:    var(--susc-bg);
    --rdi-lila-hover: var(--susc-hover);

    
    --susc-boton:          #E20857;  
    --susc-boton-activo:   #BE1856;  
    --compra-boton:        #7B5F8E;  
    --compra-boton-activo: #745788;  
    
    --texto-rosa:          #E20857;  
    
    --texto-rosa-fondo:    #BE1856;  

    
    --rdi-aviso-bg:    #FFF8E9;  
    --rdi-aviso-borde: #FFDFA1;  
    --rdi-aviso-ico:   #D98A00;  
    
    --rdi-aviso-texto: #8F5C00;

    
    
    --linea-separador:  #EFEFEF;   
    --linea-contenedor: #DDDDDD;   
    --linea-control:    #8A8A8A;   
    --campo-fondo:      #FCFCFC;   

    

    
    --texto-11: 11px;  
    --texto-12: 12px;    
    --texto-13: 13px;  
    --texto-14: 14px;   
    --texto-15: 15px;  
    --texto-16: 16px;       
    --texto-17: 17px;  
    --texto-18: 18px;   
    --texto-19: 19px;  
    --texto-20: 20px;    

    
    --titulo-21: 21px; 
    --titulo-22: 22px;  
    --titulo-24: 24px;    
    --titulo-26: 26px;  
    --titulo-28: 28px;   
    --titulo-30: 30px;  
    --titulo-34: 34px;  
    --titulo-38: 38px;  

    

    --texto-sobre-rosa: 19px;
    

    --texto-control: 16px;
    

    
    --texto-legal:     var(--texto-12);  
    --texto-apoyo:     var(--texto-13);  
    --texto-base:      var(--texto-15);  
    --texto-destacado: var(--texto-17);  
    --titulo-item:     var(--texto-18);  
    --titulo-bloque:   var(--titulo-22); 
    --titulo-seccion:  var(--titulo-26); 
    --titulo-portada:  var(--titulo-38); 

    

    

    
    --radio-chico:    12px;

    
    --radio-tarjeta:  16px;

    
    --radio-bloque:   20px;

    
    --radio-grande:   24px;

    
    --radio-pastilla: 999px;   
    --radio-circulo:  50%;     

    

    

    
    --sp-1:  4px;   
    --sp-2:  8px;   
    --sp-3: 12px;   
    --sp-4: 16px;   
    --sp-5: 20px;   
    --sp-6: 24px;   
    --sp-7: 32px;   
    --sp-8: 40px;   
    --sp-9: 60px;   

    

    
    --sp-defecto: var(--sp-4);   
    --sp-campo:   var(--sp-3);   
    --sp-caja:    var(--sp-5);   
    --sp-bloque:  var(--sp-8);   
    --sp-seccion: var(--sp-9);   

    
    
    --toque-min: 44px;}
.sus-main{font-family:var(--font-text);color:var(--rincon-dark);line-height:1.6;background:#FFFFFF}
/* La base va con :where(): en su sistema son reglas de elemento (a, h1, p > a), con la menor prioridad posible, y las
   clases de la landing (.sus-boton, .sus-titulo…) les ganan. Con «.sus-main a» les ganaría la base. */
:where(.sus-main),:where(.sus-main) *,:where(.sus-main) *::before,:where(.sus-main) *::after{box-sizing:border-box}
:where(.sus-main) :is(h1,h2,h3,h4,h5,h6){font-family:var(--font-text);line-height:1.3;margin:0 0 .5em}
:where(.sus-main) a{color:inherit}
:where(.sus-main) :is(p,li,td,dd)>a,:where(.sus-main) .rdi-enlace{color:var(--texto-rosa);text-decoration:underline;text-underline-offset:.18em}
:where(.sus-main) :is(p,li,td,dd)>a:hover,:where(.sus-main) .rdi-enlace:hover{color:var(--rincon-fuchsia)}
:where(.sus-main) button{color:var(--rincon-dark)}
:where(.sus-main) .rdi-ico{display:inline-block;vertical-align:-.22em;flex:none}
.sus-main [hidden]{display:none!important}

/* ---- animaciones (núcleo) ---- */
@media (max-width: 900px){.rdi-js [data-anima="izq"],
    .rdi-js [data-anima="der"]{ transform: translateY(18px); }}
.rdi-js [data-anima]{
    opacity: 0;
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, .68, .35, 1);
    will-change: opacity, transform;
}
.rdi-js [data-anima="subir"]{ transform: translateY(26px); }
.rdi-js [data-anima="bajar"]{ transform: translateY(-22px); }
.rdi-js [data-anima="izq"]{ transform: translateX(-34px); }
.rdi-js [data-anima="der"]{ transform: translateX(34px); }
.rdi-js [data-anima="crecer"]{ transform: scale(.88); }
.rdi-js [data-anima="fundido"]{ transform: none; }
.rdi-js [data-anima="rebote"]{ transform: scale(.6); }
.rdi-js [data-anima].se-ve{
    opacity: 1;
    transform: none;
}
.rdi-js [data-anima="rebote"].se-ve{
    animation: rdi-rebote .6s cubic-bezier(.28, 1.6, .5, 1) both;
}
@keyframes rdi-rebote{
    0%   { opacity: 0; transform: scale(.6); }
    60%  { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}
.rdi-hunde{ transition: transform .12s ease; }
.rdi-hunde:active{ transform: scale(.96); }
.rdi-barra-rellena.se-ve{ width: var(--hasta) !important; }
@media (prefers-reduced-motion: reduce){[data-anima],
    .rdi-js [data-anima].se-ve{
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }}
.rdi-destello, .rdi-destellos{ display: inline-block; vertical-align: middle; flex: none; }
.rdi-lamparita{ display: inline-block; vertical-align: -0.3em; flex: none; }
.rdi-arcoiris{ display: block; }
.rdi-onda{ display: block; width: 100%; color: var(--texto-rosa); }
.rdi-separador{
    display: block;
    margin: 34px auto;
    max-width: var(--container);
    padding: 0 24px;
}
.rdi-lluvia{
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.rdi-lluvia__e{ position: absolute; color: currentColor; }
@media (prefers-reduced-motion: no-preference){.rdi-lluvia__e{ animation: rdi-titilar 4.5s ease-in-out infinite; }.rdi-lluvia__e:nth-child(3n){ animation-delay: -1.5s; animation-duration: 5.6s; }.rdi-lluvia__e:nth-child(3n+1){ animation-delay: -3s;   animation-duration: 6.4s; }}
@keyframes rdi-titilar{
    0%, 100% { transform: scale(.82); opacity: .55; }
    50%      { transform: scale(1.12); opacity: 1; }
}

/* ---- styles.css de la landing ---- */
/* ============================================================
   /suscripcion/ — la landing de la Suscripción Rincón (v2, 6-oct-2026)

   MOBILE FIRST: todo lo de arriba es el celular (360-430 px). Los
   @media de abajo de todo agregan columnas para tablet y escritorio.

   Colores: SOLO tokens de src/nucleo/variables.css y el manual
   (RDI-030). Rosa = suscripción, lila = compra suelta. El rosa manda en
   títulos, botones, bordes y detalles; los fondos de bloque van blancos
   o en un gris apenas tibio (Male, 27-ago: "rosa sobre rosa" no).

   Contraste, medido contra blanco:
     #F25C92 (rosa de marca) ...... 3,12 → solo texto ≥24px, o ≥19px negrita
     #9173A5 (lila focal) ......... 4,04 → solo texto grande
     #7B5F8E (lila apretado) ...... 5,43 → sirve para texto chico
     #BE1856 (rosa de texto) ...... 6,08 → rosa para texto chico
     #3A3A3A / #545454 / #666666 .. 11,4 / 7,5 / 5,7
   ============================================================ */

.sus-main {
    background: var(--rincon-white);
    color: var(--rincon-dark);
    font-family: var(--font-text);
    overflow-x: clip;
}
.sus-ancho { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-5); }
.sus-ancho--angosto { max-width: 760px; }
.sus-centro { text-align: center; }

/* ---------- títulos y textos de sección ---------- */
.sus-titulo {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: var(--titulo-26);
    line-height: 1.25;
    letter-spacing: .5px;
    color: var(--rincon-pink);          /* ≥24px: el rosa de marca pasa */
    margin: 0 0 var(--sp-3);
    text-wrap: balance;
}
.sus-sub {
    font-size: var(--texto-17);
    line-height: 1.55;
    color: var(--rincon-gray);
    margin: 0 auto var(--sp-7);
    max-width: 620px;
}
.sus-texto {
    font-size: var(--texto-17);
    line-height: 1.65;
    color: var(--rincon-gray);
    margin: 0 0 var(--sp-4);
}
.sus-texto--fuerte { color: var(--rincon-dark); font-weight: 700; }
.sus-titulo-chico {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: var(--titulo-24);
    color: var(--compra);               /* lila focal, ≥24px */
    text-align: center;
    margin: var(--sp-8) 0 var(--sp-5);
}

.sus-seccion { padding: 48px 0; }
.sus-seccion--suave { background: var(--rincon-bg); }
/* sobre el gris, el rosa de marca da 2,97 (sonda de contraste, 6-oct):
   el título usa el rosa de texto de la casa, que pasa */
.sus-seccion--suave .sus-titulo { color: var(--texto-rosa); }
.sus-main .sus-separador { max-width: 520px; padding: 0 var(--sp-5); }
.sus-main .sus-separador .rdi-onda { color: var(--rincon-pink-light); }   /* la onda de la casa trae el rosa de texto: acá va más suave */
.sus-main .sus-separador--amarillo .rdi-onda { color: var(--marca-amarillo); }
.sus-titulo__destello { color: var(--marca-amarillo-focal); vertical-align: middle; margin: 0 6px; }
.sus-titulo__destello + .sus-titulo__destello, .sus-titulo .sus-titulo__destello:last-child { color: var(--marca-lila); }
.sus-seccion--estrellas { position: relative; overflow: hidden; color: var(--rincon-pink-soft); }
.sus-seccion--estrellas > *:not(.rdi-lluvia) { position: relative; z-index: 1; color: var(--rincon-dark); }
.sus-arco--chico { margin: var(--sp-8) 0 calc(-1 * var(--sp-4)); }

/* ---------- la chapita "Suscripción Rincón" ---------- */
.sus-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--sp-4);
    padding: 6px 14px;
    border: 1.5px solid var(--susc-borde);
    border-radius: var(--radio-pastilla);
    background: var(--rincon-white);
    color: var(--texto-rosa-fondo);     /* rosa de texto chico: 6,08 */
    font-size: var(--texto-13);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* ---------- el botón (uno solo en toda la página) ----------
   El rosa del manual con texto blanco grande y en negrita (RDI-030 §3 bis,
   decisión del 3-sep): 19px bold = texto grande, y ahí 3,12 alcanza. */
.sus-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 14px 34px;
    border-radius: var(--btn-radius);
    background: var(--rincon-pink);
    color: var(--rincon-white);
    font-family: var(--font-text);
    font-size: var(--texto-sobre-rosa);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(242, 92, 146, .28);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sus-boton::after {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* animaciones.css carga despues y su .rdi-hunde pisa la transicion: se
   repite con mas especificidad para no perder el color ni la sombra. */
.sus-boton.rdi-hunde { transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.sus-boton:hover { background: var(--susc-hover); color: var(--rincon-white); transform: translateY(-1px); }
.sus-main:focus { outline: none; }
.sus-boton:focus-visible,
.sus-barra__boton:focus-visible,
.sus-barra__cerrar:focus-visible,
.sus-forma__enlace:focus-visible,
.sus-faq__item summary:focus-visible,
.sus-faq__mas a:focus-visible {
    outline: 3px solid var(--compra-hover);
    outline-offset: 3px;
}
.sus-boton--ancho { width: 100%; }

/* ---------- los tres tranquilizadores ---------- */
.sus-confianza {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.sus-confianza li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--texto-14);
    color: var(--rincon-gray);
}
.sus-confianza svg { color: var(--compra-hover); flex: 0 0 auto; }

/* ================================================== 1. HERO */
.sus-hero {
    position: relative;
    overflow: hidden;
    padding: 28px 0 40px;
    background: linear-gradient(180deg, #FFFBFD 0%, #FFFFFF 60%);   /* tan claro que el rosa de marca sigue pasando 3:1 */
    color: var(--rincon-pink-light);    /* de acá toman color las estrellitas */
}
.sus-hero > *:not(.rdi-lluvia) { position: relative; z-index: 1; }
.sus-hero__grilla { display: grid; gap: var(--sp-7); }
.sus-hero__texto { color: var(--rincon-dark); }
.sus-hero__titulo {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 30.4px;                 /* 30,4px en el celular */
    line-height: 1.2;
    letter-spacing: .5px;
    color: var(--rincon-pink);
    margin: 0 0 var(--sp-4);
    text-wrap: balance;
}
/* Dos fuentes (6-oct): la entrada en Natom, la promesa en Blenny. */
.sus-hero__entrada {
    display: block;
    font-family: var(--font-text);
    font-weight: 700;
    font-size: .74em;
    letter-spacing: 0;
    line-height: 1.25;
    color: var(--compra-hover);         /* lila apretado: 5,43 */
    margin-bottom: 4px;
}
.sus-hero__acento { display: block; color: var(--rincon-pink); }   /* Blenny grande: el rosa de marca pasa */
.sus-hero__bajada {
    font-size: var(--texto-17);
    line-height: 1.6;
    color: var(--rincon-gray);
    margin: 0 0 var(--sp-5);
    max-width: 560px;
}
.sus-hero__bajada strong { color: var(--rincon-dark); }

/* el precio: Natom, nunca Benny (los números se leen o no se leen) */
.sus-precio { margin: 0 0 var(--sp-5); }
.sus-precio__monto {
    font-family: var(--font-precio);
    font-weight: 700;
    font-size: 41.6px;
    line-height: 1.05;
    color: var(--rincon-pink);
    margin: 0;
}
.sus-precio__monto span {
    font-size: var(--texto-17);
    font-weight: 700;
    color: var(--rincon-gray);
    margin-left: 4px;
}
.sus-precio__usd {
    font-size: var(--texto-14);
    color: var(--rincon-gray-2);
    margin: 6px 0 0;
}
.sus-precio__usd strong { color: var(--rincon-dark); }

/* LAS SEIS PORTADAS, TIRADAS SOBRE LA MESA (Nahuel y Male, 6-oct: «como
   cuando eran tres, con un orden medio desordenado, y un poco más grandes»).
   Superpuestas y giradas; las posiciones van en % para que el desorden sea
   el mismo en cualquier ancho. En el celular va DEBAJO del botón. */
.sus-hero__visual {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / .92;
    margin: var(--sp-4) auto 0;
}
.sus-tarjeta {
    position: absolute;
    width: 41%;
    margin: 0;
    border-radius: var(--radio-tarjeta);
    border: 5px solid var(--rincon-white);
    overflow: hidden;
    background: var(--rincon-bg);
    box-shadow: 0 12px 28px rgba(145, 115, 165, .24);
    aspect-ratio: 1;
}
.sus-tarjeta img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sus-tarjeta--1 { top: 2%;  left: 0;   transform: rotate(-7deg); z-index: 1; }
.sus-tarjeta--2 { top: 6%;  left: 30%; transform: rotate(4deg);  z-index: 3; }
.sus-tarjeta--3 { top: 0;   left: 59%; transform: rotate(-3deg); z-index: 2; }
.sus-tarjeta--4 { top: 50%; left: 5%;  transform: rotate(5deg);  z-index: 4; }
.sus-tarjeta--5 { top: 54%; left: 35%; transform: rotate(-5deg); z-index: 5; }
.sus-tarjeta--6 { top: 47%; left: 62%; transform: rotate(7deg);  z-index: 4; }
.sus-hero__destello {
    position: absolute;
    top: -14px;
    right: 6%;
    color: var(--marca-amarillo-focal);
    z-index: 3;
}
.sus-hero__destello--2 { top: auto; right: auto; bottom: -12px; left: 2%; color: var(--marca-lila); }

/* ================================================== COLORES POR BLOQUE
   Pedido de Male (6-oct, aclarado ese mismo día): el color de la marca va
   en el CÍRCULO del ícono y en el BORDE de la tarjeta; el fondo, blanco. */
.sus-color--amarillo { --c-suave: var(--marca-amarillo-suave); --c-claro: var(--marca-amarillo-claro); --c-fuerte: var(--marca-amarillo); }
.sus-color--verde    { --c-suave: var(--marca-verde-suave);    --c-claro: var(--marca-verde-claro);    --c-fuerte: var(--marca-verde); }
.sus-color--lila     { --c-suave: var(--marca-lila-suave);     --c-claro: var(--marca-lila-claro);     --c-fuerte: var(--marca-lila); }
.sus-color--rosa     { --c-suave: var(--marca-rosa-suave);     --c-claro: var(--marca-rosa-claro);     --c-fuerte: var(--rincon-pink-light); }

/* ================================================== 2. LA PROPUESTA */
.sus-mas { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.sus-mas__item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 2px var(--sp-4);
    align-items: start;
    text-align: left;
    padding: var(--sp-5);
    border: 2px solid var(--c-fuerte, var(--linea-separador));
    border-radius: var(--radio-bloque);
    background: var(--rincon-white);   /* el color va en el circulo y el borde (6-oct) */
}
.sus-mas__ic {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radio-circulo);
    background: var(--c-fuerte, var(--compra-bg));
    color: var(--rincon-dark);
}
.sus-mas__item h3 {
    font-size: var(--titulo-item);
    line-height: 1.35;
    color: var(--rincon-dark);
    margin: 4px 0 2px;
}
.sus-mas__item p { font-size: var(--texto-15); line-height: 1.55; color: var(--rincon-gray); margin: 0; }

/* ================================================== 3. QUÉ APRENDÉS */
.sus-cats { display: grid; gap: var(--sp-3); }
.sus-cat {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3);
    border-radius: var(--radio-tarjeta);
    background: var(--rincon-white);
    box-shadow: 0 2px 10px rgba(58, 58, 58, .05);
}
.sus-cat__foto {
    border-radius: var(--radio-chico);
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--rincon-bg-3);
}
.sus-cat__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sus-cat h3 {
    font-size: var(--titulo-item);
    color: var(--rincon-dark);
    margin: 0 0 4px;
}
.sus-cat p { font-size: var(--texto-14); line-height: 1.5; color: var(--rincon-gray); margin: 0; }

.sus-extra {
    margin: var(--sp-7) auto 0;
    max-width: 720px;
    display: grid;
    gap: var(--sp-3);
}
.sus-extra p {
    margin: 0;
    font-size: var(--texto-15);
    line-height: 1.6;
    color: var(--rincon-gray);
    text-align: center;
}
.sus-extra strong { color: var(--rincon-dark); }

/* ================================================== 4. RESULTADO */
.sus-resultados {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}
.sus-resultados li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radio-tarjeta);
    border: 2px solid var(--c-fuerte, var(--linea-separador));
    background: var(--rincon-white);
    font-size: var(--texto-15);
    line-height: 1.5;
    color: var(--rincon-gray);
}
.sus-resultados strong { display: block; color: var(--rincon-dark); font-size: var(--texto-16); }
.sus-resultados__ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radio-circulo);
    background: var(--c-fuerte, var(--compra-bg));
    color: var(--rincon-dark);
}

.sus-personas { display: grid; gap: var(--sp-3); }
.sus-persona {
    padding: var(--sp-5);
    border-radius: var(--radio-tarjeta);
    background: var(--compra-bg);
}
.sus-persona h4 {
    font-size: var(--texto-17);
    color: var(--compra-hover);         /* lila apretado: 5,43, sirve en chico */
    margin: 0 0 6px;
}
.sus-persona p { font-size: var(--texto-15); line-height: 1.55; color: var(--rincon-dark); margin: 0; }

/* ================================================== 5. CONFIANZA */
.sus-seccion--confianza { padding-top: 40px; }
.sus-arco { display: flex; justify-content: center; margin-bottom: var(--sp-2); }
.sus-numeros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
}
.sus-numeros p {
    margin: 0;
    padding: var(--sp-5) var(--sp-3);
    border-radius: var(--radio-tarjeta);
    border: 1.5px solid var(--susc-borde);
}
.sus-numeros strong {
    display: block;
    font-family: var(--font-precio);
    font-size: var(--titulo-24);
    line-height: 1.15;
    color: var(--rincon-pink);          /* 24px negrita: texto grande */
}
.sus-numeros span { display: block; font-size: var(--texto-14); color: var(--rincon-gray); margin-top: 4px; }

/* ================================================== 6. CÓMO FUNCIONA */
.sus-pasos {
    list-style: none;
    margin: var(--sp-5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-5);
}
.sus-paso {
    position: relative;
    display: grid;
    align-content: start;   /* que los tres titulos queden a la misma altura */
    grid-template-columns: 48px 1fr;
    gap: 2px var(--sp-4);
    align-items: start;
}
.sus-paso__n {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radio-circulo);
    background: var(--rincon-pink);
    color: var(--rincon-white);
    font-family: var(--font-precio);
    font-size: var(--texto-sobre-rosa);   /* blanco sobre rosa: 19px negrita */
    font-weight: 700;
}
.sus-paso h3 { font-size: var(--titulo-item); color: var(--rincon-dark); margin: 10px 0 2px; }
/* LAS FLECHAS DE UN PASO AL OTRO (6-oct). En el celular, una línea punteada
   que baja de un número al siguiente y termina en punta; desde tablet, una
   flecha punteada de costado entre los círculos. */
.sus-paso:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 54px;
    bottom: -18px;
    width: 14px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M2 2l5 6 5-6' fill='none' stroke='%23F25C92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") bottom center / 14px 10px no-repeat,
        linear-gradient(var(--rincon-pink-light) 50%, transparent 0) top center / 2px 8px repeat-y;
    background-clip: content-box;
    padding-bottom: 0;
}
.sus-paso p { font-size: var(--texto-15); line-height: 1.55; color: var(--rincon-gray); margin: 0; }
.sus-pasos__pie {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: var(--sp-7) auto 0;
    padding: var(--sp-4) var(--sp-5);
    max-width: 640px;
    border-radius: var(--radio-tarjeta);
    background: var(--rincon-bg);
    font-size: var(--texto-15);
    line-height: 1.55;
    color: var(--rincon-gray);
}
.sus-pasos__pie svg { color: var(--compra-hover); flex: 0 0 auto; margin-top: 2px; }
.sus-pasos__pie strong { color: var(--rincon-dark); }

/* ================================================== 7. LA OFERTA */
.sus-seccion--oferta { padding-top: 24px; }
.sus-oferta {
    max-width: 920px;
    margin: 0 auto;
    border: 2px solid var(--susc-borde);
    border-radius: var(--radio-grande);
    background: var(--rincon-white);
    box-shadow: 0 18px 44px rgba(242, 92, 146, .12);
    overflow: hidden;
}
.sus-oferta__cabeza { padding: var(--sp-6) var(--sp-5) 0; text-align: center; }
.sus-chip--claro { margin-bottom: var(--sp-3); }
.sus-oferta__titulo {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: var(--titulo-24);
    line-height: 1.25;
    letter-spacing: .5px;
    color: var(--rincon-pink);
    margin: 0;
    text-wrap: balance;
}
.sus-oferta__cuerpo { display: grid; }
.sus-oferta__lista { display: flex; flex-direction: column; justify-content: center; }
.sus-incluye {
    list-style: none;
    margin: 0;
    padding: var(--sp-6) var(--sp-5) var(--sp-4);
    display: grid;
    gap: var(--sp-3);
}
.sus-incluye li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--texto-16);
    line-height: 1.5;
    color: var(--rincon-gray);
}
.sus-incluye strong { color: var(--rincon-dark); }
.sus-incluye svg { color: var(--texto-rosa-fondo); flex: 0 0 auto; margin-top: 3px; }
/* el último renglón es la promesa abierta (beneficios para miembros): va
   un tono más suave que lo que ya está confirmado */
.sus-incluye li:last-child { font-size: var(--texto-15); }
.sus-oferta__cierre {
    padding: var(--sp-6) var(--sp-5) var(--sp-7);
    background: var(--rincon-white);    /* todo blanco de los dos lados (6-oct) */
    border-top: 1px solid var(--susc-borde);
    text-align: center;
}
.sus-oferta__cierre .sus-precio__monto { font-size: 38.4px; }   /* sobre blanco, el rosa de marca como el resto de los precios */
.sus-oferta__cierre .sus-precio { margin-bottom: var(--sp-5); }   /* mensual, dolares y anual juntos; el aire va despues del bloque (14-oct) */
.sus-oferta__ver { margin: 0; padding: 0 var(--sp-5) var(--sp-6); font-size: var(--texto-15); }
.sus-oferta__ver a, .sus-forma__enlace--susc { color: var(--texto-rosa-fondo); font-weight: 700; text-underline-offset: 3px; }
.sus-oferta__ver a:focus-visible { outline: 3px solid var(--compra-hover); outline-offset: 3px; }
.sus-oferta__nota {
    font-size: var(--texto-13);
    line-height: 1.55;
    color: var(--rincon-gray);
    margin: var(--sp-4) 0 0;
}

/* ================================================== 8. LO COMPRADO ES TUYO */
.sus-dos { display: grid; gap: var(--sp-4); max-width: 920px; margin: 0 auto; }
.sus-caja {
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--radio-tarjeta);
    border-left: 5px solid;
}
.sus-caja--compra { background: var(--compra-bg); border-color: var(--compra); }
.sus-caja--susc { background: var(--susc-bg); border-color: var(--rincon-pink); }
.sus-caja__etiqueta {
    font-size: var(--texto-13);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.sus-caja--compra .sus-caja__etiqueta { color: var(--compra-hover); }
.sus-caja--susc .sus-caja__etiqueta { color: var(--texto-rosa-fondo); }
.sus-caja h3 { font-size: var(--texto-20); color: var(--rincon-dark); margin: 0 0 6px; }
.sus-caja p { font-size: var(--texto-15); line-height: 1.6; color: var(--rincon-gray); margin: 0; }

/* ================================================== 9. LAS TRES FORMAS */
.sus-formas { display: grid; gap: var(--sp-4); }
.sus-forma {
    position: relative;
    padding: var(--sp-6) var(--sp-5);
    border-radius: var(--radio-bloque);
    border: 1.5px solid var(--linea-contenedor);
    background: var(--rincon-white);
}
.sus-forma--susc {
    border: 2px solid var(--rincon-pink);
    box-shadow: 0 12px 30px rgba(242, 92, 146, .14);
}
.sus-forma__cinta {
    position: absolute;
    top: -13px;
    left: var(--sp-5);
    margin: 0;
    padding: 4px 14px;
    border-radius: var(--radio-pastilla);
    background: var(--texto-rosa-fondo);    /* blanco encima: 6,08 */
    color: var(--rincon-white);
    font-size: var(--texto-12);
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.sus-forma h3 { font-size: var(--texto-20); color: var(--rincon-dark); margin: 0 0 6px; }
.sus-forma__acceso {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--sp-3);
    font-size: var(--texto-14);
    font-weight: 700;
}
.sus-forma--compra .sus-forma__acceso { color: var(--compra-hover); }
.sus-forma--susc .sus-forma__acceso { color: var(--texto-rosa-fondo); }
.sus-forma__cita { font-size: var(--texto-15); line-height: 1.55; color: var(--rincon-gray); font-style: italic; margin: 0; }
.sus-forma__enlace {
    display: inline-block;
    margin-top: var(--sp-3);
    font-size: var(--texto-15);
    font-weight: 700;
    color: var(--compra-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
    min-height: 24px;
}
.sus-forma__enlace:hover { color: var(--compra-boton-activo); }

/* ================================================== 10. PREGUNTAS */
.sus-faq { margin-top: var(--sp-6); }
.sus-faq__grupo {
    font-size: var(--texto-13);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--compra-hover);
    margin: 0 0 var(--sp-2);
}
.sus-faq__item { border-bottom: 1px solid var(--linea-separador); }
.sus-faq__item:first-of-type { border-top: 1px solid var(--linea-separador); }
.sus-faq__item summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    min-height: var(--toque-min);
    padding: 14px 40px 14px 0;
    font-size: var(--titulo-item);
    font-weight: 700;
    line-height: 1.4;
    color: var(--rincon-dark);
}
.sus-faq__item summary::-webkit-details-marker { display: none; }
.sus-faq__item summary::after {
    content: "+";
    content: "+" / "";   /* que el lector de pantalla no diga "más" */
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--titulo-24);
    line-height: 1;
    color: var(--rincon-pink);
}
.sus-faq__item[open] summary::after { content: "–"; content: "–" / ""; }
.sus-faq__item p {
    margin: 0 0 var(--sp-4);
    padding-right: 32px;
    font-size: var(--texto-16);
    line-height: 1.6;
    color: var(--rincon-gray);
}
.sus-faq__mas { margin: var(--sp-7) 0 0; text-align: center; font-size: var(--texto-15); color: var(--rincon-gray); }
.sus-faq__mas a { color: var(--texto-rosa-fondo); font-weight: 700; }

/* ================================================== 11. CIERRE */
.sus-cierre {
    position: relative;
    overflow: hidden;
    padding: 56px 0 64px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFBFD 100%);
    border-top: 1px solid var(--susc-borde);
    color: var(--rincon-pink-light);
}
.sus-cierre > *:not(.rdi-lluvia) { position: relative; z-index: 1; }
.sus-cierre__lampara { display: inline-block; color: var(--rincon-pink); margin-bottom: var(--sp-3); }
.sus-cierre__titulo {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: var(--titulo-26);
    line-height: 1.3;
    letter-spacing: .5px;
    color: var(--compra);              /* lila focal, título grande */
    margin: 0 0 var(--sp-5);
    text-wrap: balance;
}
.sus-cierre__titulo span { color: var(--rincon-pink); }
.sus-cierre .sus-precio__monto { font-size: 35.2px; margin-bottom: var(--sp-5); }
.sus-cierre .sus-confianza { justify-content: center; justify-items: center; }

/* ================================================== BOTÓN FLOTANTE (celular)
   Apoyado sobre la barra inferior de la casa (.rdi-barra-inf: 92 px,
   z-index 99, hasta 920 px). No es una segunda barra: es una píldora.
   El cuerpo ya reserva su lugar abajo (body.rdi-con-barra-inf). */
.sus-barra {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 104px;   /* la barra de la casa no suma el area segura: este tampoco */
    z-index: 98;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    pointer-events: none;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .22s ease, transform .22s ease;
}
.sus-barra > * { pointer-events: auto; }
.sus-barra.se-ve { opacity: 1; transform: translateY(0); }
.sus-barra:not(.se-ve) > * { pointer-events: none; }
.sus-barra__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 24px;
    border-radius: var(--btn-radius);
    background: var(--rincon-pink);
    color: var(--rincon-white);
    font-size: var(--texto-sobre-rosa);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 26px rgba(58, 58, 58, .22);
}
.sus-barra__boton:hover { background: var(--susc-hover); color: var(--rincon-white); }
.sus-barra__cerrar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--toque-min);
    height: var(--toque-min);
    border-radius: var(--radio-circulo);
    border: 1px solid var(--susc-borde);
    background: var(--rincon-white);
    color: var(--rincon-gray-2);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(58, 58, 58, .14);
}
@media (min-width: 921px) { .sus-barra { display: none; } }

/* ================================================== 360 px y menos */
/* En el celular el botón ocupa el ancho: es el blanco más fácil para el
   pulgar y así "Quiero empezar a aprender" entra en una línea. */
@media (max-width: 599px) {
    /* EL HERO EN UN ANDROID DE 360x640: con el header (80 px) y la barra de
       abajo de la casa (92 px) quedan ~470 px utiles, y el boton tiene que
       entrar ahi (medido el 6-oct con la barra a la vista). */
    .sus-hero { padding: 16px 0 32px; }
    .sus-chip { margin-bottom: 10px; padding: 4px 12px; }
    .sus-hero__titulo { margin-bottom: 10px; line-height: 1.15; }
    .sus-hero__bajada { margin-bottom: 12px; line-height: 1.5; }
    .sus-precio { margin-bottom: 14px; }
    .sus-precio__monto { font-size: 36.8px; }
    .sus-precio__usd { margin-top: 2px; }
    .sus-boton { width: 100%; padding: 14px 16px; }
    /* en el celular, la propuesta y los resultados van como lista liviana
       y no como tarjetas: la oferta tiene que llegar antes (auditoria UX) */
    .sus-mas { gap: var(--sp-3); }
    .sus-mas__item { padding: var(--sp-4); }
    .sus-mas__ic { width: 44px; height: 44px; }
    .sus-resultados li { padding: var(--sp-3) var(--sp-4); }
}
@media (max-width: 374px) {
    .sus-ancho { padding: 0 var(--sp-4); }
    .sus-hero__titulo { font-size: 25.6px; }
    .sus-precio__monto { font-size: 33.6px; }
    .sus-boton { padding: 14px 12px; }
    .sus-boton::after { display: none; }   /* a 360 px la flecha no entra */
    .sus-barra__boton { padding: 12px 16px; }
}

/* ================================================== tablet: 600 px en adelante */
@media (min-width: 600px) {
    .sus-seccion { padding: 60px 0; }
    .sus-titulo { font-size: var(--titulo-30); }
    .sus-mas { grid-template-columns: repeat(3, 1fr); }
    .sus-mas__item { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: var(--sp-6); }
    .sus-mas__ic { grid-row: auto; margin-bottom: var(--sp-3); }
    .sus-cats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
    .sus-resultados { grid-template-columns: repeat(2, 1fr); }
    .sus-personas { grid-template-columns: repeat(3, 1fr); }
    .sus-numeros strong { font-size: var(--titulo-28); }
    .sus-pasos { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
    .sus-paso { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .sus-paso__n { grid-row: auto; }
    .sus-paso:not(:last-child)::after {
        left: calc(50% + 34px);
        right: auto;
        top: 14px;
        bottom: auto;
        width: calc(100% - 68px + var(--sp-6));
        height: 20px;
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M2 2l6 5-6 5' fill='none' stroke='%23F25C92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 10px 14px no-repeat,
            linear-gradient(90deg, var(--rincon-pink-light) 50%, transparent 0) left center / 8px 2px repeat-x;
    }
    .sus-dos { grid-template-columns: 1fr 1fr; }
    .sus-formas { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

/* ================================================== escritorio: 900 px en adelante */
@media (min-width: 900px) {
    .sus-hero { padding: 56px 0 72px; }
    .sus-hero__grilla { grid-template-columns: 1.1fr .9fr; align-items: center; gap: var(--sp-8); }
    .sus-hero__visual { max-width: 500px; margin: 0 0 0 auto; }
    .sus-hero__titulo { font-size: 46.4px; }
    .sus-precio__monto { font-size: 48px; }
    .sus-confianza { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
    .sus-confianza li { white-space: nowrap; }
    .sus-cats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
    .sus-cat { grid-template-columns: 1fr; padding: 0 0 var(--sp-5); overflow: hidden; align-items: start; }
    .sus-cat__foto { border-radius: 0; aspect-ratio: 4 / 3; }
    .sus-cat__foto img { object-position: center top; }
    .sus-cat__texto { padding: 0 var(--sp-5); }
    .sus-resultados { grid-template-columns: repeat(3, 1fr); }
    .sus-oferta__titulo { font-size: var(--titulo-30); }
    .sus-oferta__cuerpo { grid-template-columns: 1.25fr 1fr; }
    .sus-incluye { padding: var(--sp-7) var(--sp-7) var(--sp-4) var(--sp-8); }
    .sus-oferta__ver { padding: 0 var(--sp-7) var(--sp-7) var(--sp-8); }
    .sus-oferta__cierre {
        border-top: 0;
        border-left: 1px solid var(--susc-borde);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--sp-7);
    }
    .sus-cierre__titulo { font-size: var(--titulo-34); }
    .sus-cierre .sus-confianza { justify-content: center; }
}

/* ================================================== movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .sus-boton, .sus-barra { transition: none; }
    .sus-barra { transform: none; }
    .sus-boton:hover { transform: none; }
}


/* ---- del sitio (no de la maqueta): la burbuja de WhatsApp se esconde mientras se ve la píldora (ver sus-v2.js) ---- */
@media (max-width:920px){.qlwapp{transition:opacity .2s ease,visibility .2s ease}body.sus-barra-visible .qlwapp{opacity:0;visibility:hidden;pointer-events:none}}

/* ---- del sitio: en Astra el <main> va dentro de un contenedor flex y, sin esto, en pantallas anchas se achicaba al
   contenido y quedaba pegado a la izquierda (Felipe, 15-10-2026). La v1 lo resuelve igual (.rdi-ficha { width: 100% }). ---- */
.sus-main{width:100%;max-width:none;flex:1 1 100%;align-self:stretch}

/* Landing sin header ni footer del sitio (rdi-fichas 0.1.9, includes/landing-limpia.php). */
body.sus-limpia{margin:0;background:#fff}
.sus-limpia-marca{display:flex;justify-content:center;align-items:center;padding:14px 16px;background:#F25C92}
.sus-limpia-marca img{display:block;width:120px;height:auto}
.sus-limpia-pie{padding:28px 16px 110px;text-align:center;font:400 13px/1.6 "Natom Pro",Arial,sans-serif;color:#8a8a8a;background:#fff}
.sus-limpia-pie nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:0 0 6px}
.sus-limpia-pie a{color:#7B5F8E;text-decoration:underline}
.sus-limpia-pie p{margin:0}
@media (min-width:768px){.sus-limpia-marca{padding:16px}.sus-limpia-marca img{width:140px}.sus-limpia-pie{padding-bottom:40px}}