/*
 SOFT4ALL FREE
 R38.1 — Institutional UI

 Objetivo:
 consolidar la presentacion de paginas informativas e institucionales
 sin alterar contenido ni funcionalidad.
*/

:root{
  --s4-r38-max:1540px;
  --s4-r38-readable:920px;
  --s4-r38-gap:clamp(14px,1.35vw,22px);
  --s4-r38-pad:clamp(20px,2.1vw,34px);
}

/* ---------------------------------------------------------------
   ESTRUCTURA GENERAL
   --------------------------------------------------------------- */

body.s4-r38-institutional main{
  box-sizing:border-box;
}

body.s4-r38-institutional main.w{
  width:min(
    var(--s4-r38-max),
    calc(100% - (var(--s4-gutter) * 2))
  )!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

body.s4-r38-institutional main.w>.card{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

/* ---------------------------------------------------------------
   JERARQUIA TIPOGRAFICA
   --------------------------------------------------------------- */

body.s4-r38-institutional main h1{
  text-wrap:balance;
  letter-spacing:-.035em;
}

body.s4-r38-institutional main h2{
  text-wrap:balance;
  letter-spacing:-.02em;
}

body.s4-r38-institutional main h3{
  text-wrap:balance;
}

body.s4-r38-institutional main p,
body.s4-r38-institutional main li{
  line-height:1.62;
}

body.s4-r38-institutional main p{
  text-wrap:pretty;
}

/* ---------------------------------------------------------------
   CONTENIDO INFORMATIVO
   --------------------------------------------------------------- */

body.s4-r38-institutional main .card{
  border-radius:15px;
}

body.s4-r38-institutional main .card>h1:first-child{
  margin-top:0;
}

body.s4-r38-institutional main .card>h2{
  margin-top:clamp(26px,3vw,42px);
}

body.s4-r38-institutional main .card>ul,
body.s4-r38-institutional main .card>ol{
  padding-left:1.35rem;
}

body.s4-r38-institutional main .card li+li{
  margin-top:.42rem;
}

/* ---------------------------------------------------------------
   NAVEGACION LEGAL / SECUNDARIA
   --------------------------------------------------------------- */

body.s4-r38-institutional main nav.nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin-top:clamp(26px,3vw,42px);
  padding-top:18px;
  border-top:1px solid var(--s4-frame-main);
}

body.s4-r38-institutional main nav.nav a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:7px 11px;
  border:1px solid var(--s4-frame-main);
  border-radius:9px;
  text-decoration:none;
}

body.s4-r38-institutional main nav.nav a:hover,
body.s4-r38-institutional main nav.nav a:focus-visible{
  border-color:rgba(74,169,255,.55);
}

/* ---------------------------------------------------------------
   NOTAS Y METADATOS
   --------------------------------------------------------------- */

body.s4-r38-institutional main .note{
  margin-top:18px;
  opacity:.78;
  font-size:.86rem;
  line-height:1.5;
}

/* ---------------------------------------------------------------
   DETAILS
   R38.1 no los elimina.
   Solo evita apariencia de widget generico.
   Su decision estructural se realiza en R38.2.
   --------------------------------------------------------------- */

body.s4-r38-institutional main details{
  box-sizing:border-box;
}

body.s4-r38-institutional main summary{
  cursor:pointer;
}

/* ---------------------------------------------------------------
   FORMULARIOS
   --------------------------------------------------------------- */

body.s4-r38-institutional main input,
body.s4-r38-institutional main select,
body.s4-r38-institutional main textarea,
body.s4-r38-institutional main button{
  font:inherit;
}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */

@media(max-width:820px){

  body.s4-r38-institutional main.w{
    width:calc(
      100% - 16px -
      var(--s4-safe-left,0px) -
      var(--s4-safe-right,0px)
    )!important;
  }

  body.s4-r38-institutional main nav.nav{
    align-items:stretch;
  }

  body.s4-r38-institutional main nav.nav a{
    justify-content:center;
  }
}

@media(max-width:520px){

  body.s4-r38-institutional main nav.nav{
    display:grid;
    grid-template-columns:1fr;
  }

  body.s4-r38-institutional main nav.nav a{
    width:100%;
    box-sizing:border-box;
  }
}


/* ===============================================================
   SOFT4ALL_R38_2_VISIBLE_INFORMATION
   Privacidad: informacion primaria siempre visible.
   =============================================================== */

body.s4-r38-institutional .s4-r38-privacy-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s4-r38-gap);
}

body.s4-r38-institutional .s4-r38-info-section{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:start;
  min-width:0;
  padding:clamp(22px,2.1vw,32px);
  border:1px solid var(--s4-frame-main);
  border-radius:15px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );
}

body.s4-r38-institutional .s4-r38-section-number{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:none;
  border:1px solid rgba(74,169,255,.34);
  border-radius:11px;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--s4-accent,#4aa9ff);
  background:rgba(74,169,255,.07);
}

body.s4-r38-institutional .s4-r38-info-section h2{
  margin:2px 0 10px;
  font-size:clamp(1.08rem,1.35vw,1.32rem);
  line-height:1.2;
}

body.s4-r38-institutional .s4-r38-info-section p{
  margin:0;
}

body.s4-r38-institutional .s4-r38-info-section p+p{
  margin-top:12px;
}

@media(max-width:900px){

  body.s4-r38-institutional .s4-r38-privacy-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){

  body.s4-r38-institutional .s4-r38-info-section{
    grid-template-columns:1fr;
    gap:12px;
    padding:20px;
  }

  body.s4-r38-institutional .s4-r38-section-number{
    width:38px;
    height:38px;
  }
}