html[data-piel] .trz-d{ stroke-dasharray:1 2; stroke-dashoffset:1.001; }
html[data-piel] .trz-arma .trz-d,
html[data-piel].trz-cargado .hero--nivel .trz-d,
html[data-piel] .se-traza .trz-firma .trz-d,
html[data-piel] .se-traza .trz-sub-tit .trz-d,
html[data-piel] .se-traza .trz-esquina .trz-d,
html[data-piel] .cierre.se-traza .trz-filete .trz-d,
html[data-piel] .entrar__botones.se-traza .trz-cta .trz-d,
html[data-piel] .momento[aria-current="true"] .trz-aro .trz-d,
html[data-piel] .dia__tab[aria-selected="true"] .trz-tab .trz-d,
html[data-piel] .trz-garabato.pisa .trz-d{
stroke-dashoffset:0;
transition:stroke-dashoffset var(--t,1s) cubic-bezier(.55,.08,.35,1) var(--d,0s);
}
/* con la intro del emblema, el hero espera a que el sello aterrice */
html[data-piel].intro-viva .hero--nivel .trz-d{ transition-delay:calc(var(--d,0s) + 2.95s); }
html[data-piel]:not(.js-traza) .trz-firma .trz-d,
html[data-piel]:not(.js-traza) .trz-sub-tit .trz-d,
html[data-piel]:not(.js-traza) .trz-esquina .trz-d,
html[data-piel]:not(.js-traza) .trz-filete .trz-d,
html[data-piel]:not(.js-traza) .trz-cta .trz-d{ stroke-dashoffset:0; }
/* el texto de los garabatos (E = mc²) llega cuando ya se trazó lo demás */
html[data-piel] .trz-txt{ opacity:0; transition:opacity .6s ease 1.6s; }
html[data-piel] .se-traza .trz-txt{ opacity:1; }
/* ---------- 1 · filo inferior del hero ---------- */
html[data-piel] .trz-filo{ position:absolute; left:0; bottom:-1px; width:100%; z-index:2; pointer-events:none; display:block; }
/* los hechos suben lo que mide la tira de papel, para que ninguno quede cortado */
html[data-piel="crayon"] .hero--nivel .hechos__marco{ padding-bottom:calc(clamp(18px,3vh,30px) + 30px); }
html[data-piel="lapiz"] .hero--nivel .hechos__marco{ padding-bottom:calc(clamp(18px,3vh,30px) + 24px); }
/* ---------- 2 · rayas con el instrumento ---------- */
/* eyebrows: la raya de 72 px deja de ser una línea de 1 px */
html[data-piel] .trz-con-firma::before{ display:none !important; }
html[data-piel] .trz-firma{ display:block; margin:0 0 7px -3px; overflow:visible; }
html[data-piel] .hero__eyebrow .trz-firma{ margin-bottom:10px; }
/* la raya dorada de los seis hechos */
html[data-piel] .hero--nivel .hechos__marco{ position:relative; border-top-color:transparent; }
html[data-piel] .trz-raya{ position:absolute; left:0; top:-8px; overflow:visible; pointer-events:none; }
/* filetes de cierre: el svg ocupa 14 px pero el filete sigue pesando 1 px en la página */
html[data-piel] .cierre__filete{ height:14px; margin-block:-6.5px; background:none; opacity:1; transform:none !important; transition:none; }
html[data-piel] .trz-filete{ display:block; overflow:visible; }
/* ---------- 3 · subrayado a mano en el título ---------- */
html[data-piel] .trz-marca{ white-space:nowrap; }
html[data-piel] .niv__enca{ position:relative; }
html[data-piel] .trz-sub-tit{ position:absolute; pointer-events:none; overflow:visible; z-index:0; }
/* ---------- 4 · un día: aro del momento activo y pestaña ---------- */
html[data-piel] .momento__hora{ position:relative; }
html[data-piel] .trz-aro{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; overflow:visible; }
html[data-piel] .dia__tab{ position:relative; }
html[data-piel] .dia__tab::after{ display:none; }
html[data-piel] .trz-tab{ position:absolute; left:0; bottom:-7px; pointer-events:none; overflow:visible; }
/* ---------- 5 · subrayado de los botones ---------- */
html[data-piel] .entrar__cta{ position:relative; }
html[data-piel] .entrar__cta::after{ display:none; }
html[data-piel] .trz-cta{ position:absolute; left:0; bottom:-8px; pointer-events:none; overflow:visible; }
html[data-piel] .hero__ir{ position:relative; border-bottom-color:transparent !important; }
/* ---------- 6 · papel tapiz ---------- */
/* esquina libre del encabezado: el dibujo se sienta a la derecha, centrado en alto */
html[data-piel] .trz-esquina{ position:absolute; right:0; top:50%; transform:translateY(-50%); pointer-events:none; z-index:0; }
html[data-piel] .trz-esquina__svg{ display:block; overflow:visible; }
/* margen izquierdo: capa del alto de la sección, en el hueco del marco */
html[data-piel] .trz-margen{ position:absolute; left:0; top:0; bottom:0; pointer-events:none; z-index:1; }
html[data-piel] .trz-margen > svg{ display:block; overflow:visible; }
/* huellitas: se estampan cuando el lector llega, se borran si sube */
html[data-piel] .trz-pisada > g{ opacity:0; transform-box:fill-box; transform-origin:center; }
html[data-piel] .trz-pisada{ overflow:visible; }
html[data-piel] .trz-pisada > g{ transition:opacity .35s ease; }
html[data-piel] .trz-pisada.pisa > g{ opacity:.82; animation:trz-estampa .42s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes trz-estampa{ from{ scale:1.45; } to{ scale:1; } }
html[data-piel] .musculo .trz-pisada.pisa > g{ opacity:.7; }
html[data-piel="lapiz"] .dia,
html[data-piel="lapiz"] .entrar{
background-image:linear-gradient(rgba(0,68,132,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,68,132,.06) 1px, transparent 1px);
background-size:24px 24px; background-position:0 0;
}
html[data-piel] .dia, html[data-piel] .etapas, html[data-piel] .aprenden, html[data-piel] .entrar, html[data-piel] .musculo, html[data-piel] .cuida{ position:relative; }
/* ---------- celular ----------
Solo el filo del hero, las rayas, el aro y los subrayados: ni tapiz ni
esquinas (el margen es de 16 px y la pantalla ya va llena). */
@media (max-width:900px){
html[data-piel] .trz-margen, html[data-piel] .trz-esquina{ display:none; }
html[data-piel="lapiz"] .dia, html[data-piel="lapiz"] .entrar{ background-size:20px 20px; }
}
@media (prefers-reduced-motion:reduce){
html[data-piel] .trz-d{ stroke-dashoffset:0 !important; transition:none !important; }
html[data-piel] .trz-pisada > g{ opacity:.82 !important; animation:none !important; }
html[data-piel] .trz-txt{ opacity:1; transition:none; }
}
/* etiquetas Maternal / Preescolar: su raya recta deja el lugar al trazo */
html[data-piel] .etapas__par .etapa__eti .trz-d{ stroke-dashoffset:1.001; }
html[data-piel] .etapas__par.se-traza .etapa__eti .trz-d{ stroke-dashoffset:0; transition:stroke-dashoffset .7s cubic-bezier(.55,.08,.35,1) calc(var(--esc,0s) + .5s); }
html[data-piel] .trz-pisada.pisa > g{ opacity:.9; }
/* aro a mano alrededor de A·B·C·D (cómo aprenden) y de 01·02·03 (para entrar) */
html[data-piel] .pilar__n, html[data-piel] .paso__n{ position:relative; }
html[data-piel] .trz-circ{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; overflow:visible; }
html[data-piel] .se-traza .trz-circ .trz-d{ stroke-dashoffset:0; transition:stroke-dashoffset var(--t,1s) cubic-bezier(.55,.08,.35,1) var(--d,0s); }
html[data-piel]:not(.js-traza) .trz-circ .trz-d{ stroke-dashoffset:0; }
/* La raya dibujada ocupa EXACTAMENTE lo que ocupaba la de 1 px (1 px + su margen):
el trazo es más alto, así que se come el margen. Medido contra alternativa. */
html[data-piel="crayon"] .niv__ante .trz-firma{ margin:-2px 0 -2px -3px; } /* 16 px → 12 (1 + 11) */
html[data-piel="lapiz"] .niv__ante .trz-firma{ margin:-1px 0 0 -3px; } /* 13 px → 12 */
html[data-piel="crayon"] .etapa__eti .trz-firma{ margin:-2px 0 -3px -3px; } /* 16 px → 11 (1 + 10) */
html[data-piel="crayon"] .hero__eyebrow .trz-firma{ margin:-2px 0 3px -3px; } /* 16 px → 17 (1 + 16) */
html[data-piel="lapiz"] .hero__eyebrow .trz-firma{ margin:0 0 4px -3px; } /* 13 px → 17 */
/* un dibujo junto a cada pilar (A·B·C·D) y a cada momento del día */
html[data-piel] .pilar__t, html[data-piel] .momento__que b{ position:relative; }
html[data-piel] .trz-ico{ position:absolute; pointer-events:none; line-height:0; }
html[data-piel] .trz-ico__svg{ display:block; overflow:visible; }
html[data-piel] .pilares.se-traza .trz-ico .trz-d,
html[data-piel] .dia__cuerpo.se-traza .trz-ico .trz-d{ stroke-dashoffset:0; transition:stroke-dashoffset var(--t,1s) cubic-bezier(.55,.08,.35,1) var(--d,0s); }
html[data-piel]:not(.js-traza) .trz-ico .trz-d{ stroke-dashoffset:0; }
/* el momento activo pinta su dibujo en azul */
html[data-piel] .trz-ico path{ transition:stroke .4s ease; }
html[data-piel] .momento[aria-current="true"] .trz-ico path{ stroke:#004484; }
html[data-piel] .cuida__punto-b{ overflow:visible; }
/* la palomita ES el punto: el círculo se retira y la palomita cae sobre la línea */
html[data-piel="lapiz"] .cuida__punto-b, html[data-piel="plumon"] .cuida__punto-b{ background:transparent; border-color:transparent; box-shadow:none; }
html[data-piel] .trz-palomita{ position:absolute; left:-4px; top:-15px; pointer-events:none; overflow:visible; }
html[data-piel] .cuida__puntos.se-traza .trz-palomita .trz-d{ stroke-dashoffset:0; transition:stroke-dashoffset var(--t,1s) cubic-bezier(.55,.08,.35,1) var(--d,0s); }
html[data-piel]:not(.js-traza) .trz-palomita .trz-d{ stroke-dashoffset:0; }
/* la regla de los hechos: su línea cae donde estaba la raya dorada */
html[data-piel] .trz-regla{ top:-4px; }
html[data-piel] .trz-miss{ position:absolute; pointer-events:none; line-height:0; z-index:1; }
html[data-piel] .trz-miss__svg{ display:block; overflow:visible; }
html[data-piel] .cierre{ position:relative; }
html[data-piel] .se-traza .trz-miss .trz-d, html[data-piel] .trz-miss.vivo .trz-d{ stroke-dashoffset:0; transition:stroke-dashoffset var(--t,1s) cubic-bezier(.55,.08,.35,1) var(--d,0s); }
html[data-piel]:not(.js-traza) .trz-miss .trz-d{ stroke-dashoffset:0; }
/* lo manuscrito se ESCRIBE: primero el contorno, luego la tinta */
html[data-piel] .trz-mano{ stroke-dasharray:600; stroke-dashoffset:600; fill-opacity:0; }
html[data-piel] .se-traza .trz-mano, html[data-piel] .trz-garabato.pisa .trz-mano, html[data-piel] .trz-miss.vivo .trz-mano{
stroke-dashoffset:0; fill-opacity:1;
transition:stroke-dashoffset 1.1s ease var(--d,0s), fill-opacity .5s ease calc(var(--d,0s) + .55s); }
html[data-piel]:not(.js-traza) .trz-mano{ stroke-dashoffset:0; fill-opacity:1; }
@media (prefers-reduced-motion:reduce){ html[data-piel] .trz-mano{ stroke-dashoffset:0 !important; fill-opacity:1 !important; transition:none !important; } }
/* así cuidamos: sin línea corrida; los tramos entre palomitas los dibuja trazo.js */
html[data-piel="lapiz"] .cuida__puntos::before, html[data-piel="plumon"] .cuida__puntos::before{ display:none; }
html[data-piel] .trz-tramo{ pointer-events:none; overflow:visible; }
html[data-piel] .cuida__puntos.se-traza .trz-tramo .trz-d{ stroke-dashoffset:0; transition:stroke-dashoffset var(--t,1s) cubic-bezier(.45,0,.55,1) var(--d,0s); }
html[data-piel]:not(.js-traza) .trz-tramo .trz-d{ stroke-dashoffset:0; }
/* la franja del hero: los hechos suben lo que mide */
html[data-piel="plumon"] .hero--nivel .hechos__marco{ padding-bottom:calc(clamp(18px,3vh,30px) + 22px); }
/* marcatextos DETRÁS de la palabra: el encabezado es su propio contexto de apilado */
html[data-piel="plumon"] .niv__enca{ isolation:isolate; }
html[data-piel="plumon"] .trz-sub-tit--marca{ z-index:-1; mix-blend-mode:multiply; }
html[data-piel="plumon"] .cuida .trz-sub-tit--marca{ mix-blend-mode:normal; }
/* bullet journal: cuadrícula de puntos detrás del día y de "para entrar" */
html[data-piel="plumon"] .dia,
html[data-piel="plumon"] .entrar{
background-image:radial-gradient(circle, rgba(0,68,132,.16) 1.1px, transparent 1.4px);
background-size:22px 22px; background-position:0 0;
}
html[data-piel="plumon"] .trz-resalta{ stroke-linecap:butt; }
/* la raya de marcatextos ocupa lo mismo que la de 1 px (medido contra alternativa) */
html[data-piel="plumon"] .niv__ante .trz-firma{ margin:-1px 0 0 -3px; } /* 13 px → 12 */
html[data-piel="plumon"] .hero__eyebrow .trz-firma{ margin:0 0 4px -3px; } /* 13 px → 17 */
.trz-postit{
position:absolute; z-index:4; box-sizing:border-box; display:flex; align-items:center; justify-content:center; text-align:center;
transform:rotate(var(--rot,4deg)); transform-origin:50% 0; pointer-events:auto;
font-family:'Caveat','Segoe Print',cursive; font-weight:700; color:#10254F;
box-shadow:0 14px 20px -12px rgba(12,31,79,.55), 0 2px 3px rgba(12,31,79,.12);
transition:transform .35s cubic-bezier(.3,1.6,.5,1);
}
.trz-postit__txt{ margin:0; line-height:1.02; }
.trz-postit__txt small{ display:block; margin-top:5px; font-size:.58em; line-height:1.1; opacity:.8; }
/* colores de post-it de verdad */
.trz-postit--canario{ background:linear-gradient(170deg,#FFF6A0 0%,#FFEF6B 55%,#F7E35A 100%); }
.trz-postit--cielo{ background:linear-gradient(170deg,#BFE8FF 0%,#9FD9FB 60%,#86CBF2 100%); }
.trz-postit--rosa{ background:linear-gradient(170deg,#FF9CCB 0%,#FF7EB9 60%,#F46AA8 100%); }
.trz-postit--naranja{ background:linear-gradient(170deg,#FFB86B 0%,#FF9F43 60%,#F58C2E 100%); }
.trz-postit--lima{ background:linear-gradient(170deg,#DAFB8E 0%,#C3F062 60%,#AEDE4A 100%); }
/* 1 · cuadrado con tachuela */
.trz-postit--pin{ width:clamp(118px,10vw,146px); aspect-ratio:1; padding:18px 12px 12px; }
.trz-postit--pin .trz-postit__txt{ font-size:clamp(22px,1.8vw,28px); }
.trz-postit--pin .trz-postit__cinta{ position:absolute; top:-6px; left:50%; width:16px; height:16px; margin-left:-8px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, #FF6B5E, #C2322A 70%); box-shadow:0 3px 4px rgba(12,31,79,.35); }
/* 2 · alargado con renglones y cinta en la esquina */
.trz-postit--rayado{ width:clamp(150px,13vw,190px); aspect-ratio:1.45; padding:14px 14px 10px;
background-image:repeating-linear-gradient(transparent 0 21px, rgba(16,37,79,.13) 21px 22px), linear-gradient(170deg,#BFE8FF 0%,#9FD9FB 60%,#86CBF2 100%); }
.trz-postit--rayado .trz-postit__txt{ font-size:clamp(24px,2vw,32px); }
.trz-postit--rayado .trz-postit__cinta{ position:absolute; top:-8px; left:-14px; width:54px; height:20px; transform:rotate(-38deg);
background:rgba(255,255,255,.6); box-shadow:0 1px 2px rgba(12,31,79,.12); }
/* 3 · esquina levantada (se está despegando) y cinta arriba */
.trz-postit--doblez{ width:clamp(128px,11vw,158px); aspect-ratio:1; padding:18px 12px 18px; }
.trz-postit--doblez .trz-postit__txt{ font-size:clamp(21px,1.7vw,27px); }
.trz-postit--doblez::after{ content:""; position:absolute; right:0; bottom:0; width:34px; height:34px;
background:linear-gradient(315deg, transparent 50%, rgba(255,255,255,.55) 50%, #FFC98E 100%);
box-shadow:-3px -3px 6px rgba(12,31,79,.18); border-top-left-radius:6px; }
.trz-postit--doblez .trz-postit__cinta{ position:absolute; top:-11px; left:50%; width:66px; height:22px; margin-left:-33px; transform:rotate(-3deg);
background:rgba(255,255,255,.62); box-shadow:0 1px 2px rgba(12,31,79,.12); }
/* 4 · recién arrancado del block: franja de pegamento arriba, sin cinta */
.trz-postit--tira{ width:clamp(120px,10vw,148px); aspect-ratio:.92; padding:24px 12px 12px; }
.trz-postit--tira .trz-postit__txt{ font-size:clamp(23px,1.9vw,30px); }
.trz-postit--tira .trz-postit__cinta{ position:absolute; top:0; left:0; right:0; height:14px; background:rgba(0,0,0,.06); }
/* dónde se pega */
.trz-postit--der{ top:18px; right:18px; }
.trz-postit--izq{ top:18px; left:18px; }
.trz-postit--aizq{ top:auto; bottom:14px; left:14px; }
.trz-postit--doblez.trz-postit--aizq{ width:clamp(112px,8.6vw,150px); padding:14px 10px 16px; }
.trz-postit--doblez.trz-postit--aizq .trz-postit__txt{ font-size:clamp(18px,1.45vw,24px); }
.trz-postit--m-der{ top:10px; right:10px; }
.trz-postit--m-izq{ top:10px; left:10px; }
.trz-postit--enca{ top:50%; right:4%; transform:translateY(-50%) rotate(var(--rot)); }
/* se PEGA cuando su sección se arma: cae un poco girado y rebota */
html.js-traza .trz-postit{ opacity:0; }
.se-traza .trz-postit, .se-traza.trz-postit, html:not(.js-traza) .trz-postit{ animation:trz-pega .7s cubic-bezier(.3,1.5,.55,1) calc(1.2s + var(--k,0) * .1s) both; }
@keyframes trz-pega{ 0%{ opacity:0; translate:0 -36px; rotate:10deg; scale:1.12; } 60%{ opacity:1; } 100%{ opacity:1; translate:0 0; rotate:0deg; scale:1; } }
.trz-postit:hover{ transform:rotate(calc(var(--rot) - 3deg)) scale(1.05); }
.trz-postit--enca:hover{ transform:translateY(-50%) rotate(calc(var(--rot) - 3deg)) scale(1.05); }
/* celular: más chicos, en esquinas sin caras */
@media (max-width:900px){
.trz-postit--pin, .trz-postit--tira{ width:82px; padding:12px 6px 6px; }
.trz-postit--rayado{ width:108px; padding:9px 8px 6px; background-image:repeating-linear-gradient(transparent 0 15px, rgba(16,37,79,.13) 15px 16px), linear-gradient(170deg,#FF9CCB 0%,#FF7EB9 60%,#F46AA8 100%); }
.trz-postit__txt, .trz-postit--pin .trz-postit__txt, .trz-postit--tira .trz-postit__txt, .trz-postit--rayado .trz-postit__txt{ font-size:17px; }
.trz-postit__txt small{ font-size:.62em; margin-top:3px; }
.trz-postit--tira{ padding-top:16px; } .trz-postit--tira .trz-postit__cinta{ height:9px; }
}
@media (prefers-reduced-motion:reduce){ .trz-postit{ animation:none !important; opacity:1 !important; } }
/* sticker redondo con el grado */
.trz-sticker{ display:inline-grid; place-items:center; width:34px; height:34px; margin:-10px 8px -10px 0; vertical-align:middle; border-radius:50%;
background:#004484; color:#F9C658; font-family:var(--f-display); font-style:normal; font-size:15px; box-shadow:0 0 0 3px #fff, 0 3px 8px rgba(12,31,79,.3);
transform:rotate(-12deg); }
.dia__firma .trz-sticker + *{ }
@media (max-width:900px){
.trz-postit{ width:104px; padding:14px 10px 10px; }
.trz-postit__txt{ font-size:20px; }
.trz-postit--der{ top:12px; right:12px; } .trz-postit--izq{ top:12px; left:12px; }
}
@media (prefers-reduced-motion:reduce){ .trz-postit{ animation:none !important; opacity:1 !important; } }
/* el horario de "un día": el marcatextos pasa sobre el momento activo y avanza con él */
html[data-piel="plumon"] .momento__que b{
background:linear-gradient(transparent 52%, rgba(255,207,63,.8) 52%, rgba(255,207,63,.8) 94%, transparent 94%) no-repeat 0 0 / 0% 100%;
transition:background-size .7s cubic-bezier(.55,.08,.35,1) .15s;
}
html[data-piel="plumon"] .momento[aria-current="true"] .momento__que b{ background-size:100% 100%; }
/* los pilares: al pasar el cursor, una pasada de marcatextos */
html[data-piel="plumon"] .pilar__t{
background:linear-gradient(transparent 55%, rgba(255,207,63,.7) 55%, rgba(255,207,63,.7) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
transition:background-size .5s cubic-bezier(.55,.08,.35,1); display:inline; }
html[data-piel="plumon"] .pilar:hover .pilar__t{ background-size:100% 100%; }
/* celular: el post-it del día vive junto al título, arriba a la derecha (la foto rota entre 6 escenas) */
html[data-piel="plumon"] .dia__cab{ position:relative; }
.trz-postit--m-cab{ top:-4px; right:0; }
@media (max-width:600px){ html[data-piel] .trz-marca{ white-space:normal; } }