/* Modelo 13 — Cuaderno. Los colores los reemplaza el desplegador (no cambiar el nombre de las variables). */
:root {
    --color-server: #db9600;
    --color-server-rgb: 219,150,0;
    --color-server-hover-dark: #bd7800;
    --color-server-hover-light: #f9b41e;
    --color-server2: #;
    --color-server2-rgb: 0,0,0;
    --color-server2-hover-dark: #000000;
    --color-server2-hover-light: #1e1e1e;
    --pw-fuente: "Nunito", system-ui, sans-serif;
    --pw-fuente-titulos: "Grandstander", "Nunito", sans-serif;
    --m13-mano: "Caveat", cursive;
    --pw-fondo: #fffdf8;
    --pw-fondo-alt: #fdf3e3;
    --pw-radio: 14px;
    --pw-sombra: 0 6px 14px rgba(70, 50, 20, .12);
    --m13-renglon: #d7e6f5;
    --m13-margen: #f3a4a4;
}
body { background: var(--pw-fondo); }
.pw-boton { border-radius: 12px; font-family: var(--pw-fuente-titulos); font-size: 1.08rem; border: 2px solid var(--pw-texto); box-shadow: 4px 4px 0 var(--pw-texto); }
.pw-boton:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--pw-texto); }
.pw-boton--borde { background: #fff; color: var(--pw-texto); }

/* Colores de notas adhesivas */
.m13-n1 { --m13-c: #fff27a; } .m13-n2 { --m13-c: #ffc4d6; } .m13-n3 { --m13-c: #b8f2c9; } .m13-n4 { --m13-c: #bfe3ff; }

.m13-cabecera { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px clamp(16px, 4vw, 40px); background: var(--pw-fondo); border-bottom: 2px dashed var(--pw-texto-suave); }
.m13-cabecera .pw-marca { font-family: var(--pw-fuente-titulos); font-size: 1.25rem; font-weight: 400; }
.m13-cabecera .pw-marca img { height: 50px; }
.m13-cabecera .pw-menu a { font-family: var(--pw-fuente-titulos); font-weight: 400; font-size: 1.05rem; }
.m13-cabecera .pw-menu a:hover { background: #fff27a; transform: rotate(-2deg); }

/* Portada en hoja de cuaderno con espiral */
.m13-portada { padding: 36px clamp(12px, 4vw, 56px) 46px; background: var(--pw-fondo-alt); }
.m13-cuaderno { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 64px) clamp(28px, 5vw, 56px) clamp(64px, 8vw, 110px);
    background: linear-gradient(90deg, transparent 0 calc(clamp(64px, 8vw, 110px) - 22px), var(--m13-margen) 0 calc(clamp(64px, 8vw, 110px) - 20px), transparent 0), #fff repeating-linear-gradient(transparent 0 35px, var(--m13-renglon) 35px 36px);
    border-radius: 6px 18px 18px 6px; box-shadow: 0 16px 30px rgba(70, 50, 20, .14); overflow: hidden; }
.m13-espiral { position: absolute; top: 18px; bottom: 18px; left: 12px; width: 26px; background: radial-gradient(circle at 13px 13px, var(--pw-fondo-alt) 6px, #9aa3ad 7px 9px, transparent 10px) 0 0 / 26px 34px repeat-y; }
.m13-slide { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.m13-portada h1, .m13-slide__titulo { font-family: var(--pw-fuente-titulos); font-weight: 700; font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.05; color: var(--pw-primario-texto); margin: 0; }
.m13-slide p { font-size: 1.15rem; line-height: 36px; margin: 10px 0 0; }
.m13-botones { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.m13-subrayado { display: block; width: min(260px, 70%); height: 16px; margin-top: 4px; fill: none; stroke: var(--pw-secundario); stroke-width: 3.5; stroke-linecap: round; }
.m13-doodle { position: absolute; color: var(--pw-secundario); font-size: 2.2rem; opacity: .55; transform: rotate(-12deg); }
.m13-doodle--1 { top: 18px; right: 5%; } .m13-doodle--2 { bottom: 20px; right: 42%; color: #f2b400; } .m13-doodle--3 { top: 46%; left: 48%; color: var(--pw-primario-texto); font-size: 1.6rem; }
@media (max-width: 820px) { .m13-slide { grid-template-columns: 1fr; } .m13-doodle { display: none; } }

/* Fotos pegadas con cinta washi */
.m13-pegada { position: relative; display: block; margin: 0; padding: 10px; background: #fff; box-shadow: var(--pw-sombra); transform: rotate(var(--giro, 0deg)); text-decoration: none; color: var(--pw-texto); transition: transform .25s; }
.m13-pegada:hover { transform: rotate(0) scale(1.03); }
.m13-pegada img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.m13-pegada figcaption { font-family: var(--pw-fuente-titulos); text-align: center; padding-top: 8px; }
.m13-pegada--portada { width: min(100%, 420px); justify-self: center; }
.m13-pegada--portada img, .m13-somos .m13-pegada img { aspect-ratio: 4 / 3; }
.m13-cinta { position: absolute; top: -12px; left: 50%; width: 110px; height: 28px; margin-left: -55px; transform: rotate(-4deg); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--m13-c, var(--pw-secundario)) 85%, #fff) 0 8px, color-mix(in srgb, var(--m13-c, var(--pw-secundario)) 60%, #fff) 8px 16px); opacity: .9; z-index: 2; }
.m13-cinta--2 { top: auto; bottom: -10px; left: 85%; transform: rotate(-38deg); width: 80px; }
.m13-fotos .pw-carrusel__pista { padding: 22px 8px 18px; }

/* Secciones */
.m13-seccion--alt { background: var(--pw-fondo-alt); }
.m13-titulo { text-align: center; margin-bottom: 32px; display: grid; justify-items: center; }
.m13-titulo h2 { font-family: var(--pw-fuente-titulos); font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 2.7rem); margin: 0; }
.m13-titulo p { color: var(--pw-texto-suave); margin: 6px 0 0; }
.m13-centro { text-align: center; margin-top: 30px; }
.m13-hoja { background: #fff repeating-linear-gradient(transparent 0 31px, var(--m13-renglon) 31px 32px); border-left: 3px solid var(--m13-margen); padding: 24px 26px; border-radius: 4px; box-shadow: var(--pw-sombra); }
.m13-somos { display: grid; grid-template-columns: 1fr 1.25fr; gap: 50px; align-items: center; }
.m13-somos .m13-titulo { justify-items: start; text-align: left; }
.m13-renglon { font-size: 1.08rem; }
@media (max-width: 820px) { .m13-somos { grid-template-columns: 1fr; } }

/* Carpetas */
.m13-carpetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 34px 24px; padding-top: 24px; }
.m13-carpeta { position: relative; display: grid; gap: 6px; padding: 28px 20px 22px; background: var(--m13-c); border: 2px solid var(--pw-texto); border-radius: 0 14px 14px 14px; box-shadow: 5px 5px 0 var(--pw-texto); text-decoration: none; color: var(--pw-texto); transition: transform .2s; }
.m13-carpeta:hover { transform: translate(-3px, -3px); }
.m13-carpeta__pestana { position: absolute; top: -26px; left: -2px; padding: 2px 18px; background: var(--m13-c); border: 2px solid var(--pw-texto); border-bottom: 0; border-radius: 12px 12px 0 0; font-size: 1.1rem; }
.m13-carpeta b { font-family: var(--pw-fuente-titulos); font-size: 1.35rem; }

/* Notas adhesivas */
.m13-notas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px; }
.m13-nota { position: relative; padding: 20px 18px; background: var(--m13-c); box-shadow: 0 12px 14px -8px rgba(0, 0, 0, .25); transform: rotate(var(--giro)); transition: transform .2s; }
.m13-nota::after { content: ""; position: absolute; right: 0; bottom: 0; border-width: 0 0 22px 22px; border-style: solid; border-color: transparent transparent var(--pw-fondo) color-mix(in srgb, var(--m13-c) 70%, #000); }
.m13-nota:hover { transform: rotate(0) scale(1.03); }
.m13-nota__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 10px; }
.m13-nota small { font-weight: 700; color: color-mix(in srgb, var(--pw-texto) 70%, transparent); }
.m13-nota h3 { font-family: var(--pw-fuente-titulos); font-size: 1.25rem; margin: 4px 0 6px; }
.m13-nota h3 a { color: var(--pw-texto); text-decoration: none; }
.m13-nota p { margin: 0; font-size: .95rem; }

/* Personal como stickers */
.m13-equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px; text-align: center; }
.m13-equipo a { display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--pw-texto); }
.m13-sticker { width: 130px; height: 130px; border-radius: 50%; padding: 6px; background: var(--m13-c); border: 2px solid var(--pw-texto); box-shadow: 4px 4px 0 var(--pw-texto); margin-bottom: 10px; transition: transform .2s; }
.m13-equipo a:hover .m13-sticker { transform: rotate(-8deg); }
.m13-sticker img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.m13-equipo b { font-family: var(--pw-fuente-titulos); font-size: 1.15rem; }
.m13-equipo small { color: var(--pw-texto-suave); }

/* Eventos como lista de tareas */
.m13-agenda { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 30px; align-items: start; }
@media (max-width: 860px) { .m13-agenda { grid-template-columns: 1fr; } }
.m13-cal { background: #fff; border: 2px solid var(--pw-texto); border-radius: 12px; padding: 14px; box-shadow: 5px 5px 0 var(--pw-texto); }
.m13-lista { list-style: none; margin: 0; padding: 0; }
.m13-lista button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 1.08rem; text-align: left; cursor: pointer; line-height: 32px; }
.m13-lista button:hover span:last-child { text-decoration: underline wavy var(--pw-primario); }
.m13-check { flex: none; width: 22px; height: 22px; border: 2px solid var(--pw-texto); border-radius: 5px; background: #fff; }
.m13-lista b { color: var(--pw-primario-texto); }

.m13-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.m13-accesos a { display: grid; justify-items: center; gap: 8px; padding: 22px 12px; border: 2px solid var(--pw-texto); border-radius: 14px; background: var(--m13-c); box-shadow: 4px 4px 0 var(--pw-texto); text-decoration: none; color: var(--pw-texto); font-family: var(--pw-fuente-titulos); font-size: 1.15rem; text-align: center; transition: transform .2s; }
.m13-accesos a:hover { transform: translate(-2px, -2px); }
.m13-accesos span { font-size: 1.8rem; }
.m13-datos p { display: flex; gap: 10px; }
.m13-datos i { color: var(--pw-primario-texto); margin-top: 5px; }

/* Subpáginas */
.m13-titular { display: grid; justify-items: center; padding: 60px 16px 50px; text-align: center; background: var(--pw-fondo-alt) repeating-linear-gradient(transparent 0 35px, var(--m13-renglon) 35px 36px); }
.m13-titular h1 { font-family: var(--pw-fuente-titulos); font-weight: 700; font-size: clamp(2rem, 5vw, 3.2rem); color: var(--pw-primario-texto); margin: 0; }
.m13-titular p { margin: 8px 0 0; color: var(--pw-texto-suave); max-width: 720px; }
.pw-tarjeta { border: 2px solid var(--pw-texto); box-shadow: 5px 5px 0 var(--pw-texto); }
.pw-tarjeta h3 { font-family: var(--pw-fuente-titulos); font-weight: 400; }

/* Pie */
.m13-pie { background: var(--pw-texto); color: #f3f4f6; text-align: center; border-top: 10px solid; border-image: repeating-linear-gradient(90deg, #fff27a 0 40px, #ffc4d6 40px 80px, #b8f2c9 80px 120px, #bfe3ff 120px 160px) 10; }
.m13-pie__cuerpo { max-width: var(--pw-ancho); margin: 0 auto; padding: 44px 16px 24px; }
.m13-pie__logo { max-height: 76px; width: auto; margin: 0 auto 10px; }
.m13-pie__lema { font-family: var(--pw-fuente-titulos); font-size: 1.4rem; margin: 0 0 14px; }
.m13-pie a { color: #fff; }
.m13-pie .pw-redes { justify-content: center; }
.m13-pie .pw-redes a { background: rgba(255, 255, 255, .14); color: #fff; }
.m13-pie .pw-redes a:hover { background: #fff27a; color: var(--pw-texto); }
.m13-pie__cols { margin: 28px 0; text-align: left; }
.m13-pie__firma { font-size: .85rem; opacity: .8; margin: 0; }

/* Puntos de la portada debajo del banner (sobre fondo claro no se verían y taparían los botones) */
.m13-portada .pw-carrusel__puntos { position: static; margin-top: 18px; }
.m13-portada .pw-carrusel__puntos button { background: color-mix(in srgb, var(--pw-texto) 22%, transparent); }
.m13-portada .pw-carrusel__puntos button[aria-current="true"] { background: var(--pw-primario); }

/* ===== Rediseño: tipografía más ligera, anotaciones manuscritas y banda final ===== */
h1, h2, h3 { letter-spacing: -.01em; }
.m13-mano { display: block; font-family: var(--m13-mano); font-size: 1.6rem; font-weight: 700; color: var(--pw-secundario-oscuro); line-height: 1; margin-bottom: 6px; transform: rotate(-2deg); transform-origin: left; }
.m13-portada h1, .m13-slide__titulo { letter-spacing: -.02em; line-height: 1.02; }
.m13-portada__foto { position: relative; justify-self: center; width: min(100%, 440px); }
.m13-anota { position: absolute; z-index: 3; left: -130px; bottom: 30px; display: flex; flex-direction: column; align-items: flex-end; font-family: var(--m13-mano); font-weight: 700; font-size: 1.7rem; color: var(--pw-primario-texto); transform: rotate(-6deg); }
.m13-anota svg { width: 90px; height: 54px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; margin-right: -50px; transform: rotate(-20deg); }
@media (max-width: 1100px) { .m13-anota { display: none; } }
.m13-titulo p { font-family: var(--m13-mano); font-size: 1.45rem; color: var(--pw-texto-suave); }
.pw-boton { border-width: 2px; box-shadow: 3px 3px 0 var(--pw-texto); }
.m13-visita .pw-seccion { padding-top: 30px; padding-bottom: clamp(70px, 9vw, 110px); }
.m13-visita__nota { position: relative; max-width: 820px; margin: 0 auto; padding: clamp(40px, 6vw, 70px) clamp(24px, 5vw, 60px); text-align: center; background: #fff27a; transform: rotate(-1.2deg); box-shadow: 0 22px 30px -16px rgba(0, 0, 0, .3); }
.m13-visita__nota .m13-mano { transform: none; }
.m13-visita__nota h2 { font-family: var(--pw-fuente-titulos); font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; margin: 6px 0 24px; }
.m13-visita__nota .m13-botones { justify-content: center; }
.m13-visita__nota .m13-cinta { top: -14px; }
.m13-portada .m13-cuaderno { padding-top: clamp(56px, 7vw, 80px); }
.m13-doodle--3 { display: none; }

/* Ritmo compacto (2026-10-22): menos aire entre secciones y títulos más contenidos */
.m13-seccion > .pw-seccion { padding-block: clamp(36px, 4.5vw, 56px); }
.m13-titulo { margin-bottom: 24px; }
.m13-titulo h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.m13-centro { margin-top: 22px; }
.m13-portada h1, .m13-slide__titulo { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.m13-titular h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.m13-visita .pw-seccion { padding-bottom: clamp(48px, 6vw, 72px); }
.m13-visita__nota { padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px); }
.m13-visita__nota h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }