/* Hoja de /remedios/. Mismos tokens y las mismas tipografías que la portada
   (docs/ruda/sitio/index.html); las fuentes son los .woff2 de activos/, no se
   pide nada a Google. */

@font-face { font-family:'Caprasimo'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../activos/2f4085c4.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Caprasimo'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../activos/e1ea1e0c.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../activos/8bd7309a.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../activos/c7f9e3c5.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{
  --bg:#f5ead8; --superficie:#ebddc5; --texto:#201e1d; --acento:#c67139;
  --tenue:color-mix(in srgb, #201e1d 62%, transparent);
  --linea:color-mix(in srgb, #201e1d 16%, transparent);
  --r-sm:8px; --r-md:16px; --r-lg:28px;
  --sombra:0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --cuerpo:'Figtree', system-ui, sans-serif;
  --titulo:'Caprasimo', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--texto);
  font-family:var(--cuerpo); font-size:18px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

/* cabecera ---------------------------------------------------------------- */
.cabecera{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 20px; border-bottom:1px solid var(--linea);
  background:color-mix(in srgb, var(--superficie) 60%, transparent);
  position:sticky; top:0; z-index:5;
  backdrop-filter:saturate(1.2) blur(6px);
}
.marca{display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit}
.marca img{border-radius:9px; display:block}
.marca span{font-family:var(--titulo); font-size:19px; letter-spacing:.01em}
.miga{font-size:14px; color:var(--tenue)}
.miga a{color:var(--tenue)}

/* caja -------------------------------------------------------------------- */
main{max-width:720px; margin:0 auto; padding:34px 20px 8px}

h1{
  font-family:var(--titulo); font-weight:400; line-height:1.14;
  font-size:clamp(28px, 5.2vw, 40px); margin:.1em 0 .55em; text-wrap:balance;
}
h2{
  font-family:var(--titulo); font-weight:400; line-height:1.2;
  font-size:clamp(21px, 3.4vw, 27px); margin:2.1em 0 .5em; text-wrap:balance;
}
h3{font-size:19px; font-weight:600; margin:1.7em 0 .35em; line-height:1.35}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.2em; padding-left:1.3em}
li{margin:.34em 0}
strong{font-weight:600}
a{color:var(--acento); text-decoration:underline; text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}

article h2:first-of-type{margin-top:1.3em}

/* llamada a la app -------------------------------------------------------- */
.boton{
  display:inline-block; background:var(--acento); color:#fff; text-decoration:none;
  font-weight:600; padding:13px 22px; border-radius:999px; box-shadow:var(--sombra);
  line-height:1.3;
}
.boton:hover{filter:brightness(1.06)}
.llamada{margin:1.3em 0 1.8em}

.cierre{
  margin:44px 0 10px; padding:26px 24px; border-radius:var(--r-lg);
  background:var(--superficie);
}
.cierre h2{margin-top:0}
.nota{font-size:15px; color:var(--tenue); margin-bottom:0}

/* avisos y fuentes -------------------------------------------------------- */
.aviso{
  margin:38px 0 0; padding:15px 18px; font-size:15px; line-height:1.6;
  color:var(--tenue); border-left:3px solid var(--acento);
  background:color-mix(in srgb, var(--superficie) 55%, transparent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.fuentes{margin-top:38px; font-size:15.5px}
.fuentes ol{padding-left:1.4em}
.fuentes li{margin:.5em 0; line-height:1.5}
sup.cita{font-size:.66em; line-height:0}
sup.cita a{text-decoration:none; padding:0 .12em}

.relacionados{
  margin:38px 0 0; padding:22px 24px; border:1px solid var(--linea);
  border-radius:var(--r-lg);
}
.relacionados h2{margin:0 0 .5em; font-size:20px}
.relacionados ul{margin:0; padding-left:1.2em}

/* índice de la sección ---------------------------------------------------- */
.entrada{font-size:19.5px; color:var(--tenue); margin-bottom:2em}
.fichas{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.fichas a{
  display:block; text-decoration:none; color:inherit; padding:17px 20px;
  border-radius:var(--r-md); background:var(--superficie);
}
.fichas a:hover{box-shadow:var(--sombra)}
.fichas .t{display:block; font-weight:600; line-height:1.35; color:var(--acento)}
.fichas .d{display:block; margin-top:5px; font-size:15px; color:var(--tenue); line-height:1.5}

/* pie --------------------------------------------------------------------- */
.pie{
  margin-top:52px; padding:26px 20px 34px; border-top:1px solid var(--linea);
  text-align:center; font-size:15px; color:var(--tenue);
}
.pie a{margin:0 10px; color:var(--tenue)}
.pie p{margin:14px 0 0}

@media (max-width:520px){
  body{font-size:17px}
  main{padding-top:26px}
  .cierre{padding:22px 18px}
}