/*
Theme Name: DaySpanish
Description: Tema personalizado y autónomo para DaySpanish — estilos modernos y accesibles.
Author: El Chingon
Version: 1.0.0
*/

:root{
  --bg:#11131c;
  --surface:#171a25;
  --muted:#a9b0c2;
  --accent:#ff6b6b;
  --accent-2:#6b8bff;
  --text:#e6eef6;
  --radius:12px;
  --container:1100px;
  --gap:1.25rem;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Reset básico */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#f3f4f8;color:var(--text);line-height:1.5}
.wrap{max-width:var(--container);margin:0 auto;padding:0 1rem}

/* Header */
.site-header{background:#ffffff;padding:1rem 0;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(17,24,39,0.08)}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{display:block;height:118px;width:auto;max-width:680px;object-fit:contain}
.main-nav .menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.main-nav a{color:#2d3345;text-decoration:none}
.language-switcher{display:flex;gap:.35rem;align-items:center}
.language-switcher__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  padding:.35rem .55rem;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.15);
  color:#1f2937;
  text-decoration:none;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  background:#fff;
  transition:all .2s ease;
}
.language-switcher__item:hover{
  border-color:#4f46e5;
  color:#4f46e5;
}
.language-switcher__item.is-active{
  background:linear-gradient(90deg,#6d5df6,#4f46e5);
  border-color:transparent;
  color:#fff;
}
.header-actions{display:flex;gap:0.5rem}
.btn{padding:0.6rem 1rem;border-radius:999px;text-decoration:none;display:inline-block;font-weight:600}
.btn-ghost{background:transparent;border:1px solid rgba(17,24,39,0.12);color:#1f2937}
.btn-primary{background:linear-gradient(90deg,#6d5df6,#4f46e5);color:#fff;border:0}

.site-main{
  background:
    radial-gradient(68% 45% at 50% 106%, rgba(218, 104, 255, 0.85) 0%, rgba(156, 76, 255, 0.55) 28%, rgba(80, 48, 185, 0.35) 48%, rgba(22, 24, 37, 0) 70%),
    radial-gradient(85% 55% at 50% 82%, rgba(86, 64, 229, 0.55) 0%, rgba(58, 45, 151, 0.38) 36%, rgba(19, 22, 33, 0) 70%),
    linear-gradient(180deg, #141722 0%, #151828 45%, #1a1730 100%);
  min-height:calc(100vh - 74px);
  position: relative;
}

/* Canvas de partículas — vive dentro de .site-main */
#ds-particle-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* Hero */
.hero{padding:4rem 0; position: relative; z-index: 1;}
.hero-inner{display:flex;gap:2rem;align-items:center}
.hero-copy{flex:1}
.hero-copy h1{font-size:2.1rem;margin:0 0 .5rem;line-height:1.15}
.lead{color:var(--muted);margin:0 0 1rem}
.hero-media{flex:1;display:flex;justify-content:center;line-height:0}
.hero-media img{max-width:420px;width:100%;filter:drop-shadow(0 8px 30px rgba(0,0,0,0.6))}
.hero-media-frame{
  display:block;
  width:100%;
  max-width:480px;
  min-height:620px;
  border:0;
  border-radius:14px;
  overflow:hidden;
  background:transparent;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,0.6));
}

/* ══════════════════════════════════════════
   EFECTO LETRA — INFLAR Y EXPLOTAR
   ══════════════════════════════════════════ */

/* Contenedor del título: necesita overflow visible para las letras que escalan */
.hero-copy h1 {
  overflow: visible;
}

/* Cada letra es un span inline-block */
.ds-letter {
  display: inline-block;
  position: relative;
  cursor: default;
  transform-origin: center bottom;
  will-change: transform, filter, color;
  transition: color 0.1s ease;
}

.ds-letter.space {
  display: inline-block;
  width: 0.3em;
}

/* FASE 1 – Inflado: la letra engorda elásticamente */
.ds-letter.ds-inflate {
  animation: ds-inflate 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  color: #ffffff;
  filter:
    drop-shadow(0 0 10px rgba(0,198,255,0.75))
    drop-shadow(0 0 28px rgba(109,93,246,0.55));
}

/* FASE 2 – Explosión: la letra se dispara y desaparece */
.ds-letter.ds-explode {
  animation: ds-explode 0.32s ease-in forwards;
  color: #ffffff;
  filter:
    drop-shadow(0 0 22px rgba(255,255,255,0.95))
    brightness(2.5);
}

/* FASE 3 – Reforma: la letra vuelve desde cero */
.ds-letter.ds-reform {
  animation: ds-reform 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ds-inflate {
  0%   { transform: scale(1)    rotate(0deg);  }
  30%  { transform: scale(1.3)  rotate(-4deg); }
  65%  { transform: scale(1.6)  rotate(3deg);  }
  100% { transform: scale(1.72) rotate(-1deg); }
}

@keyframes ds-explode {
  0%   { transform: scale(1.72) rotate(-1deg); opacity: 1; }
  45%  { transform: scale(2.3)  rotate(8deg);  opacity: 0.55; }
  100% { transform: scale(0)    rotate(20deg); opacity: 0; }
}

@keyframes ds-reform {
  0%   { transform: scale(0)    rotate(-20deg); opacity: 0; }
  55%  { transform: scale(1.18) rotate(4deg);   opacity: 1; }
  100% { transform: scale(1)    rotate(0deg);   opacity: 1; }
}

/* Accesibilidad: sin animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .ds-letter,
  .ds-letter.ds-inflate,
  .ds-letter.ds-explode,
  .ds-letter.ds-reform {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ══════════════════════════════════════════ */

/* Features */
.features{padding:2.5rem 0; position: relative; z-index: 1;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1.25rem;border-radius:var(--radius);box-shadow:0 6px 18px rgba(2,6,23,0.6)}
.card h3{margin-top:0}

.cta-band{padding:2rem 0;border-top:1px solid rgba(255,255,255,0.03); position: relative; z-index: 1;}
.cta-band .wrap{display:flex;gap:1rem;align-items:center;justify-content:space-between}

/* Footer */
.site-footer{padding:2rem 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.03)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* Responsive */
@media (max-width:880px){
  .hero-inner{flex-direction:column}
  .features-grid{grid-template-columns:1fr}
  .cta-band .wrap{flex-direction:column;gap:0.75rem}
  .main-nav .menu{display:none}
  .header-inner{flex-wrap:wrap;justify-content:center}
  .brand img{height:62px;max-width:360px}
  .hero-media-frame{max-width:420px;min-height:560px}
  .language-switcher{order:3;width:100%;justify-content:center}
  .header-actions{order:2}
}

/* Utilities */
.container{max-width:var(--container);margin:0 auto}

/* Botones principales con degradado vibrante */
button, .button, .wp-block-button__link, .btn-primary{
  background: linear-gradient(90deg,#7b00ff 0%,#4b2bff 50%,#00c6ff 100%);
  color: #fff;
  border-radius: 28px;
  padding: 10px 18px;
  border: none;
  box-shadow: 0 8px 30px rgba(59,6,120,0.28);
}

/* Enlaces y estados */
a { color: #4b2bff }
a:hover { color: #00c6ff }

/* Efectos hover en nav, cards, cta, botones */
.main-nav a,
.card h3,
.cta-band h2,
.btn{
  transition: transform .28s ease, text-shadow .28s ease, letter-spacing .28s ease, color .28s ease;
  will-change: transform;
}

.main-nav a:hover,
.card h3:hover,
.cta-band h2:hover,
.btn:hover{
  transform: translateY(-4px);
  letter-spacing:.02em;
  text-shadow:
    0 6px 18px rgba(79,70,229,.35),
    0 0 14px rgba(0,198,255,.25);
}

.cta-band h2:hover{
  animation: ds-floaty-text .9s ease-in-out infinite alternate;
}

@keyframes ds-floaty-text{
  from{ transform:translateY(-2px) rotate(-0.6deg); }
  to{ transform:translateY(-6px) rotate(0.6deg); }
}

@media (prefers-reduced-motion: reduce){
  .main-nav a,
  .card h3,
  .cta-band h2,
  .btn{
    transition:none;
    animation:none !important;
  }
}

/* Campos de formulario */
input[type="text"], input[type="email"], input[type="password"], textarea{
  width:100%;padding:12px;border-radius:10px;border:1px solid rgba(11,17,34,0.06);background:#fbfdff
}

/* Ajustes responsivos menores */
@media (max-width:720px){
  .site-main .wrap{margin:20px;padding:20px}
}