:root{
  /* Paleta pastel derivada de oficiales (#F6B314, #F53970, #0B365F) */
  --alma-yellow: #FFD872; /* pastel */
  --alma-pink:   #FF7AA5; /* pastel */
  --alma-blue:   #7DB2E1; /* pastel */
  --ink:         #0F172A; /* texto principal */
  --ink-soft:    rgba(15,23,42,.68);
  --card:        #ffffff;
  --border:      rgba(0,0,0,.08);
  --ring:        rgba(255,122,165,.45);
}

/* Tipografía fluida y ritmo vertical un pelín más aireado */
h1,h2,h3{letter-spacing:-.015em}
h1{font-size:clamp(2rem, 1.4rem + 2.2vw, 3.5rem)}
h2{font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem)}
h3{font-size:clamp(1.125rem, .9rem + .6vw, 1.5rem)}

/* Utilidades de color pastel suaves para fondos seccionados */
.bg-pastel-pink{background:
  radial-gradient(900px 360px at 90% 0%, rgba(255,216,114,.16), transparent 60%),
  linear-gradient(180deg, rgba(255,122,165,.18), rgba(255,122,165,.10));}
.bg-pastel-blue{background:
  radial-gradient(800px 320px at 10% 100%, rgba(255,122,165,.12), transparent 60%),
  linear-gradient(180deg, rgba(125,178,225,.18), rgba(125,178,225,.10));}
.bg-pastel-yellow{background:
  radial-gradient(800px 320px at 90% 20%, rgba(125,178,225,.12), transparent 60%),
  linear-gradient(180deg, rgba(255,216,114,.22), rgba(255,216,114,.12));}

/* Tarjetas y vidrio suave */
.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.glass{backdrop-filter:saturate(1.1) blur(10px);background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.6)}

/* Botones opinables que complementan los de Tailwind */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:999px;border:1px solid var(--border);font-weight:600;transition:transform .12s ease, box-shadow .12s ease, opacity .12s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--alma-pink);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(255,122,165,.35)}
.btn-primary:hover{opacity:.92}
.btn-ink{background:#0F172A;color:#fff;border-color:transparent}
.btn-outline{background:#fff;color:var(--ink);}

/* Inputs y focus accesible */
input,textarea,select{accent-color:var(--alma-pink)}
input:focus,textarea:focus,select:focus{outline:0;box-shadow:0 0 0 3px var(--ring);border-color:rgba(255,122,165,.35)}
::placeholder{color:rgba(0,0,0,.45)}

/* Badges y chips pequeños */
.badge{display:inline-block;padding:.35rem .65rem;border-radius:.75rem;border:1px solid var(--border);background:#fff;font-size:.75rem}

/* Bloques decorativos sutiles */
.blob{position:absolute;filter:blur(40px);opacity:.45;pointer-events:none}
.blob.pink{background:var(--alma-pink)}
.blob.blue{background:var(--alma-blue)}
.blob.yellow{background:var(--alma-yellow)}

/* Animaciones muy suaves (respeta reduce-motion) */
@media (prefers-reduced-motion:no-preference){
  .float-slow{animation:float 10s ease-in-out infinite}
  .pulse-soft{animation:pulse 4s ease-in-out infinite}
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.85}}

/* Tabla de métricas estética */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;text-align:center}
.stats .num{font-weight:800;line-height:1}
.stats .label{opacity:.8;font-size:.9rem}
@media (max-width:768px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Header: variante sólida cuando hace scroll (se controla con .is-solid) */
.header{transition:background-color .2s ease, box-shadow .2s ease}
.header.is-solid{background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.06)}

/* Hero: marco de imagen más luminoso */
.hero-frame{background:#fff;border:1px solid var(--border);border-radius:1.25rem;box-shadow:0 12px 40px rgba(125,178,225,.18), 0 6px 20px rgba(255,122,165,.12)}

/* Galería: hover amigable para niños */
.gallery img{transition:transform .15s ease, box-shadow .15s ease}
.gallery img:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.10)}

/* Footer discreto */
.footer{border-top:1px solid var(--border)}

/* Scrollbar (WebKit) sutil en desktop */
@media (min-width:1024px){
  *::-webkit-scrollbar{height:10px;width:10px}
  *::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:10px}
  *::-webkit-scrollbar-track{background:rgba(0,0,0,.04)}
}

/* Utilidades extra */
.max-w-mega{max-width:88rem}
.shadow-lift{box-shadow:0 20px 60px rgba(0,0,0,.10)}
.rounded-2xl{border-radius:1rem}

/* Sugerencias de aplicación (comentarios):
  - Añade la clase .hero-frame al contenedor de la imagen del hero.
  - Usa .btn, .btn-primary, .btn-outline en enlaces de acciones.
  - Agrega .gallery al grid de la galería para hover suave.
  - Aplica .bg-pastel-pink / .bg-pastel-blue / .bg-pastel-yellow a secciones que quieras colorear con difuminado.
  - Si implementas el header sólido on-scroll: en JS agrega/quita .is-solid en el header.
*/