@font-face { font-family: "Jost"; src: url("jost.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --rojo: #ff0000;          /* Pantone P 48-8 C (manual) */
  --rojo-boton: #e60000;    /* rojo de marca con contraste AA para texto blanco */
  --rojo-hondo: #c40000;
  --rojo-texto: #d60000;    /* rojo para textos pequeños sobre papel (5,4:1) */
  --grafito: #474747;       /* Pantone P 179-14 C (manual) */
  --grafito-2: #333;
  --papel: #f4f4f2;
  --linea: #e1e1de;
  --gris: #5f5f5f;
  --resorte: cubic-bezier(.34, 1.4, .64, 1);
  --sombra: 0 1px 0 rgba(0, 0, 0, .03), 0 10px 24px -16px rgba(70, 0, 0, .28);
  --escenario: clamp(250px, 72vw, 330px);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --resorte: linear(0, .009 1.2%, .037 2.5%, .142 5.1%, .297 7.9%, .565 12.9%, .785 18.1%, .92 23%, 1.003 28%, 1.045 33%, 1.058 38%, 1.05 44%, 1.024 53%, 1.004 63%, .996 74%, 1); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; position: relative; min-height: 100vh; overflow-x: hidden;
  font-family: "Jost", "Futura", "Avenir Next", system-ui, sans-serif; font-size: 16px; line-height: 1.45;
  color: var(--grafito); background: var(--papel) url("papel.webp") repeat;
}
a { color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; border-radius: 12px; }
img { max-width: 100%; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- intro «Del papel a la web»: tapa = la misma foto que pinta el primer cuadro del lienzo ---------- */
.intro { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #8f0a03; animation: intro-respaldo .5s 3s forwards; }
.intro-tapa, .intro-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-tapa { object-fit: cover; object-position: 50% 50%; -webkit-user-drag: none; }
.intro.js-control { animation: none; }
.intro.gl-intro { background: none; }
.intro.gl-intro .intro-tapa { visibility: hidden; }
.intro.se-va { opacity: 0; transition: opacity .45s ease; }
.intro.fuera { display: none; }
.intro.termina { pointer-events: none; }   /* los botones ya se ven: los toques pasan a la página */
/* WhatsApp a mano durante la intro (la página está debajo) */
.intro-wa { position: absolute; z-index: 2; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px 0 16px; border-radius: 99px; background: rgba(255, 255, 255, .94); color: var(--grafito); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .45); transform: translateX(-50%); transition: opacity .22s ease, transform .22s ease; }
.intro-wa svg { width: 21px; height: 21px; color: #1fa855; }
.intro.termina .intro-wa { opacity: 0; transform: translateX(-50%) translateY(10px); }
.intro-wa { pointer-events: auto; }   /* sigue respondiendo mientras se desvanece */
.intro-wa.retirado { display: none; }
@media (min-width: 720px) { .intro-wa { left: auto; right: 28px; top: 24px; bottom: auto; transform: none; } .intro.termina .intro-wa { transform: translateY(-10px); } }
@keyframes intro-respaldo { to { opacity: 0; visibility: hidden; } }   /* sin JS la página no queda tapada */
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---------- fondo: motivos del manual (barras diagonales, puntos, rombo rayado) ---------- */
.fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fondo i { position: absolute; display: block; }
.barras { width: 170px; height: 40px; transform: rotate(-45deg); }
.barras i { left: 0; height: 13px; width: 100%; animation: deriva 9s ease-in-out infinite; }
.barras i:first-child { top: 0; background: var(--rojo); }
.barras i:last-child { top: 22px; left: 26px; border: 1.5px solid #b9b9b9; animation-delay: -2.5s; }
.b1 { top: 128px; right: -84px; }
.b2 { top: 36%; left: -78px; transform: rotate(-45deg) scale(.8); }
.b3 { top: 71%; right: -64px; transform: rotate(-45deg) scale(.9); }
.puntos {
  width: 150px; height: 120px; opacity: .8;
  background-image: radial-gradient(circle, #b4b4b4 1.15px, transparent 1.6px); background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(135deg, #000 10%, transparent 62%); mask-image: linear-gradient(135deg, #000 10%, transparent 62%);
  animation: titila 5.5s ease-in-out infinite;
}
.p1 { top: 300px; left: -6px; }
.p2 { top: 58%; right: 0; transform: scaleX(-1); animation-delay: -2.7s; }
.rombo-rayas {
  width: 170px; height: 170px; opacity: .55;
  background: repeating-linear-gradient(90deg, #d2d2d0 0 1.4px, transparent 1.4px 7px);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: flota-y 12s ease-in-out infinite;
}
.r1 { top: 120px; left: -96px; }
.r2 { top: 84%; left: 62%; animation-delay: -6s; }
@keyframes deriva { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }
@keyframes titila { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
@keyframes flota-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* las barras entran cuando el check valida */
.anim .barras { opacity: 0; }
.validado .barras { animation: barras-entran 1s var(--resorte) both; }
.validado .b2 { animation-name: barras-entran-b2; animation-delay: .08s; }
.validado .b3 { animation-name: barras-entran-b3; animation-delay: .16s; }
@keyframes barras-entran { from { opacity: 0; transform: rotate(-45deg) translateX(70px); } to { opacity: 1; transform: rotate(-45deg); } }
@keyframes barras-entran-b2 { from { opacity: 0; transform: rotate(-45deg) scale(.8) translateX(-70px); } to { opacity: 1; transform: rotate(-45deg) scale(.8); } }
@keyframes barras-entran-b3 { from { opacity: 0; transform: rotate(-45deg) scale(.9) translateX(70px); } to { opacity: 1; transform: rotate(-45deg) scale(.9); } }

/* ---------- página ---------- */
.pagina { position: relative; z-index: 1; max-width: 460px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px max(26px, env(safe-area-inset-bottom)); }
.cabecera { display: flex; align-items: center; justify-content: space-between; height: 20px; font-size: 13px; line-height: 20px; letter-spacing: .04em; }
.rotulo { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--rojo-texto); font-weight: 400; }
.rotulo b { color: var(--grafito); font-weight: 600; margin-left: -3px; }
.dots { display: grid; grid-template-columns: repeat(3, 4px); gap: 2px 3px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: #b5b5b5; animation: titila 3.2s ease-in-out infinite; }
.dots i:nth-child(2), .dots i:nth-child(6) { background: var(--rojo); animation-delay: -1.1s; }
.dots i:nth-child(4) { background: var(--rojo); animation-delay: -2.2s; }
.sede { color: var(--gris); }

/* ---------- escenario del logo ---------- */
.escenario {
  position: relative; height: var(--escenario); height: round(var(--escenario), 2px); margin-top: 6px;
  display: grid; place-items: center; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.escenario::before {
  content: ""; position: absolute; inset: -6% -4%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}
.logo { position: relative; z-index: 2; margin: 0; line-height: 0; }
.logo-plano { display: block; height: calc(var(--escenario) * .74); width: auto; -webkit-user-drag: none; }
.lienzo { position: absolute; z-index: 3; left: 0; top: -40px; width: 100%; height: calc(100% + 80px); pointer-events: none; }  /* desplazamientos enteros: relevo sin subpíxel */
.gl-listo .logo-plano { opacity: 0; }
.gl-listo .escenario { cursor: grab; }
.gl-listo .escenario:active { cursor: grabbing; }
.sin-3d .logo-plano { animation: flota 6s ease-in-out infinite; }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* malla de construcción del manual: se traza mientras el logo despega */
.malla { position: absolute; z-index: 1; left: 50%; top: 50%; width: calc(var(--escenario) * .9); height: calc(var(--escenario) * .9); transform: translate(-50%, -50%); pointer-events: none; }
.malla i { position: absolute; display: block; }
.malla .mh, .malla .mv { background: #dcdcd9; }
.malla .mh { left: 0; right: 0; height: 1px; top: 6%; transform-origin: left; animation: traza-x 1.3s .15s cubic-bezier(.6, 0, .2, 1) both; }
.malla .mh.m2 { top: auto; bottom: 6%; transform-origin: right; }
.malla .mv { top: 0; bottom: 0; width: 1px; left: 8%; transform-origin: top; animation: traza-y 1.3s .3s cubic-bezier(.6, 0, .2, 1) both; }
.malla .mv.m2 { left: auto; right: 8%; transform-origin: bottom; }
.aro { width: 8px; height: 8px; border: 1.2px solid #bdbdbb; border-radius: 50%; animation: aparece 1.4s 1.1s var(--resorte) both; }
.a1 { top: calc(6% - 4px); left: calc(50% - 4px); }
.a2 { bottom: calc(6% - 4px); left: calc(50% - 4px); animation-delay: 1.2s; }
.a3 { left: calc(8% - 4px); top: calc(50% - 4px); animation-delay: 1.3s; }
.a4 { right: calc(8% - 4px); top: calc(50% - 4px); animation-delay: 1.4s; }
@keyframes traza-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes traza-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes aparece { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.validado .malla { animation: malla-sale 1.6s .4s ease both; }
@keyframes malla-sale { to { opacity: .45; } }

.lema { margin: 4px 0 0; text-align: center; font-size: 19px; line-height: 1.3; font-weight: 400; }
.lema b { font-weight: 600; }
.sellos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.sellos li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 8px; border-radius: 99px; background: #fff; border: 1px solid var(--linea); font-size: 13.5px; font-weight: 500; }
.sellos svg, .valores svg { width: 15px; height: 15px; fill: none; stroke: var(--rojo); stroke-width: 3; stroke-linecap: square; }
.sellos svg { animation: check-entra .7s var(--resorte) both; }
.sellos li:nth-child(2) svg { animation-delay: .12s; }
.sellos li:nth-child(3) svg { animation-delay: .24s; }
@keyframes check-entra { from { opacity: 0; transform: scale(.2) rotate(-30deg); } to { opacity: 1; transform: none; } }

/* ---------- botones ---------- */
.accesos { display: grid; gap: 10px; margin-top: 18px; }
.boton {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 46px 12px 12px;
  background: #fff; border: 1px solid var(--linea); border-radius: 14px; color: var(--grafito); text-decoration: none;
  overflow: hidden; isolation: isolate; box-shadow: var(--sombra); transition: transform .5s var(--resorte), border-color .3s;
}
.boton::before, .boton::after {
  content: ""; position: absolute; z-index: -1; top: -40%; height: 180%; left: -130px; width: 11px;
  transform: translateX(0) rotate(45deg); transition: transform .9s cubic-bezier(.5, 0, .2, 1);
}
.boton::before { background: rgba(255, 0, 0, .1); }
.boton::after { left: -150px; border: 1.5px solid rgba(71, 71, 71, .14); }
@media (hover: hover) {
  .boton:hover { transform: translateY(-2px); border-color: #d2d2cf; }
  .boton:hover::before, .boton:hover::after { transform: translateX(680px) rotate(45deg); }
  .boton:hover .esquina { transform: rotate(45deg) scale(1.22); }
  .boton:hover .flecha { transform: translateX(3px); }
}
.boton:active { transform: scale(.985); }
.ico { flex: none; position: relative; width: 44px; height: 44px; border-radius: 11px; background: var(--papel); display: grid; place-items: center; color: var(--grafito); }
.ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ico .acento { stroke: var(--rojo); }
.txt { min-width: 0; }
.txt b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.2; }
.txt small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--gris); line-height: 1.3; }
.flecha { position: absolute; right: 16px; top: 50%; margin-top: -10px; width: 20px; height: 20px; color: var(--rojo-texto); transition: transform .4s var(--resorte); }
.flecha svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* esquina-diamante numerada, como las páginas del manual */
.esquina { position: absolute; right: -21px; bottom: -21px; width: 42px; height: 42px; background: var(--rojo); transform: rotate(45deg); transition: transform .5s var(--resorte); }
.esquina em { position: absolute; left: 3px; top: 50%; transform: translateY(-50%) rotate(-45deg); font-style: normal; font-size: 8.5px; font-weight: 600; letter-spacing: .04em; color: #fff; }
.validado .accesos .esquina { animation: esquina-golpe .8s var(--resorte); }
.validado .accesos .boton:nth-child(2) .esquina { animation-delay: .06s; }
.validado .accesos .boton:nth-child(3) .esquina { animation-delay: .12s; }
.validado .par .boton:first-child .esquina { animation-delay: .18s; }
.validado .par .boton:last-child .esquina { animation-delay: .24s; }
@keyframes esquina-golpe { 0%, 100% { transform: rotate(45deg) scale(1); } 40% { transform: rotate(45deg) scale(1.55); } }

/* WhatsApp: acción principal en rojo de marca */
.b-wa { background: linear-gradient(120deg, var(--rojo-boton) 0%, #dc0000 55%, var(--rojo-hondo) 100%); border-color: transparent; color: #fff; box-shadow: 0 14px 28px -14px rgba(200, 0, 0, .65); }
.b-wa .ico { background: rgba(255, 255, 255, .16); color: #fff; }
.b-wa .ico svg { width: 26px; height: 26px; stroke: none; }
.b-wa .txt small { color: rgba(255, 255, 255, .9); }
.b-wa .flecha { color: #fff; }
.b-wa .esquina { background: var(--grafito); }
.b-wa::before { background: rgba(255, 255, 255, .14); }
.b-wa::after { border-color: rgba(255, 255, 255, .3); }
.onda { position: absolute; inset: 0; border-radius: 11px; border: 1.5px solid rgba(255, 255, 255, .7); animation: onda 2.8s ease-out infinite; }
@keyframes onda { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.45); } }
.brillo { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.brillo::before { content: ""; position: absolute; top: -50%; bottom: -50%; left: -30%; width: 22%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent); transform: translateX(0) rotate(20deg); animation: brillo 5.5s 1.2s ease-in-out infinite; }
@keyframes brillo { 0%, 62% { transform: translateX(0) rotate(20deg); } 100% { transform: translateX(640%) rotate(20deg); } }

.par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 108px; padding: 13px 14px 16px; }
.mini .txt b { font-size: 16px; }
.mini .txt small { font-size: 13px; }

/* ---------- tarjeta TikTok en abanico ---------- */
.tiktok {
  position: relative; display: block; margin-top: 12px; padding: 12px 14px 16px; text-align: center;
  background: #fff; border: 1px solid var(--linea); border-radius: 20px; color: var(--grafito); text-decoration: none;
  overflow: hidden; box-shadow: var(--sombra);
}
.tiktok::before { content: ""; position: absolute; left: 50%; top: 44%; width: 230px; height: 230px; transform: translate(-50%, -50%) rotate(45deg); border: 1.5px solid rgba(255, 0, 0, .12); border-radius: 18px; pointer-events: none; }
.abanico { --abre: 40%; --gira: 4deg; position: relative; display: block; height: 252px; }
.carta {
  position: absolute; left: 50%; top: 3%; height: 87%; aspect-ratio: 2 / 3; border-radius: 16px; overflow: hidden;
  background: #e9e9e7; border: .5px solid rgba(255, 255, 255, .45); box-shadow: 0 7px 14px rgba(0, 0, 0, .09);
  transition: transform .55s var(--resorte), box-shadow .55s var(--resorte);
}
.carta img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-izq { z-index: 1; transform: translateX(-50%) translateX(calc(var(--abre) * -1)) translateY(9%) rotate(calc(var(--gira) * -1)) scale(.9); }
.c-der { z-index: 1; transform: translateX(-50%) translateX(var(--abre)) translateY(9%) rotate(var(--gira)) scale(.9); }
.c-centro { z-index: 3; transform: translateX(-50%); }
.tt-iconos { position: absolute; right: 8px; bottom: 9px; display: grid; gap: 6px; }
.tt-iconos svg { display: block; width: 18px; height: 18px; fill: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.abanico.abierto, .tiktok:focus-visible .abanico { --abre: 54%; --gira: 6deg; }
.abanico.abierto .c-centro, .tiktok:focus-visible .c-centro { transform: translateX(-50%) translateY(4px) scale(1.03); box-shadow: 0 14px 28px rgba(0, 0, 0, .17); }
@media (hover: hover) and (pointer: fine) {
  .tiktok:hover .abanico { --abre: 54%; --gira: 6deg; }
  .tiktok:hover .c-centro { transform: translateX(-50%) translateY(4px) scale(1.03); box-shadow: 0 14px 28px rgba(0, 0, 0, .17); }
  .tiktok:hover .tt-seguir { background: var(--rojo-boton); }
}
.tt-pie { display: block; margin-top: 4px; }
.tt-pie b { display: block; font-size: 18px; font-weight: 600; }
.tt-pie small { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13.5px; color: var(--gris); }
.tt-pie small svg { width: 14px; height: 14px; color: var(--grafito); }
.tt-seguir { display: inline-block; margin-top: 10px; padding: 9px 22px; border-radius: 99px; background: var(--grafito); color: #fff; font-size: 14.5px; font-weight: 600; transition: background-color .3s; }

/* ---------- redes ---------- */
.redes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.redes a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 8px; border-radius: 12px; background: #fff; border: 1px solid var(--linea); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: transform .45s var(--resorte); }
.redes .med { display: grid; width: 20px; height: 20px; color: var(--grafito); transition: color .3s; }
.redes svg { width: 100%; height: 100%; }
@media (hover: hover) { .redes a:hover { transform: translateY(-2px); } .redes a:hover .med { color: var(--rojo); } }

/* ---------- cuadros de texto (identidad del manual) ---------- */
.nosotros { margin-top: 38px; }
.titulo { margin: 6px 0 4px; font-size: 36px; line-height: 1.02; font-weight: 700; letter-spacing: -.01em; }
.titulo .t1 { color: var(--rojo); }
.titulo .t2 { color: var(--grafito); font-weight: 500; }
.cuadro { position: relative; margin: 12px 0 0; padding: 20px 20px 22px; background: #fff; border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); }
.cuadro p { margin: 0; }
.pizarra { color: #fff; background: var(--grafito) url("tiza.webp") repeat; border-color: transparent; padding-top: 58px; font-size: 17px; line-height: 1.55; }
.pizarra b { font-weight: 600; background: linear-gradient(var(--rojo), var(--rojo)) 0 100% / 100% 3px no-repeat; }
.numero { position: absolute; right: 16px; top: 4px; font-size: 64px; font-weight: 300; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .6); }
.barras-mini { position: absolute; left: 16px; top: 24px; width: 64px; height: 18px; }
.barras-mini i { position: absolute; left: 0; width: 100%; height: 6px; transform: skewX(-45deg); }
.barras-mini i:first-child { top: 0; background: var(--rojo); }
.barras-mini i:last-child { top: 10px; left: 10px; border: 1.2px solid rgba(255, 255, 255, .55); }

.subtitulo { margin: 30px 0 0; text-align: center; font-size: 27px; font-weight: 700; color: var(--rojo); }
.subtitulo::after { content: ""; display: block; width: 110px; height: 3px; margin: 8px auto 0; background: var(--grafito); transform-origin: center; }
.lineas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.linea { padding: 16px 15px 24px; font-size: 14.5px; line-height: 1.45; }
.linea h4 { margin: 12px 0 4px; font-size: 20px; font-weight: 600; }
.sello-logo { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .3); }
.sello-logo img { width: 40px; height: auto; }
.linea.roja { color: #fff; background: linear-gradient(150deg, var(--rojo-boton), var(--rojo-hondo)); border-color: transparent; }
.linea.roja .sello-logo { background: var(--rojo); box-shadow: 0 6px 16px -8px rgba(80, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.linea.roja .esquina { background: var(--grafito); }

.valores h3, .mision h4, .vision h4 { margin: 0; color: var(--rojo); font-size: 24px; font-weight: 700; }
.valores h3 small, .mision h4 small, .vision h4 small { display: block; margin-top: 2px; color: var(--grafito); font-size: 14px; font-weight: 500; }
.valores ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 15.5px; }
.valores li { display: flex; align-items: center; gap: 8px; }
.valores li:nth-child(4) { grid-column: 1 / -1; }
.valores svg { flex: none; width: 18px; height: 18px; }

.mision-vision { display: grid; gap: 0; }
.mision, .vision { display: grid; grid-template-columns: 54px 1fr; column-gap: 14px; font-size: 15px; color: #555; }
.mision h4, .vision h4 { grid-column: 2; }
.mision p, .vision p { grid-column: 2; margin-top: 8px; }
.icono { grid-row: 1 / span 2; width: 54px; height: 54px; border-radius: 14px; background: var(--papel); display: grid; place-items: center; }
.icono svg { width: 38px; height: 38px; fill: none; stroke: var(--grafito); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icono .acento { stroke: var(--rojo); }

.proposito { margin-top: 12px; padding: 24px 22px 26px; color: #fff; background: linear-gradient(140deg, var(--rojo-boton), var(--rojo-hondo)); border-color: transparent; font-size: 18px; line-height: 1.5; box-shadow: 0 18px 34px -18px rgba(190, 0, 0, .7); }
.pr-titulo { font-size: 26px !important; font-weight: 700; line-height: 1.1; }
.pr-titulo::after { content: ""; display: block; width: 90px; height: 3px; margin: 10px 0 12px; background: #fff; transform-origin: left; }
.marca-agua { position: absolute; right: -40px; bottom: -34px; width: 190px; opacity: .16; animation: flota-y 9s ease-in-out infinite; }
.marca-agua img { display: block; width: 100%; height: auto; }

.credito { margin-top: 30px; text-align: center; font-size: 13px; color: var(--gris); letter-spacing: .02em; }
.credito a { font-weight: 600; color: var(--grafito); text-decoration-color: var(--rojo); text-underline-offset: 3px; }

/* ---------- aparición de los cuadros (solo con JS; sin JS todo queda visible) ---------- */
.anim [data-aparece] { opacity: 0; transform: translate3d(-14px, 18px, 0); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); }
.anim [data-aparece].visto { opacity: 1; transform: none; }
.anim [data-aparece] .esquina { transform: rotate(45deg) scale(0); transition: transform .7s .35s var(--resorte); }
.anim [data-aparece].visto .esquina { transform: rotate(45deg) scale(1); }
.anim .subtitulo::after, .anim .pr-titulo::after { transform: scaleX(0); transition: transform .9s .3s cubic-bezier(.6, 0, .2, 1); }
.anim .visto.subtitulo::after, .anim .visto .pr-titulo::after { transform: scaleX(1); }
.anim .valores svg { opacity: 0; transform: scale(.2) rotate(-30deg); transition: opacity .3s, transform .6s var(--resorte); }
.anim .valores.visto svg { opacity: 1; transform: none; }
.anim .valores.visto li:nth-child(2) svg { transition-delay: .12s; }
.anim .valores.visto li:nth-child(3) svg { transition-delay: .24s; }
.anim .valores.visto li:nth-child(4) svg { transition-delay: .36s; }
.anim .valores.visto li:nth-child(5) svg { transition-delay: .48s; }
.anim .pizarra .numero { opacity: 0; transform: translateY(14px); transition: opacity .9s .25s, transform 1s .25s cubic-bezier(.2, .8, .2, 1); }
.anim .pizarra.visto .numero { opacity: 1; transform: none; }
.anim .barras-mini i { transform: skewX(-45deg) translateX(-90px); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.anim .visto .barras-mini i { transform: skewX(-45deg); }
.anim .visto .barras-mini i:last-child { transition-delay: .12s; }
.anim .lineas .linea:nth-child(2), .anim .mision-vision .vision { transition-delay: .12s; }

@media (min-width: 720px) {
  :root { --escenario: 380px; }
  .pagina { max-width: 480px; padding-top: 22px; }
  .b1 { right: calc(50% - 400px); }
  .b2 { left: calc(50% - 420px); }
  .b3 { right: calc(50% - 420px); }
  .p1 { left: calc(50% - 360px); }
  .p2 { right: calc(50% - 360px); }
  .r1 { left: calc(50% - 470px); }
}
@media (max-width: 350px) {
  .txt b { font-size: 15.5px; }
  .lineas { grid-template-columns: 1fr; }
  .titulo { font-size: 32px; }
  .redes a { gap: 5px; padding: 0 4px; font-size: 13px; }
  .redes .med { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .anim [data-aparece], .anim [data-aparece] .esquina, .anim .valores svg, .anim .pizarra .numero, .anim .barras-mini i { opacity: 1; transform: none; }
  .anim [data-aparece] .esquina { transform: rotate(45deg); }
  .anim .barras-mini i { transform: skewX(-45deg); }
  .anim .subtitulo::after, .anim .pr-titulo::after { transform: none; }
  .anim .barras { opacity: 1; }
}
.no-encontrada { text-align: center; padding-top: 18vh; }