:root{
  --f-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono:    'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --curva: cubic-bezier(.2, 0, 0, 1);
  --curva-suave: cubic-bezier(.16, 1, .3, 1);
  --curva-rebote: cubic-bezier(.34, 1.56, .64, 1);
  
  --grano: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --piedra-clara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='5' seed='11' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' lighting-color='%23ffffff' surfaceScale='2.8' diffuseConstant='1.05' result='l'%3E%3CfeDistantLight azimuth='35' elevation='58'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .11 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --piedra-oscura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='5' seed='11' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' lighting-color='%23ffffff' surfaceScale='2.8' diffuseConstant='1.05' result='l'%3E%3CfeDistantLight azimuth='35' elevation='58'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.22 0 0 0 .22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --piedra: #E4E0D6;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; -webkit-tap-highlight-color:transparent }
body{ margin:0; background:var(--fondo); color:var(--texto); font-family:var(--f-display); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip }
body.sin-scroll{ overflow:hidden }
img{ max-width:100%; display:block }
a{ color:inherit }
p{ margin:0 }
:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:999px }
.saltar{ position:fixed; left:-999px; top:8px; z-index:110; background:var(--acento); color:var(--acento-texto); padding:8px 14px; text-decoration:none }
.saltar:focus{ left:8px }
.ancho{ width:min(100% - 40px, 1240px); margin-left:auto; margin-right:auto; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right) }
h2{ margin:0; font-size:clamp(2rem, 4.2vw, 3.25rem); line-height:1.02; letter-spacing:-.035em; font-weight:800; text-wrap:balance }

.bloque{ position:relative; background-color:var(--fondo); background-image:var(--textura); background-size:auto, 1000px 1000px; color:var(--texto) }
.bloque::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:var(--grano); opacity:var(--grano-op); mix-blend-mode:var(--grano-mezcla) }
.bloque > *{ position:relative }

.barra{ position:fixed; top:calc(14px + env(safe-area-inset-top)); left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center; gap:12px; padding-left:calc(16px + env(safe-area-inset-left)); padding-right:calc(16px + env(safe-area-inset-right)); pointer-events:none }
.barra > *{ pointer-events:auto }
.pildora{ display:inline-flex; align-items:center; height:52px; border-radius:999px; background:var(--pildora-fondo); border:1px solid var(--pildora-borde); box-shadow:var(--sombra-suave); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); color:var(--texto); text-decoration:none; transition:background-color .4s var(--curva), color .4s var(--curva), border-color .4s var(--curva) }
.pildora-marca{ padding:0 18px 0 12px; gap:9px; font-weight:800; font-size:19px; letter-spacing:-.04em }
.marca-icono{ width:26px; height:26px; flex:none }
.marca-icono .varilla{ stroke:currentColor; stroke-width:3.2; stroke-linecap:square; fill:none }

.punto{ color:var(--acento) }
.pildora-menu{ padding:0 7px 0 8px; gap:2px }
.pildora-menu > a:not(.boton){ display:inline-flex; align-items:center; height:38px; padding:0 14px; border-radius:999px; font-size:14px; font-weight:500; color:var(--texto-2); text-decoration:none; transition:color .24s var(--curva), background-color .24s var(--curva) }
.pildora-menu > a:not(.boton):hover, .pildora-menu > a.activa{ color:var(--texto); background:var(--relieve) }
.menu-cta{ height:38px; padding:0 5px 0 15px; gap:8px; font-size:13.5px; margin-left:6px }
.pildora-hamb{ display:none; position:relative; width:52px; padding:0; justify-content:center; cursor:pointer; font:inherit }
.pildora-hamb span{ position:absolute; left:17px; top:25px; width:18px; height:2px; border-radius:2px; background:var(--texto); transition:transform .4s var(--curva), background-color .4s var(--curva) }
.pildora-hamb span:first-child{ transform:translateY(-4px) }
.pildora-hamb span:last-child{ transform:translateY(4px) }
.menu-abierto .pildora-hamb span:first-child{ transform:rotate(45deg) }
.menu-abierto .pildora-hamb span:last-child{ transform:rotate(-45deg) }
.menu-movil{ position:fixed; inset:0; z-index:40; display:flex; align-items:center; padding:calc(96px + env(safe-area-inset-top)) calc(28px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(28px + env(safe-area-inset-left)); background:color-mix(in srgb, var(--fondo) 84%, transparent); -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%); opacity:0; visibility:hidden; transition:opacity .4s var(--curva), visibility 0s .4s }
.menu-abierto .menu-movil{ opacity:1; visibility:visible; transition:opacity .4s var(--curva) }
.menu-movil nav{ display:flex; flex-direction:column; gap:4px; width:100% }
.menu-movil nav > a{ font-size:clamp(2.125rem, 9vw, 3.25rem); font-weight:800; letter-spacing:-.035em; line-height:1.1; color:var(--texto); text-decoration:none; padding:8px 0; opacity:0; transform:translateY(26px); transition:opacity .5s var(--curva), transform .6s var(--curva); transition-delay:calc(var(--i) * 60ms) }
.menu-movil nav > a.boton{ font-size:15px; letter-spacing:0; font-weight:600; margin-top:28px; align-self:flex-start; padding:0 22px }
.menu-abierto .menu-movil nav > a{ opacity:1; transform:none }

.boton{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:12px; height:54px; padding:0 8px 0 24px; border-radius:999px; font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:-.005em; text-decoration:none; white-space:nowrap; border:1px solid transparent; cursor:pointer; transition:box-shadow .5s var(--curva-suave), transform .5s var(--curva-suave), background-color .5s var(--curva-suave), border-color .3s var(--curva-suave) }
.boton:active{ transform:scale(.98) }
.boton-texto{ position:relative; z-index:1; transition:transform .5s var(--curva-suave) }
.boton:hover .boton-texto{ transform:translateX(-2px) }

.brillo{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(to right, transparent, rgba(255,255,255,.15), transparent); transform:translateX(-100%); transition:transform .7s cubic-bezier(0,0,.2,1) }
.boton:hover .brillo{ transform:translateX(100%) }
.luz{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0; background:radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,.16), transparent 60%); transition:opacity .5s cubic-bezier(.4,0,.2,1) }
.boton:hover .luz{ opacity:1 }
.boton-primario{ background:var(--acento); color:var(--acento-texto); box-shadow:0 0 0 1px rgba(0,0,0,.30), 0 14px 32px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14) }
.boton-primario:hover{ box-shadow:0 24px 44px -10px rgba(232,89,12,.35), 0 18px 40px -10px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.20) }

h1{ margin:0; font-size:clamp(4rem, 11vw, 8.75rem); line-height:.92; letter-spacing:-.05em; font-weight:800 }

@media (prefers-reduced-motion: no-preference){
  .entra{ opacity:0; transform:translateY(22px); animation:subir .9s var(--curva) forwards; animation-delay:var(--t, calc(var(--i, 0) * 90ms + 120ms)) }
  .barra .pildora{ opacity:0; transform:translateY(-14px); animation:bajar .8s var(--curva-suave) .5s forwards }
  .barra .pildora-menu{ animation-delay:.62s }

}
@keyframes subir{ to{ opacity:1; transform:none } }
@keyframes bajar{ to{ opacity:1; transform:none } }

@keyframes parpadeo{ 0%{ opacity:1 } 50%{ opacity:0 } 100%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }

  .pildora-hamb span, .boton, .boton-texto, .brillo, .luz, .menu-movil, .menu-movil nav > a{ transition:none }

}

.quieto{ scroll-behavior:auto }
.quieto .entra, .quieto .barra .pildora, .quieto .pildora-marca .punto, .quieto .pildora-marca .tilde{ opacity:1 !important; animation:none !important; transition:none !important }
.quieto .entra, .quieto .barra .pildora{ transform:none !important }
.quieto .tilde-viva, .quieto .flecha-viaje, .quieto .flecha-viaje svg, .quieto .caja, .quieto .caja .caja-adentro{ animation:none !important }

.de-paso .barra .pildora, .de-paso .pildora-menu > a{ animation:none !important; opacity:1; transform:none }

@media (prefers-reduced-motion: no-preference){ .sin-viaje:not(.quieto) :is(.tema-titulo, .legal h1){ animation:tema-titulo .9s var(--curva) .14s backwards } }
@keyframes tema-titulo{ from{ opacity:0; transform:translateY(22px) } }

@media (max-width: 900px){
  .pildora-menu{ display:none }
  .pildora-hamb{ display:inline-flex }
}

@media (max-width: 560px){
  .barra{ top:calc(12px + env(safe-area-inset-top)); padding-left:calc(12px + env(safe-area-inset-left)); padding-right:calc(12px + env(safe-area-inset-right)) }
  .ancho{ width:min(100% - 32px, 1240px) }

  .boton{ height:50px }

}

@media (max-width: 900px){
  
  :root, .t-a{ --piedra-clara:none; --piedra-oscura:none }

  .pildora{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--fondo) }
  .menu-movil{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--fondo) }

}

@media (pointer: coarse){
  
  .boton:active{ transform:translateY(1px) scale(.985) }
  .menu-movil nav > a:active{ color:var(--acento) }

  .saltar{ padding:12px 16px }
  
  .tema-volver, .pie-temas a, .pie-arriba{ height:44px }
  .pie-enlaces{ gap:0 18px }
  .pie-enlaces a{ display:inline-flex; align-items:center; min-height:44px }
}

@media (max-height: 560px) and (orientation: landscape){
  .menu-movil{ align-items:flex-start; overflow-y:auto }
  .menu-movil nav > a{ padding-top:10px; padding-bottom:10px }
}

.barra{ top:calc(18px + env(safe-area-inset-top)) }
.pildora{ height:50px; box-shadow:var(--sombra-suave), inset 0 1px 0 rgba(255,255,255,.07) }
.pildora-marca{ font-size:17px; letter-spacing:-.03em }
.pildora-menu{ padding:0 6px 0 10px; gap:0 }
.pildora-menu > a:not(.boton){ position:relative; height:36px; padding:0 13px; font-size:13.5px; letter-spacing:.005em; background:transparent }
.pildora-menu > a:not(.boton):hover{ color:var(--texto); background:var(--relieve) }
.pildora-menu > a:not(.boton).activa{ color:var(--texto); background:transparent }
.pildora-menu > a:not(.boton).activa::after{ content:""; position:absolute; left:50%; bottom:5px; width:4px; height:4px; margin-left:-2px; border-radius:999px; background:var(--acento) }
.menu-cta{ margin-left:10px; padding:0 5px 0 16px; box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 10px 22px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14) }

.boton-primario{ height:60px; padding:0 30px; gap:0; font-size:17px; font-weight:800; letter-spacing:-.015em }

.boton-primario:hover .boton-texto{ transform:none }

.boton-primario:focus-visible{ animation:none }
.menu-cta{ height:40px; padding:0 18px; font-size:14px; font-weight:700; margin-left:10px }
.menu-movil .boton-primario{ height:56px; font-size:16px }

.marca-icono.vivo{ position:relative; display:block }
.marca-icono.vivo svg{ display:block; width:100%; height:100% }
.marca-icono.vivo i{ position:absolute; left:calc(var(--x) / 64 * 100%); top:calc(var(--y) / 64 * 100%); width:17.1875%; height:17.1875%; margin:-8.59375% 0 0 -8.59375%; border-radius:50%; background:currentColor; transition:translate .7s cubic-bezier(.2, 0, 0, 1) }
.marca-icono.vivo .c3{ background:#E8590C }
.marca-icono.vivo.f1 .c1{ translate:45.45% 0; transition-delay:.15s } .marca-icono.vivo.f1 .c2{ translate:45.45% 0 } .marca-icono.vivo.f1 .c3{ translate:-45.45% 0; transition-delay:.05s }
.marca-icono.vivo.f2 .c4{ translate:-54.55% 0 } .marca-icono.vivo.f2 .c5{ translate:54.55% 0; transition-delay:.1s }
.marca-icono.vivo.f3 .c6{ translate:36.36% 0; transition-delay:.3s } .marca-icono.vivo.f3 .c7{ translate:36.36% 0; transition-delay:.15s } .marca-icono.vivo.f3 .c8{ translate:36.36% 0 }
@media (prefers-reduced-motion: reduce){ .marca-icono.vivo i{ transition:none } }

.boton-primario{ height:56px; padding:0 26px; font-size:16px }

.menu-cta{ height:40px; font-size:14px }

html{ --ancho-portada:1180px }

.boton:is(.b1, .b2, .b3){ gap:10px; letter-spacing:-.01em; transition:transform .5s var(--curva-suave), box-shadow .5s var(--curva-suave), background-color .3s var(--curva), border-color .3s var(--curva), color .3s var(--curva) }
.boton:is(.b1, .b2, .b3):hover{ transform:translateY(-2px) }
.boton:is(.b1, .b2, .b3):active{ transform:translateY(0) scale(.98); transition-duration:.12s }
.boton:is(.b1, .b2, .b3):hover .boton-texto{ transform:none }
.boton:is(.b1, .b2, .b3) .brillo{ background:linear-gradient(to right, transparent, var(--brillo-b, rgba(255,255,255,.18)), transparent); transform:translateX(-110%); transition:none }
.boton:is(.b1, .b2, .b3):hover .brillo{ animation:vaiven 1.5s ease-in-out infinite alternate }
@keyframes vaiven{ from{ transform:translateX(-110%) } to{ transform:translateX(110%) } }
.boton:is(.b1, .b2, .b3) .flecha{ position:relative; z-index:1; display:grid; place-items:center; width:16px; height:16px; transition:transform .4s var(--curva-suave) }
.boton:is(.b1, .b2, .b3) .flecha svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:square }
.boton:is(.b1, .b2, .b3):hover .flecha{ transform:translateX(3px) }

.b1{ height:56px; padding:0 22px 0 26px; border-radius:14px; font-family:var(--f-display); font-size:16px; font-weight:600; color:#FAFAF8; border:1px solid #0A0A0A; background:linear-gradient(180deg, #34342F 0%, #161614 55%, #0A0A0A 100%); --brillo-b:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.5), 0 1px 1px rgba(10,10,10,.2), 0 4px 8px -2px rgba(10,10,10,.22), 0 16px 28px -10px rgba(10,10,10,.42), 0 34px 60px -24px rgba(89,62,18,.45) }
.b1:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.5), 0 2px 2px rgba(10,10,10,.2), 0 8px 14px -4px rgba(10,10,10,.24), 0 26px 42px -12px rgba(10,10,10,.46), 0 48px 84px -28px rgba(89,62,18,.5) }

.flecha-viaje{ overflow:hidden; width:18px !important }
@media (prefers-reduced-motion: no-preference){
  .flecha-viaje svg{ animation:viaje 4.6s var(--curva-suave) 3s infinite }
  .b1:hover .flecha-viaje svg{ animation:none }
}
@keyframes viaje{ 0%,70%,100%{ transform:none; opacity:1 } 77%{ transform:translateX(18px); opacity:0 } 78%{ transform:translateX(-18px); opacity:0 } 88%{ transform:none; opacity:1 } }

.b2{ height:52px; padding:0 20px 0 24px; border-radius:999px; font-family:var(--f-linea); font-size:18px; font-weight:400; color:#0A0A0A; border:1px solid rgba(10,10,10,.1); background:linear-gradient(180deg, #FFFFFF 0%, #FAF9F6 100%); --brillo-b:rgba(232,89,12,.13);
  box-shadow:inset 0 1px 0 #fff, inset 0 -2px 0 rgba(10,10,10,.04), 0 1px 1px rgba(10,10,10,.06), 0 6px 12px -4px rgba(89,62,18,.16), 0 20px 36px -16px rgba(89,62,18,.34) }
.b2:hover{ box-shadow:inset 0 1px 0 #fff, inset 0 -2px 0 rgba(10,10,10,.04), 0 2px 2px rgba(10,10,10,.06), 0 10px 18px -6px rgba(89,62,18,.2), 0 30px 50px -18px rgba(89,62,18,.42) }
.b2 em{ font-style:italic }

.b3{ height:44px; padding:0 14px 0 16px; border-radius:10px; font-family:var(--f-mono); font-size:12.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#0A0A0A; background:#EFEDE7; border:1px solid rgba(10,10,10,.14); --brillo-b:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 3px 0 rgba(10,10,10,.12), 0 12px 20px -12px rgba(89,62,18,.4) }
.b3:hover{ background:#F3F1EC; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 4px 0 rgba(10,10,10,.12), 0 18px 28px -14px rgba(89,62,18,.45) }
.caja-adentro{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px }
@media (prefers-reduced-motion: no-preference){
  .caja{ transform-origin:50% 100%; animation:caja 5.6s ease-in-out 2.6s infinite }
  .caja .caja-adentro{ animation:adentro 5.6s ease-in-out 2.6s infinite }
  .caja:hover, .caja:hover .caja-adentro{ animation:none }
}
@keyframes caja{ 0%,78%,100%{ transform:none } 80%{ transform:translateY(-3px) rotate(-2.5deg) } 83%{ transform:translateY(0) rotate(2deg) } 86%{ transform:translateY(-2px) rotate(-1.4deg) } 89%{ transform:rotate(.8deg) } 92%{ transform:none } }
@keyframes adentro{ 0%,79%,100%{ transform:none } 82%{ transform:translateX(5px) } 85%{ transform:translateX(-4px) } 88%{ transform:translateX(2px) } 91%{ transform:translateX(-1px) } 94%{ transform:none } }

.a-tilde{ position:relative; display:inline-block; line-height:1 }
.tilde{ position:absolute; left:.297em; top:-.032em; width:.23em; height:.131em; background:var(--acento); clip-path:polygon(36.1% 0, 100% 0, 49.1% 100%, 0 100%); transform-origin:25% 100% }
.punto-titulo, .punto-vivo{ display:inline-block; transform-origin:50% 85% }
@media (prefers-reduced-motion: no-preference){
  
  .tilde-viva{ animation:tilde-cae .95s var(--curva-rebote) .8s backwards, tilde-guino 7s ease-in-out 4s infinite }
  
  .punto-titulo{ animation:punto-llega .55s var(--curva-rebote) 1.45s backwards }
  
  .pildora-marca .punto.punto-vivo{ opacity:1; animation:punto-salta 5.5s var(--curva) 2.4s infinite }
  .pildora-marca:hover .punto.punto-vivo{ animation:punto-cuenta .6s var(--curva-rebote) }
  
  .pildora-marca .tilde{ animation:tilde-vuelta 11s linear 3.6s infinite }
  .pildora-marca:hover .tilde{ animation:tilde-vuelta-sola 1.3s linear }
}
@keyframes tilde-vuelta{ 0%{ transform:none } 0.83%{ transform:translate(0.150em, -0.040em) rotate(-30deg) } 1.67%{ transform:translate(0.260em, -0.150em) rotate(-60deg) } 2.5%{ transform:translate(0.300em, -0.300em) rotate(-90deg) } 3.33%{ transform:translate(0.260em, -0.450em) rotate(-120deg) } 4.17%{ transform:translate(0.150em, -0.560em) rotate(-150deg) } 5%{ transform:translate(0.000em, -0.600em) rotate(-180deg) } 5.83%{ transform:translate(-0.150em, -0.560em) rotate(-210deg) } 6.67%{ transform:translate(-0.260em, -0.450em) rotate(-240deg) } 7.5%{ transform:translate(-0.300em, -0.300em) rotate(-270deg) } 8.33%{ transform:translate(-0.260em, -0.150em) rotate(-300deg) } 9.17%{ transform:translate(-0.150em, -0.040em) rotate(-330deg) } 10%{ transform:translate(-0.000em, 0.000em) rotate(-360deg) } 11.5%{ transform:translateY(.02em) scale(1.18, .78) } 13%{ transform:translateY(-.05em) scale(.94, 1.06) } 15%, 100%{ transform:none } }
@keyframes tilde-vuelta-sola{ 0%{ transform:none } 6%{ transform:translate(0.150em, -0.040em) rotate(-30deg) } 12%{ transform:translate(0.260em, -0.150em) rotate(-60deg) } 18%{ transform:translate(0.300em, -0.300em) rotate(-90deg) } 24%{ transform:translate(0.260em, -0.450em) rotate(-120deg) } 30%{ transform:translate(0.150em, -0.560em) rotate(-150deg) } 36%{ transform:translate(0.000em, -0.600em) rotate(-180deg) } 42%{ transform:translate(-0.150em, -0.560em) rotate(-210deg) } 48%{ transform:translate(-0.260em, -0.450em) rotate(-240deg) } 54%{ transform:translate(-0.300em, -0.300em) rotate(-270deg) } 60%{ transform:translate(-0.260em, -0.150em) rotate(-300deg) } 66%{ transform:translate(-0.150em, -0.040em) rotate(-330deg) } 72%{ transform:translate(-0.000em, 0.000em) rotate(-360deg) } 80%{ transform:translateY(.02em) scale(1.18, .78) } 88%{ transform:translateY(-.05em) scale(.94, 1.06) } 96%, 100%{ transform:none } }
@keyframes tilde-cae{ from{ transform:translate(.4em, -1em) rotate(40deg); opacity:0 } 55%{ opacity:1 } }
@keyframes tilde-guino{ 0%,85%,100%{ transform:none } 88%{ transform:translate(.03em, -.14em) rotate(-16deg) } 91%{ transform:translate(0, .015em) } 94%{ transform:translate(0, -.035em) } 97%{ transform:none } }
@keyframes punto-llega{ from{ transform:translateX(-.5em) scale(.3); opacity:0 } 60%{ opacity:1 } }
@keyframes punto-salta{ 0%,80%,100%{ transform:none } 84%{ transform:translateY(-.34em) scale(.9, 1.1) } 88%{ transform:translateY(0) scale(1.3, .72) } 91%{ transform:translateY(-.08em) scale(.95, 1.05) } 94%{ transform:none } }
@keyframes punto-cuenta{ 0%{ transform:none } 50%{ transform:translateX(.24em) } 100%{ transform:none } }

@media (max-width:640px){
  .b1{ height:52px; font-size:15.5px }
  .b2{ height:48px; font-size:17px }
  .b3{ height:42px; font-size:12px }
}

html[data-fondo="crema"], html[data-fondo="crema"] .t-a{
  color-scheme:light;
  --piedra-honda:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='5' seed='11' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' lighting-color='%23ffffff' surfaceScale='2.8' diffuseConstant='1.05' result='l'%3E%3CfeDistantLight azimuth='35' elevation='58'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.6 0 0 0 .6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --fondo:#F7F6F2; --fondo-2:#EFEDE7; --fondo-3:#FFFFFF; --fondo-4:#F3F1EC;
  --texto:#0A0A0A; --texto-2:#6E6E68; --texto-3:#8A8A82;
  --borde:rgba(10,10,10,.08); --borde-2:rgba(10,10,10,.14); --borde-3:rgba(10,10,10,.26); --relieve:rgba(10,10,10,.05);
  --acento:#B8440A; --acento-hover:#E8590C; --acento-texto:#FAFAF8; --acento-tinte:rgba(232,89,12,.14);
  --icono-fondo:rgba(250,250,248,.18);
  --pildora-fondo:rgba(255,255,255,.74); --pildora-borde:rgba(10,10,10,.08);
  --sombra-suave:0 18px 44px -30px rgba(89,62,18,.45), inset 0 1px 0 rgba(255,255,255,.8);
  --sombra-tarjeta:0 30px 64px -34px rgba(89,62,18,.45);
  --tinte-1:rgba(232,89,12,.11); --tinte-2:rgba(10,10,10,.035);
  --grano-op:.04; --grano-mezcla:multiply;
  --textura:radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.6), transparent 60%), var(--piedra-oscura);
  --cifra-fondo:color-mix(in srgb, #E8590C 9%, #FFFFFF);
  --brillo-interior:rgba(255,255,255,.8);
  
  --b1-fondo:linear-gradient(180deg, #2A2A28, #0A0A0A); --b1-texto:#FAFAF8; --b1-borde:rgba(10,10,10,.9);
  --b1-sombra:inset 0 1px 0 rgba(255,255,255,.16), 0 20px 40px -14px rgba(10,10,10,.55), 0 6px 14px -6px rgba(10,10,10,.35);
  --b1-sombra-hover:inset 0 1px 0 rgba(255,255,255,.2), 0 30px 54px -14px rgba(10,10,10,.6), 0 10px 20px -8px rgba(10,10,10,.4);
}

html{ --f-linea:'Newsreader', Georgia, serif; --linea-escala:1.03; --linea-peso:400; --f-menu:'Satoshi', 'Helvetica Neue', Helvetica, Arial, sans-serif; --menu-escala:1; --menu-peso:500 }

@media (min-width:1001px){ .barra{ padding-left:max(16px, calc((100vw - var(--ancho-portada)) / 2)); padding-right:max(16px, calc((100vw - var(--ancho-portada)) / 2)) } }
.barra .pildora{ height:48px }
.pildora-marca{ padding:0 16px 0 12px; gap:8px }
.pildora-marca .marca-icono{ width:22px; height:22px }
.logo-texto{ font-family:var(--f-display); font-size:20px; font-weight:700; letter-spacing:-.028em; line-height:1 }

.barra .pildora-menu{ position:relative; padding:0 5px 0 6px; gap:0 }
.pildora-menu > a:not(.boton){ position:relative; z-index:1; height:36px; padding:0 14px; font-family:var(--f-menu); font-size:calc(14.5px * var(--menu-escala)); font-weight:var(--menu-peso); background:none !important; transition:color .3s var(--curva) }
.pildora-menu > a.activa{ color:var(--texto) }
.indicador{ position:absolute; z-index:0; left:0; top:5px; height:36px; width:0; border-radius:999px; background:var(--relieve); box-shadow:inset 0 0 0 1px var(--borde); opacity:0; transform:translateX(0); transition:transform .5s var(--curva-suave), width .5s var(--curva-suave), opacity .3s var(--curva) }

.barra .menu-cta, .menu-movil nav > a.boton{ background:var(--b1-fondo); color:var(--b1-texto); border-color:var(--b1-borde); box-shadow:var(--b1-sombra) }
.barra .menu-cta:hover, .menu-movil nav > a.boton:hover{ box-shadow:var(--b1-sombra-hover) }
.barra .menu-cta{ height:36px; padding:0 4px 0 14px; gap:8px; margin-left:6px; font-family:var(--f-menu); font-size:14px; font-weight:700; letter-spacing:-.005em }
.menu-movil nav > a:not(.boton){ font-family:var(--f-menu) }
.menu-movil nav > a[aria-current]::after{ content:""; display:inline-block; width:.2em; height:.2em; margin-left:.16em; border-radius:50%; background:var(--acento); vertical-align:.1em }
.flecha-c{ position:relative; z-index:1; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:color-mix(in srgb, currentColor 14%, transparent); overflow:hidden }
.flecha-c svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:square }
.menu-cta:hover .flecha-c svg{ animation:cruzar .5s var(--curva-suave) }
@keyframes cruzar{ 0%{ transform:none } 45%{ transform:translateX(18px) } 46%{ transform:translateX(-18px) } 100%{ transform:none } }
@media (prefers-reduced-motion: no-preference){
  .pildora-menu > a{ animation:caer .7s var(--curva-suave) backwards; animation-delay:calc(.7s + var(--i, 0) * 80ms) }
}
@keyframes caer{ from{ opacity:0; transform:translateY(-8px) } }
@media (prefers-reduced-motion: reduce){ .indicador{ transition:none } .boton:is(.b1, .b2, .b3):hover .brillo{ animation:none } }

.sec-titulo{ margin:0; font-size:clamp(2.2rem, 4.4vw, 3.5rem); font-weight:700; line-height:1.02; letter-spacing:-.042em; text-wrap:balance }

.sec-texto{ margin:22px 0 0; max-width:50ch; font-size:clamp(16.5px, 1.3vw, 18.5px); line-height:1.55; color:var(--texto-2) }

@media (prefers-reduced-motion: no-preference){
  .js .sube{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--curva), transform .9s var(--curva); transition-delay:calc(var(--r, 0) * 110ms) }
  .js .sube.visto{ opacity:1; transform:none }
}
.quieto .sube{ opacity:1 !important; transform:none !important; transition:none !important }

main{ position:relative; isolation:isolate; overflow:hidden; overflow:clip; background-color:var(--fondo); background-image:radial-gradient(70% 900px at 50% 0%, rgba(255,255,255,.55), transparent 70%), var(--piedra-oscura); background-size:auto, 1000px 1000px; background-repeat:no-repeat, repeat }
main::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:var(--grano); opacity:var(--grano-op); mix-blend-mode:var(--grano-mezcla) }
main > .bloque.t-a{ background:none }
main > .bloque.t-a::before{ display:none }
@media (max-width:900px){ main{ background-image:radial-gradient(90% 700px at 50% 0%, rgba(255,255,255,.55), transparent 70%) } }

.pildora{ -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%) }

.lente-pagina{ position:absolute; left:0; top:0; z-index:-1; width:480px; height:480px; overflow:hidden; pointer-events:none; opacity:0; transform:translate3d(-9999px, 0, 0); will-change:transform, opacity; transition:opacity .35s var(--curva);
  -webkit-mask-image:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.62) 42%, transparent 100%); mask-image:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.62) 42%, transparent 100%) }
.lente-pagina > i{ position:absolute; left:0; top:0; display:block; width:1480px; height:1480px; background-image:var(--piedra-honda); background-size:1000px 1000px; will-change:transform }
.lente-pagina::after{ content:""; position:absolute; inset:0; background:radial-gradient(closest-side, rgba(10,10,10,.08), transparent) }
.lente-pagina.prendida{ opacity:1 }
@media (hover: none), (pointer: coarse), (max-width: 900px){ .lente-pagina{ display:none } }

.pie{ padding:clamp(12px, 2vw, 24px) 0 clamp(20px, 3vw, 32px) }
.pie > .ancho{ width:min(100% - 40px, var(--ancho-portada)) }
.pie-caja{ padding:clamp(20px, 2.4vw, 28px) clamp(20px, 2.8vw, 32px) clamp(16px, 2vw, 22px); border-radius:32px; background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.75); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(10,10,10,.04), 0 28px 56px -36px rgba(89,62,18,.5);  }
.pie-fila{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px }
.pie-marca{ display:inline-flex; align-items:center; gap:9px; color:#0A0A0A; text-decoration:none }
.pie-icono{ display:block; width:24px; height:24px }
.pie-icono svg{ display:block; width:100%; height:100% }
.pie-nombre{ font-size:21px; font-weight:700; letter-spacing:-.03em; line-height:1 }
.pie-nombre .punto{ color:#E8590C }
.pie-lema{ margin:0; font-family:var(--f-linea); font-size:18px; line-height:1.2; color:#3A3A36 }
.pie-lema em{ font-style:italic; color:#B8440A }
.pie-wa{ margin-left:auto }
.pie-boton{ display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 18px 0 15px; border-radius:999px; font-size:15px; font-weight:600; letter-spacing:-.01em; text-decoration:none; white-space:nowrap; transition:transform .4s var(--curva-suave), box-shadow .4s var(--curva-suave) }
.pie-boton svg{ flex:none; width:17px; height:17px }
.pie-wa{ background:linear-gradient(180deg, #2A2A28, #0A0A0A); color:#FAFAF8; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 20px -12px rgba(10,10,10,.6) }
.pie-wa:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 16px 26px -12px rgba(10,10,10,.6) }
.pie-boton:active{ transform:translateY(0) scale(.98); transition-duration:.12s }

.pie-medio{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; margin-top:20px; padding-top:16px; border-top:1px solid rgba(10,10,10,.07) }
.pie-temas{ display:flex; flex-wrap:wrap; gap:2px 26px }
.pie-temas a{ position:relative; display:inline-flex; align-items:center; height:36px; font-size:15px; font-weight:500; letter-spacing:-.01em; color:#3A3A36; text-decoration:none; transition:color .3s var(--curva) }
.pie-temas a:hover{ color:#0A0A0A }
.pie-temas a[aria-current]{ color:#0A0A0A; font-weight:600 }
.pie-temas a[aria-current]::after{ content:""; position:absolute; left:50%; bottom:1px; width:4px; height:4px; margin-left:-2px; border-radius:999px; background:#E8590C }
.pie-pronto{ margin-left:7px; padding:2px 7px; border-radius:999px; background:#EFEDE7; color:#6E6E68; font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase }
.pie-arriba{ display:inline-flex; align-items:center; gap:7px; height:36px; font-size:14px; font-weight:500; color:#6E6E68; text-decoration:none; transition:color .3s var(--curva) }
.pie-arriba svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:square; transition:transform .4s var(--curva-suave) }
.pie-arriba:hover{ color:#0A0A0A }
.pie-arriba:hover svg{ transform:translateY(-2px) }

.pie-legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 20px; margin-top:16px; font-size:13px; color:#6E6E68 }
.pie-legal p{ margin:0 }
.pie-enlaces{ display:flex; flex-wrap:wrap; gap:4px 18px }
.pie-enlaces a{ color:#6E6E68; text-decoration:none; transition:color .3s var(--curva) }
.pie-enlaces a:hover{ color:#0A0A0A }
.pie-nota{ margin:8px 0 0; max-width:90ch; font-size:12px; line-height:1.5; color:#6E6E68 }
@media (max-width:640px){
  .pie > .ancho{ width:min(100% - 32px, var(--ancho-portada)) }
  .pie-caja{ border-radius:26px }
  .pie-wa{ width:100%; margin-left:0; justify-content:center }
  .pie-medio{ flex-direction:column; align-items:flex-start }
  .pie-temas{ gap:0 20px }
  .pie-legal{ flex-direction:column }
}

@view-transition{ navigation:auto }
::view-transition-group(*){ animation-duration:.45s; animation-timing-function:cubic-bezier(.16, 1, .3, 1) }
@media (prefers-reduced-motion: reduce){ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important } }

.tema{ padding:clamp(112px, 13vw, 148px) 0 clamp(40px, 5vw, 64px) }
.tema > .ancho{ width:min(100% - 40px, var(--ancho-portada)) }
.tema-cab{ max-width:820px; margin:0 auto; text-align:center }
.tema-volver{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 15px 0 11px; border-radius:999px; background:rgba(255,255,255,.62); border:1px solid rgba(10,10,10,.08); font-size:14px; font-weight:500; letter-spacing:-.005em; color:#3A3A36; text-decoration:none; transition:background-color .3s var(--curva), transform .45s var(--curva-suave) }
.tema-volver svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:square }
.tema-volver:hover{ background:#FFFFFF; transform:translateX(-3px) }
.tema-titulo{ margin:22px 0 0; font-size:clamp(3rem, 7vw, 5.8rem); font-weight:700; line-height:.98; letter-spacing:-.045em }
.tema-titulo em, .tema-h2 em, .tema-cta h2 em{ font-family:var(--f-linea); font-style:italic; font-weight:400; font-size:1.08em; letter-spacing:-.02em; color:#E8590C; padding-right:.04em }
.tema-texto{ max-width:48ch; margin:20px auto 0; font-size:clamp(17px, 1.45vw, 20px); line-height:1.55; color:#55554F; text-wrap:balance }
.tema-parte{ margin:clamp(64px, 8vw, 112px) 0 0 }
.tema-parte-cab{ max-width:780px; margin:0 auto; text-align:center }
.tema-rotulo{ display:inline-flex; align-items:center; gap:9px; height:32px; margin:0; padding:0 14px 0 12px; border-radius:999px; background:rgba(255,255,255,.62); box-shadow:inset 0 0 0 1px rgba(10,10,10,.06); font-family:var(--f-mono); font-size:11.5px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:#3A3A36 }
.tema-rotulo i{ width:7px; height:7px; border-radius:50%; background:#E8590C; box-shadow:0 0 0 3px rgba(232,89,12,.16) }
.tema-h2{ margin:16px 0 0; font-size:clamp(2.2rem, 4.4vw, 3.5rem); font-weight:700; line-height:1.02; letter-spacing:-.042em; text-wrap:balance }
.tema-sub{ max-width:54ch; margin:16px auto 0; font-size:clamp(16.5px, 1.3vw, 18.5px); line-height:1.55; color:#55554F; text-wrap:balance }
.tema-ejemplo{ position:absolute; z-index:5; left:20px; top:18px; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.82); box-shadow:inset 0 0 0 1px rgba(10,10,10,.06); font-family:var(--f-mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:#3A3A36 }

.pausa{ position:relative; flex:none; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.62); box-shadow:inset 0 0 0 1px rgba(255,255,255,.85); color:#0A0A0A; cursor:pointer }
.pausa::before, .pausa::after{ content:""; position:absolute; top:calc(50% - 6px); width:3px; height:12px; border-radius:1px; background:currentColor }
.pausa::before{ left:calc(50% - 4px) }
.pausa::after{ left:calc(50% + 1px) }
.pausa[aria-pressed="true"]::before{ left:calc(50% - 4px); top:calc(50% - 7px); width:0; height:0; border-radius:0; background:none; border-style:solid; border-width:7px 0 7px 11px; border-color:transparent transparent transparent currentColor }
.pausa[aria-pressed="true"]::after{ display:none }
.pausa:focus-visible{ outline:2px solid #E8590C; outline-offset:2px }
@media (pointer: coarse){ .pausa{ width:44px; height:44px } }
@media (prefers-reduced-motion: reduce){ .pausa{ display:none } }

.lector{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }

.tema-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px; margin:clamp(64px, 8vw, 104px) 0 0; padding:clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); border-radius:40px; background:#E8590C; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 30px 60px -36px rgba(184,68,10,.65) }
.tema-cta h2{ margin:0; font-size:clamp(1.9rem, 3.4vw, 2.8rem); font-weight:700; line-height:1.02; letter-spacing:-.04em; color:#0A0A0A; text-wrap:balance }
.tema-cta h2 em{ color:#0A0A0A }

.tema-cta :focus-visible{ outline-color:#0A0A0A }
.tema-cta p{ margin:10px 0 0; max-width:46ch; font-size:17px; font-weight:500; line-height:1.45; color:#0A0A0A }
.tema-cta-botones{ display:flex; flex-wrap:wrap; align-items:center; gap:10px }

@media (min-width:761px) and (max-width:1100px){ .tema-cta-botones{ flex-direction:column; align-items:stretch } .tema-cta-botones .boton{ justify-content:space-between } }
@media (min-width:761px){ .tema-cta{ flex-wrap:nowrap } .tema-cta > div:first-child{ min-width:0 } .tema-cta-botones{ flex:none } }

.oscuro{ position:relative; isolation:isolate; overflow:hidden; color:#FAFAF8; background:radial-gradient(85% 75% at 50% 38%, #3A3935 0%, #1C1C1A 52%, #0A0A0A 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -24px 48px rgba(0,0,0,.45) }
.oscuro::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.15) 1px, transparent 1.5px); background-size:15px 15px; -webkit-mask-image:radial-gradient(70% 65% at 50% 45%, #000 0%, transparent 100%); mask-image:radial-gradient(70% 65% at 50% 45%, #000 0%, transparent 100%) }
@media (max-width:760px){
  .tema-cta{ border-radius:30px }
  .tema-cta-botones{ width:100% }
}

@media (pointer: coarse){
  .tema-volver, .pie-temas a, .pie-arriba, .pie-enlaces a{ height:auto; min-height:44px }
  .pie-marca{ min-height:44px }
}