/* Desrola · everflowlabs.io/desrola — los mismos colores y letras que la app (foco-app/src/ui/tema.ts):
   crema de papel, verde de la mata atlántica, amarillo del ipê; Bricolage Grotesque en los títulos y DM Sans en el texto.
   Compartido por las tres versiones: la raíz (pt-BR), es/ y en/. */
:root{
  --creme:#FBF5E9;--papel:#F3EBDA;--branco:#FFFFFF;
  --mata:#0E3B2E;--mata-media:#145A44;--folha:#2E8B67;
  --ipe:#FFC83D;--ipe-claro:#FFE7A3;--ipe-fundo:#FFF3D1;--laranja:#E07A1F;
  --tinta:#10261E;--suave:rgba(16,38,30,.76);--tenue:rgba(16,38,30,.54);
  --linha:rgba(16,38,30,.12);--linha-forte:rgba(16,38,30,.2);
  color-scheme:light
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);background-image:radial-gradient(900px 420px at 50% -120px,rgba(255,200,61,.30),transparent 70%);background-repeat:no-repeat;color:var(--tinta);font:17px/1.65 "DM Sans",-apple-system,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.envoltura{max-width:44rem;margin:0 auto;padding:1.6rem max(16px,env(safe-area-inset-left)) 4rem max(16px,env(safe-area-inset-right))}

/* Arriba: el ícono, el nombre y el selector de idioma. */
.arriba{display:flex;align-items:center;gap:.7rem;margin-bottom:2.4rem;flex-wrap:wrap}
.arriba .marca{display:flex;align-items:center;gap:.65rem;color:var(--mata);text-decoration:none;font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:1.2rem;letter-spacing:-.01em}
.arriba .marca img{width:40px;height:40px;border-radius:10px}
.idiomas{margin-left:auto;display:flex;gap:.3rem;padding:.25rem;border-radius:999px;background:var(--papel);border:1px solid var(--linha)}
.idiomas a{display:inline-block;min-width:2.6rem;padding:.3rem .7rem;border-radius:999px;text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--suave);text-decoration:none}
.idiomas a:hover{color:var(--mata)}
.idiomas a[aria-current="page"]{background:var(--mata);color:var(--ipe)}

h1{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:clamp(2rem,6vw,2.8rem);line-height:1.06;margin:0 0 .5rem;letter-spacing:-.025em;color:var(--mata)}
h2{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:700;font-size:1.35rem;line-height:1.25;margin:2.4rem 0 .6rem;letter-spacing:-.01em;color:var(--mata)}
h3{font-size:1rem;font-weight:700;margin:1.6rem 0 .3rem;color:var(--tinta)}
p,li{color:var(--suave)}
strong{color:var(--tinta);font-weight:700}
a{color:var(--mata-media);text-decoration-color:rgba(224,122,31,.55);text-underline-offset:.18em}
a:hover{color:var(--mata)}
ul,ol{padding-left:1.2rem}li{margin:.35rem 0}
.fecha{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--folha);margin:0 0 2rem}
.caja{border:1px solid var(--linha);background:rgba(255,255,255,.55);border-radius:18px;padding:1.1rem 1.3rem;margin:1.5rem 0}
.caja p{margin:0}
.caja p+p{margin-top:.6rem}
.caja.ipe{border-color:rgba(224,122,31,.32);background:var(--ipe-fundo)}
.caja.mata{border:0;background:var(--mata)}
.caja.mata p,.caja.mata li{color:rgba(251,245,233,.86)}
.caja.mata strong{color:var(--ipe)}
.caja.mata a{color:var(--ipe-claro)}

table{width:100%;border-collapse:collapse;font-size:.93rem;margin:1rem 0}
th,td{text-align:left;vertical-align:top;padding:.65rem .5rem;border-bottom:1px solid var(--linha)}
th{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--folha);font-weight:700}
td{color:var(--suave)}
.tabla{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla table{min-width:34rem}
/* En el teléfono la tabla se lee como tarjetas: una fila por servicio, sin desplazarse de costado.
   El rótulo de cada celda sale de su data-r, así sirve en los tres idiomas. */
@media (max-width:40rem){
  .tabla table{min-width:0}
  .tabla tr{display:block;padding:.9rem 0;border-bottom:1px solid var(--linha)}
  .tabla tr:first-child{display:none}
  .tabla td{display:block;border:0;padding:.15rem 0}
  .tabla td:first-child{font-size:1.02rem;color:var(--tinta)}
  .tabla td[data-r]::before{content:attr(data-r);display:block;margin-top:.45rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--folha)}
  .tabla td ul{padding-left:1.1rem}
}
footer{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--linha);font-size:.86rem;color:var(--tenue)}
footer a{color:var(--tenue)}
code{font-size:.9em;color:var(--mata-media)}

/* Soporte: preguntas que se abren. */
details{border-bottom:1px solid var(--linha);padding:.2rem 0}
summary{cursor:pointer;list-style:none;padding:.85rem 0;font-weight:700;color:var(--tinta);display:flex;align-items:baseline;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;color:var(--laranja);font-weight:700}
details[open] summary::after{content:"–"}
details p,details ol,details ul{margin-top:0}
.boton{display:inline-block;margin-top:.8rem;padding:.8rem 1.4rem;border-radius:999px;font-weight:700;text-decoration:none;background:var(--ipe);color:var(--mata);box-shadow:0 6px 0 rgba(224,122,31,.35)}
.boton:hover{color:var(--mata)}