@import url(global.css);

:root {
    --max-width8: 80%;

    --max-width7: 70%;

    --font-family: "Inter", sans-serif;

    --font-size-xs: 0.8rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-stm: 0.925rem;     /* 15px */
    --font-size-md: 1rem;         /* 16px */
    --font-size-mt: 1.125rem;     /* 18px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-lgt: 1.375rem;    /* 22px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-xltt:1.7rem;
    --font-size-xlt: 1.875rem;    /* 30px */
    --font-size-xxl: 2rem;        /* 32px */
    --font-size-xxxl: 2.5rem;     /* 40px */
    --font-size-3xl: 3rem;        /* 48px */
    --font-size-4xl: 3.5rem;      /* 56px */

    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    --section-padding_xs: 20px;
    --section-padding: 36px;
    --section-padding-xl: 38px;
    --section-padding-xs2: 40px;
    --section-padding-2: 72px;
    --section-padding-xl2: 76px;

    --line-height-title1: 1.1;
    --line-height-text3: 1.3;
    --line-height-text4: 1.4;
    --line-height-text5: 1.5;
    --line-height-title: 1.4;

    --border-radius-img: 20px;
    --height-img-mov: 40vh;
    --nav-padding: 16px 32px;
    --gap-titulo-conjunto-section-10: 10px;   
    --gap-titulo-conjunto-section-20: 30px;
    --gap-titulo-conjunto-section-30: 40px;
    --gap-titulo-conjunto-section-40: 40px;   
    --gap-titulo-conjunto-section-60: 60px; 
    --gap-card-text-img: 16px; 
    --gap-card-text-btn: 20px; 
    --gap-card-text-title: 12px; 
    --gap-nav: 60px; 
    --gap-logo-empresas: 120px;
    --gap-item-img: 30px;
    --gap-info-producto: 15px;
    --gap-bottom-section: 30px;
    --border-img: 20px;
    --height-header: 66px;
    --height-logo: 200px;
    --gap-logo-empresas: 7.5rem;                     /* 120px to rem */
    --gap-item-img: 1.875rem;                        /* 30px to rem */
    --gap-info-producto: 0.9375rem;                  /* 15px to rem */
    --gap-bottom-section: 1.875rem;                  /* 30px to rem */
    --border-img: 20px;
    --height-header: 4.125rem;                       /* 66px to rem */
    --height-logo: 12.5rem;                          /* 200px to rem */
    --gap-nav: 3.75rem;                              /* 60px to rem */
    --text-deco: underline;

    --letter-space1: 0.1px;
    --letter-space2: 0.2px;
    --letter-space3: 0.3px;
    --letter-space4: 0.4px;
    --letter-space5: 0.5px;
    --letter-space6: 0.6px;
    --letter-space7: 0.7px;
    --letter-space8: 0.8px;
    --letter-space10: 0.10px;
    --letter-space-1:-0.374px;

    --border-radius-btn-mas-compra: 980px;
    --padding-btn-mas-compra: 11px 21px;
    --font-size-btn-mas-compra: 1rem;
    --color-btn-compra: white; 

    --gap-btn-mas-compra: 30px;           

    --line-hei: 28px; 
    --max-width8: 80%;
}


@media (min-width: 720px) {
    html {
        font-size: 22px; 
    }

    :root{
        --section-size-xxl: 2.4rem;
        --section-padding: 60px;
        --padding-btn-mas-compra: 12px 24px;
        --font-size-mt: 0.8rem;
        --font-weight-regular: 400;
    }

    /* --------------------------------------- */
    /* ---- pagina inicio -------------------- */
    /* --------------------------------------- */


    /* ---------- seccion navbar --------------- */

    .header_container{
        position: fixed;
        height: 7vh;
    }

    .navbar {
        top: 7vh;            
    }

    .logo{
        height: 28px;
    }

    .item_submenu {
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-medium);
    }


    /* ---------- seccion hero --------------- */
    
    .hero_info{
        padding-top: 140px;
    }

    .titulo_hero{
        font-size: var(--font-size-xxl);
    }
    
    .texto_hero{
        font-weight: var(--font-weight-regular);
    }

    .precio_terapro{
        font-weight: var(--font-weight-medium);
    }
    
    /* ---------- seccion presentacion --------------- */

    .seccion_simviosis{
        padding-top: var(--section-padding-2);
        padding-bottom: var(--section-padding);
    }

    .texto_sim{
        font-size: var(--font-size-stm);
        width: 80%;
    }

    .mid_sim{
        max-width: var(--max-width-1);
        width: 80%; 
        height: 60vh;
        border-radius: var(--border-radius-img);
    }

    /* ---------- seccion terapias --------------- */
    
    .sub_terapias{
        font-size: var(--font-size-mt);
      }

      .imagen_terapia{
        height: clamp(520px, 42vh, 380px);
      }

    .texto_terapia{
        font-size: var(--font-size-sm);
      }


    /* ---------- seccion terapro ------------------- */

    .container_terapro {
        padding: 80px 60px 80px;
        gap: var(--gap-titulo-conjunto-section-20);
    }

    .titulo_terapro {
        font-size:  var(--font-size-xxxl);
    }
    
    .texto_terapro {
      font-size:  var(--font-size-md);
    }

    .beneficios_terapro {
        gap: 80px;
    }

    /* ---------- seccion facilidades ------------------- */

    .content_facil {
        padding: 90px 10px;
    }

    .facil_features_inside {

        gap: 60px;
    }

    .facil_feature_item h3 {
        margin-bottom: 6px;
    }

    /* ------------ seccion lab ------------------ */

    .seccion_lab{
        padding-top: 120px;
        padding-bottom: var(--section-padding-2);
    }

    /* ------ footer ------------------------------------ */

    .footer { 
        margin-top: 100px;
    }

    .footer_container {
        gap: 40px;
    }

    .footer_section {
        gap: 10px;
    }

    .footer_socials {
        gap: 60px;
    }

    .social_btn img {
        width: 60px;
        height: 60px;
    }

    .footer_tel {
        font-size:26px;
    }

    /* -------------------------------
   DESKTOP: sacar slider y pasar a GRID
--------------------------------- */
@media (min-width: 1024px){

    /* el contenedor ya no scrollea */
    .conjunto_terapias{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 26px;
      width: 100%;
  
      overflow-x: visible;
      overflow-y: visible;
      scroll-snap-type: none;
      padding-bottom: 0;
    }
  
    /* cada card ocupa una celda del grid */
    .link_terapia{
      flex: initial;              /* anula flex: 0 0 84% */
      width: 96%;
      scroll-snap-align: unset;
      align-items: stretch;       /* mejor en desktop */
      margin: 0 auto;
    }
  
    .imagen_terapia{
      width: 100%;
      height: 320px;              /* podés ajustar */
    }
  
    .item_terapia{
      width: 100%;
    }
  
    /* en desktop no necesitás nav/progress del slider */
    .fp_nav_row{
      display: none;
    }
  }
    
    .conjunto_terapias{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
  
      overflow-x: visible;
      overflow-y: visible;
      scroll-snap-type: none;
      padding-bottom: 0;
    }
  
    .link_terapia{
      flex: initial;
      width: 100%;
      scroll-snap-align: unset;
      align-items: stretch;
    }
  
    .imagen_terapia{
      width: 100%;
      height: 300px;
    }
  
    .item_terapia{
      width: 100%;
    }
  
    .fp_nav_row{
      display: none;
    }
  }