@font-face{font-family:"Amatic SC";font-weight:400;font-display:swap;src:url(/fonts/amaticsc-normal-400.woff2) format("woff2")}
@font-face{font-family:"Amatic SC";font-weight:700;font-display:swap;src:url(/fonts/amaticsc-normal-700.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:300 600;font-display:swap;src:url(/fonts/newsreader-normal-300-600.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-style:italic;font-weight:300 500;font-display:swap;src:url(/fonts/newsreader-italic-300-500.woff2) format("woff2")}
:root{--noche:#2d3b70;--azul:#55679c;--cielo:#c7e1ef;--crema:#ffedb7;--papel:#fff7e0;--luz:#fdfeff;--naranja:#ffb76d;--vino:#c04850;--rosa:#eda6ac;--verde:#91c473;--mano:"Amatic SC","Patrick Hand",cursive;--texto:Newsreader,Georgia,serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--noche);color:var(--luz);font:400 1.15rem/1.6 var(--texto);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}
h1,h2,h3{font-family:var(--mano);font-weight:700;letter-spacing:.06em;line-height:1.02}
h1{font-size:clamp(3.6rem,10vw,6.4rem)}
h2{font-size:clamp(3rem,7.5vw,4.8rem)}
.ancho{width:min(1160px,100% - 32px);margin-inline:auto}
.lead{font-size:clamp(1.2rem,2.4vw,1.45rem);line-height:1.5;max-width:36em;margin-top:.7rem}
.sub{font-family:var(--mano);font-size:1.8rem;letter-spacing:.08em;color:var(--crema)}
.centro{text-align:center}.centro .lead{margin-inline:auto}
section{padding:clamp(64px,10vw,120px) 0;position:relative}
.primera{padding-top:clamp(120px,16vw,170px);min-height:70svh}
.lienzo{background:linear-gradient(#2d3b70d9,#2d3b70d9),var(--noche) url(/img/marca/lienzo.webp) center/840px}
.papel{background:var(--papel);color:var(--noche)}
.dos{display:grid;gap:clamp(32px,6vw,72px);align-items:center;grid-template-columns:1.25fr 1fr}
.cabeza{margin-bottom:clamp(28px,5vw,48px)}
.boton{display:inline-block;font-family:var(--mano);font-weight:700;font-size:1.65rem;letter-spacing:.08em;line-height:1;text-decoration:none;padding:.62rem 1.5rem .68rem;border-radius:999px;background:var(--noche);color:var(--luz);border:2px solid var(--noche);transition:transform .2s,background .2s,color .2s}
.boton:hover{transform:translateY(-2px) rotate(-1deg);background:var(--vino);border-color:var(--vino);color:var(--luz)}
.boton-luz{background:var(--crema);border-color:var(--crema);color:var(--noche)}
.boton-linea{background:transparent;border-color:var(--luz);color:var(--luz)}
.enlace{display:inline-block;margin-top:1rem;font-family:var(--mano);font-weight:700;font-size:1.7rem;letter-spacing:.08em;color:var(--crema);text-underline-offset:6px}
.ic{width:1.6em;height:1.1em}
/* barra */
.barra{position:absolute;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:1.4rem;padding:26px clamp(30px,5vw,60px)}
.logo img{width:124px}
.nav-ancho{margin-left:auto;display:flex;gap:1.5rem}
.barra nav a{font-family:var(--mano);font-weight:700;font-size:1.5rem;letter-spacing:.08em;text-decoration:none;text-shadow:0 1px 8px #2d3b7099}
.barra nav a:hover,.barra nav a[aria-current]{text-decoration:underline wavy 1.5px;text-underline-offset:6px}
.idioma{font-family:var(--mano);font-weight:700;font-size:1.3rem;text-decoration:none;border:1.5px solid currentColor;border-radius:50%;width:2.3rem;height:2.3rem;display:grid;place-items:center;flex:none}
.menu{display:none;margin-left:auto;position:relative}
.menu summary{list-style:none;cursor:pointer;font-family:var(--mano);font-weight:700;font-size:1.6rem;letter-spacing:.08em}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:2.6rem;background:var(--noche);border:1.5px solid var(--cielo);border-radius:10px;padding:.8rem 1.4rem;display:grid;gap:.35rem;min-width:170px}
.p-videos .barra,.p-album .barra{color:var(--noche)}.p-videos .barra a,.p-album .barra a{text-shadow:none}.p-videos .logo img,.p-album .logo img{filter:brightness(0) saturate(100%) invert(19%) sepia(30%) saturate(1800%) hue-rotate(198deg)}
.p-videos .menu nav,.p-album .menu nav{background:var(--papel);border-color:var(--noche)}
/* portada */
.portada{min-height:min(100svh,1000px);padding:0;display:flex;align-items:flex-end;overflow:hidden;background:var(--noche)}
.p-inicio .logo{visibility:hidden}
.fotos-portada,.fotos-portada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fotos-portada img{opacity:0;animation:cambia 21s infinite;object-position:62% 30%}
.fotos-portada img:nth-child(1){opacity:1;animation-name:primera}
.fotos-portada img:nth-child(2){animation-delay:7s;object-position:45% 50%}
.fotos-portada img:nth-child(3){animation-delay:14s;object-position:80% 60%}
@keyframes cambia{0%{opacity:0;transform:scale(1.07)}5%,33%{opacity:1}38%,100%{opacity:0;transform:scale(1)}}
@keyframes primera{0%,28%{opacity:1;transform:scale(1)}33%,95%{opacity:0;transform:scale(1.05)}100%{opacity:1}}
.portada::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#2d3b70e6 0,#2d3b7080 34%,#2d3b7000 62%),linear-gradient(to bottom,#2d3b7088,#2d3b7000 22%);pointer-events:none}
.orilla{position:absolute;z-index:2;pointer-events:none;background:url(/img/marca/orilla.svg) repeat-x center/auto 100%;opacity:.9}
.o-arriba,.o-abajo{left:0;right:0;height:22px}.o-arriba{top:6px}.o-abajo{bottom:6px}
.o-izq,.o-der{top:50%;width:100svh;height:22px;transform-origin:center}
.o-izq{left:17px;transform:translate(-50%,-50%) rotate(90deg)}.o-der{right:17px;transform:translate(50%,-50%) rotate(-90deg)}
.detalle{position:absolute;z-index:4;display:flex;align-items:center;gap:.4rem;font-family:var(--mano);font-weight:700;font-size:1.45rem;letter-spacing:.06em;text-decoration:none;color:var(--luz);transition:transform .25s}
.detalle .ic{width:50px;height:34px;filter:drop-shadow(0 1px 4px #2d3b7099)}
.detalle span{opacity:0;transition:opacity .2s;text-shadow:0 1px 8px #2d3b70}
.detalle:hover,.detalle:focus-visible{transform:translateY(-4px)}.detalle:hover span,.detalle:focus-visible span{opacity:1}
.d1{top:24%;left:7%;color:var(--noche)}.d1 span{text-shadow:none}.d1 .ic{filter:none}.d2{top:44%;right:6%}.d3{bottom:15%;right:9%}
.texto-portada{position:relative;z-index:3;padding:0 clamp(38px,6vw,76px) clamp(50px,8vh,84px)}
.texto-portada h1 img{width:min(70vw,460px)}
.quien{font-family:var(--mano);font-weight:700;font-size:clamp(1.55rem,3.2vw,2.1rem);letter-spacing:.07em;margin-top:.8rem;color:var(--cielo)}
.frase{font-style:italic;color:var(--crema);font-size:1.25rem}
.acciones{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
/* marcos */
.marco{display:block;position:relative;background:var(--papel);padding:12px;border:24px solid #c9963f;border-image:url(/img/marca/marco.svg) 46 round;box-shadow:0 14px 26px #1b244d55,0 2px 4px #1b244d44}
.marco img{width:100%;aspect-ratio:16/9;object-fit:cover;box-shadow:inset 0 0 0 1px #0002}
.obra-v .marco img{aspect-ratio:9/16}
.play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px;border-radius:50%;background:#fdfeffe0;transition:transform .2s}
.play::after{content:"";position:absolute;left:25px;top:18px;border-left:19px solid var(--noche);border-block:13px solid transparent}
a:hover .play,.lite:hover .play{transform:scale(1.12)}
.lite{display:block;width:100%;position:relative;padding:0}
.marco-grande iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.pared{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(30px,5vw,56px) clamp(20px,3vw,40px);align-items:center;margin-block:clamp(32px,5vw,52px)}
.obra{grid-column:span 6;text-decoration:none;display:block;transition:transform .25s}
.obra-v{grid-column:span 3}
.obra:hover{transform:translateY(-4px) rotate(-.4deg)}
.cedula{display:block;background:#fff;color:var(--noche);box-shadow:0 1px 3px #0003;padding:.5rem .8rem;margin:1rem auto 0;max-width:290px;font-size:.98rem;line-height:1.3}
.cedula b{display:block;font-weight:500}.cedula i{font-size:.88rem;opacity:.8}
/* libreta */
.hoja{background:#fffdf5 repeating-linear-gradient(transparent 0 37px,#c7e1ef 37px 38px);color:var(--noche);padding:44px 38px 30px;box-shadow:0 12px 26px #2d3b7033;transform:rotate(-1.4deg);font:italic 400 clamp(1.3rem,2.6vw,1.6rem)/38px var(--texto);position:relative}
.hoja::before{content:"";position:absolute;top:-13px;left:42%;width:104px;height:28px;background:#ffb76dbb;transform:rotate(-3deg)}
.hoja small{display:block;font:700 1.45rem/38px var(--mano);letter-spacing:.06em;color:var(--vino);margin-top:.4rem}
.libreta h2{margin-bottom:1.2rem}
dialog{border:0;padding:0;margin:auto;background:none;color:inherit;max-height:90svh}
dialog::backdrop{background:#1b244dcc}
.carta{background:#fffdf5;color:var(--noche);width:min(620px,100vw - 32px);padding:38px clamp(22px,5vw,50px);overflow:auto}
.carta h3{font-size:3.2rem}.carta .nota{font-style:italic;margin:.4rem 0 1.1rem}
.carta pre{font:400 1.14rem/1.65 var(--texto);white-space:pre-wrap;margin-bottom:1.5rem}
.cerrar{position:absolute;right:14px;top:6px;font-size:2rem;line-height:1;width:44px;height:44px}
.vista{max-width:94vw}.vista img{max-height:88svh;width:auto}
/* mosaico */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(28px,4vw,44px);box-shadow:0 14px 30px #1b244d55}
.cuadro{aspect-ratio:1;perspective:900px;position:relative;display:block;text-decoration:none}
.giro{position:absolute;inset:0;transition:transform .55s;transform-style:preserve-3d}
.volteado .giro{transform:rotateY(180deg)}
.cara,.dorso{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cara{width:100%;padding:12px;font-family:var(--mano);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.5rem);letter-spacing:.05em;line-height:1.05;background:var(--c);color:var(--t);transition:filter .2s}
.cara:hover{filter:brightness(1.07)}
.dorso{transform:rotateY(180deg);background:var(--noche);overflow:hidden}
.dorso img{width:100%;height:100%;object-fit:cover}
.dorso a{position:absolute;inset:auto 0 0;background:#2d3b70e8;color:var(--luz);font-family:var(--mano);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.5rem);letter-spacing:.05em;line-height:1.1;padding:.5rem;text-align:center;text-decoration:none}
.cuadro-dib{background:var(--c);color:var(--t);display:flex;flex-direction:column;gap:.3rem;align-items:center;justify-content:center;text-align:center;padding:10px;font-family:var(--mano);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:.05em;line-height:1.05}
.cuadro-dib .ic{width:42%;height:34%}.cuadro-dib:hover .ic{transform:translateY(-4px) rotate(-5deg)}.cuadro-dib .ic{transition:transform .2s}
.c-cielo{--c:var(--cielo);--t:var(--noche)}.c-azul{--c:var(--azul);--t:var(--luz)}.c-crema{--c:var(--crema);--t:var(--noche)}.c-vino{--c:var(--vino);--t:var(--luz)}.c-naranja{--c:var(--naranja);--t:var(--noche)}.c-noche{--c:#3a4a86;--t:var(--luz)}.c-rosa{--c:var(--rosa);--t:var(--noche)}.c-verde{--c:var(--verde);--t:var(--noche)}
/* diario */
.entrada{display:grid;grid-template-columns:150px 1fr;gap:1.2rem;align-items:start;text-decoration:none;padding:1.1rem 0;border-top:1px dashed #c7e1ef77}
.entrada img{width:150px;height:100px;object-fit:cover;object-position:50% 25%;border:5px solid var(--papel);transform:rotate(-1.2deg);box-shadow:0 5px 12px #0004;transition:transform .2s}
.entrada:hover img{transform:rotate(1deg) scale(1.03)}
.entrada time{display:block;font-family:var(--mano);font-weight:700;font-size:1.5rem;letter-spacing:.05em;color:var(--crema);line-height:1.2}
.entrada b{display:block;font-weight:500;font-size:1.25rem;line-height:1.3}
.entrada p{opacity:.92;margin-top:.25rem;font-style:italic}
.lienzo .centro{margin-top:2.4rem}.papel .centro{margin-top:2rem}
.archivo{display:grid;grid-template-columns:190px 1fr;gap:clamp(24px,5vw,60px);margin-top:1.6rem}
.archivo nav{position:sticky;top:30px;align-self:start;display:grid;gap:.15rem}
.archivo nav a{font-family:var(--mano);font-weight:700;font-size:1.5rem;letter-spacing:.05em;text-decoration:none}.archivo nav a:hover{color:var(--crema)}
.mes{font-size:2.6rem;margin:2rem 0 .7rem;scroll-margin-top:24px}.mes:first-child{margin-top:0}
/* album */
.album{columns:3;column-gap:clamp(20px,3vw,36px)}
.foto{display:block;width:100%;background:#fffdf5;padding:11px 11px 34px;margin-bottom:clamp(22px,3vw,34px);break-inside:avoid;box-shadow:0 8px 18px #2d3b7033;position:relative;transition:transform .25s}
.foto:nth-child(odd){transform:rotate(-1.6deg)}.foto:nth-child(even){transform:rotate(1.3deg)}
.foto:hover{transform:rotate(0) scale(1.02);z-index:2}
.foto::before{content:"";position:absolute;top:-11px;left:50%;margin-left:-44px;width:88px;height:24px;background:#c7e1efcc;transform:rotate(2deg)}
.foto:nth-child(3n)::before{background:#eda6accc}.foto:nth-child(3n+1)::before{background:#ffb76dbb}
/* cartas, redes */
.cartas{background:var(--vino);text-align:center;color:var(--luz)}
.cartas .lead{margin-inline:auto;margin-bottom:1.5rem}
.sobre{position:relative;width:min(560px,100%);margin:0 auto;padding:30px clamp(20px,5vw,40px) 26px;text-align:left;color:var(--noche);background:#fffdf5;box-shadow:0 14px 28px #5e1c2255;transform:rotate(-1deg);transition:transform .7s,opacity .7s;background-image:repeating-linear-gradient(135deg,var(--vino) 0 12px,transparent 12px 24px,var(--azul) 24px 36px,transparent 36px 48px);background-size:100% 7px;background-repeat:no-repeat}
.sobre label{display:block;font-family:var(--mano);font-weight:700;font-size:2rem;letter-spacing:.06em;line-height:1.1;padding-right:80px}
.timbre{position:absolute;top:22px;right:22px;width:62px;height:74px;display:grid;place-items:center;background:var(--azul);outline:3px dotted #fffdf5;outline-offset:-1px;box-shadow:0 0 0 3px var(--azul);transform:rotate(3deg);transition:transform .9s cubic-bezier(.3,-.3,.5,1)}
.timbre img{width:42px}
.renglon{display:flex;align-items:baseline;gap:.6rem;border-bottom:2px solid var(--noche);margin:.9rem 0 1.2rem}
.renglon span{font-style:italic}
.renglon input{flex:1;min-width:0;border:0;background:none;font:italic 400 1.3rem/1.5 var(--texto);color:var(--noche);padding:.25rem 0}
.renglon input::placeholder{color:#55679ca6}.renglon input:focus{outline:none}
.renglon:focus-within{border-color:var(--vino);box-shadow:0 2px 0 var(--vino)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px}
.aviso-form{margin-top:.7rem;font-family:var(--mano);font-weight:700;font-size:1.6rem;letter-spacing:.04em;line-height:1.1}.aviso-form:empty{display:none}
.sobre.enviado{transform:rotate(1deg)}.sobre.enviado .timbre{transform:translate(70px,-150px) rotate(24deg) scale(.7);opacity:0;transition:transform .9s,opacity .9s .4s}
.sobre.enviado label,.sobre.enviado .renglon,.sobre.enviado .boton{display:none}.sobre.enviado .aviso-form{margin:0;font-size:2.1rem}
.cartas .pie a{color:inherit}
.legal{max-width:40em}.legal h2{font-size:2.5rem;margin:1.6rem 0 .2rem}.legal .sub{margin-top:2rem;font-size:1.5rem}
footer small a{color:inherit}
.cartas .pie{font-size:1rem;margin-top:.9rem}
.redes{text-align:center}
.fila-redes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:2rem}
.red{display:grid;justify-items:center;gap:.25rem;border:1.5px solid var(--cielo);border-radius:14px;padding:1.5rem 1rem;text-decoration:none;transition:background .2s,color .2s;min-width:0}
.red b{font-family:var(--mano);font-size:2.2rem;letter-spacing:.06em;line-height:1}.red span{font-size:.95rem;overflow-wrap:anywhere}
.red .ic{width:58px;height:36px}
.red:hover{background:var(--cielo);color:var(--noche)}
.presentacion{max-width:880px;margin:0 auto 2.6rem}
.bio{max-width:36em;margin:auto}.bio p+p{margin-top:1rem}
footer{background:#222d59;padding:48px 0;text-align:center}
footer img{width:128px;margin:0 auto .4rem}footer p{font-style:italic;color:var(--crema)}
footer nav{display:flex;gap:1.2rem;justify-content:center;margin:.8rem 0}footer small{opacity:.8}
.companera{position:fixed;right:14px;top:50%;margin-top:-30px;z-index:15;width:58px;will-change:transform;filter:drop-shadow(0 2px 5px #1b244d88)}
.companera img{width:100%;transition:transform .2s}.companera:hover img{transform:scale(1.18) rotate(-8deg)}
@media(max-width:900px){.nav-ancho{display:none}.menu{display:block}.dos{grid-template-columns:1fr}.obra{grid-column:span 12}.obra-v{grid-column:span 6}.archivo{grid-template-columns:1fr}.archivo nav{position:static;display:flex;flex-wrap:wrap;gap:.2rem 1rem}.album{columns:2}}
@media(max-width:560px){body{font-size:1.08rem}.mosaico{grid-template-columns:repeat(2,1fr)}.cara{font-size:1.8rem}.fila-redes{grid-template-columns:1fr}.album{columns:1;padding-inline:8px}.entrada{grid-template-columns:96px 1fr;gap:.9rem}.entrada img{width:96px;height:96px}.marco{border-width:16px;padding:7px}.play{width:50px;height:50px;margin:-25px}.play::after{left:20px;top:14px;border-left-width:16px;border-block-width:11px}.companera{width:42px;right:6px}.barra{padding:24px 28px}.d1{top:17%;left:9%}.d2{top:36%;right:9%}.d3{display:none}.fotos-portada img:nth-child(1){object-position:66% 30%}.fotos-portada img:nth-child(2){object-position:40% 50%}.fotos-portada img:nth-child(3){object-position:82% 60%}.detalle span{display:none}.hoja{padding:40px 22px 24px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.fotos-portada img:nth-child(1){opacity:1}}