/* La Picá del Mono: Tierra del desierto, en capas como el vaso. Primero celular. */
:root{
  --arena:#E9C9A6;
  --terracota:#B85C38;
  --cafe:#3D2C2E;
  --blanco:#FFFFFF;
  --titulos:'Tangerine','Apple Chancery','Snell Roundhand',cursive;
  --texto:'Figtree',-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cafe);color:var(--cafe);font:400 17px/1.5 var(--texto);padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible{outline:3px solid currentColor;outline-offset:2px}
[id]{scroll-margin-top:14px}

.capa{overflow:clip}
.arena{background:var(--arena);color:var(--cafe)}
.terracota{background:var(--terracota);color:var(--blanco)}
.cafe{background:var(--cafe);color:var(--arena)}
.ancho{max-width:1040px;margin:0 auto;padding:16px max(18px,env(safe-area-inset-right,0px)) 26px max(18px,env(safe-area-inset-left,0px))}

h1,h2{font-family:var(--titulos);font-weight:700;margin:0;text-wrap:balance}
h1{font-size:clamp(68px,20vw,108px);line-height:.98;margin:2px 0 12px}
h2{font-size:clamp(46px,12.5vw,62px);line-height:1;margin-bottom:8px}
h3{font:700 34px/1.05 var(--titulos);margin:20px 0 9px}
p{margin:0 0 12px}

.onda{height:13px;background:radial-gradient(circle at 12px 13px,var(--hacia) 11.5px,transparent 12px) 0 0/24px 13px repeat-x;background-color:var(--desde)}

.cabecera{display:grid;gap:12px}
.marca{display:flex;gap:10px;align-items:center;text-decoration:none}
.marca img{width:48px;height:48px;border-radius:50%;background:var(--blanco);object-fit:cover}
.marca b{display:block;font:700 30px/1 var(--titulos)}
.marca small{display:block;font-size:13px;line-height:1.25}
.menu{display:flex;justify-content:space-between;gap:8px;padding-block:3px;border-block:1px solid rgba(61,44,46,.28);font-size:14.5px;font-weight:700}
.menu a{padding:9px 2px;text-decoration:none}

.antetitulo{font:700 40px/1 var(--titulos);margin:20px 0 0}
.bajada{margin:0;font-size:16.5px}
.boton{display:inline-block;text-align:center;font-weight:800;font-size:15px;text-decoration:none;padding:13px 22px;border-radius:999px}
.oscuro{background:var(--cafe);color:var(--arena);margin-top:15px}
.claro{background:var(--arena);color:var(--cafe)}
.vivo{background:var(--terracota);color:var(--blanco)}

.portada-foto{position:relative;margin:32px auto 0;max-width:440px}
.portada-foto::before{content:"";position:absolute;right:-56px;top:-32px;width:164px;height:164px;border-radius:50%;background:var(--terracota)}
.portada-foto img{position:relative;width:100%;aspect-ratio:1/1.08;object-fit:cover;object-position:50% 58%;border-radius:13px}
.sello{position:absolute;right:-6px;bottom:-11px;width:78px;height:78px;border-radius:50%;background:var(--cafe);color:var(--arena);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:12.5px;line-height:1.15}

.mote{margin-top:36px}
.vasos{display:grid;gap:12px;margin-top:6px}
.vaso{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:16px;border:1px solid rgba(61,44,46,.28);border-radius:15px;padding:8px}
.vaso img{width:100%;aspect-ratio:1/1.14;object-fit:cover;border-radius:10px}
.vaso h3{margin:0;font-size:46px;text-align:center}

.tarjetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tarjeta{background:var(--arena);border-radius:13px;padding:7px}
.tarjeta img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}

.filas{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.filas li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:center;background:var(--arena);color:var(--cafe);border-radius:13px;padding:7px}
.filas img{width:78px;height:78px;object-fit:cover;border-radius:8px}
.filas b{display:block}
.filas span{font-size:15px}

.columnas{display:grid;gap:30px}
.columnas>*{min-width:0}
.reportaje{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;font-weight:700;font-size:15.5px}
.reportaje img{width:58px;height:58px;object-fit:cover;border-radius:8px}
.enlace{font-weight:700;overflow-wrap:anywhere}
.mapa{display:block;width:100%;height:250px;border:0;border-radius:13px;margin-top:14px;background:var(--arena)}
.botones-escritorio{display:none}

.barra{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:var(--cafe)}

@media(min-width:640px){
  .tarjetas{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vasos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vaso{grid-template-columns:1fr;gap:8px}
  .filas{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:860px){
  body{padding-bottom:0}
  .barra{display:none}
  .ancho{padding-block:18px 44px}
  .cabecera{grid-template-columns:auto 1fr;align-items:center}
  .menu{justify-content:flex-end;gap:26px;border:0}
  .portada{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;margin-top:18px}
  .portada-foto{margin-top:32px}
  .mote{margin-top:54px}
  .columnas{grid-template-columns:1fr 1fr;gap:56px}
  .botones-escritorio{display:flex;gap:10px;margin-top:18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}