/* =========================================================
   🎨 COLORES Y AJUSTES GENERALES — cambia aquí y se cambia toda la web
   ========================================================= */
:root {
  --naranja: #FF7A1A;        /* color principal de marca */
  --naranja-claro: #FFB15C;  /* brillo de las luces */
  --naranja-oscuro: #C2410C; /* para texto naranja sobre fondo claro */
  --fondo: #14171F;          /* fondo oscuro ("casa de noche") */
  --fondo-2: #1C2030;        /* fondo de tarjetas */
  --texto: #F4F1EC;          /* texto principal */
  --texto-suave: #A9AEBB;    /* texto secundario */
  --apagado: #2B3040;        /* luces apagadas */
  --radio: 18px;             /* redondeo de esquinas */
  --velocidad: 6s;           /* duración de cada animación */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Sora", system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.6;
  font-size: 18px;   /* letra grande: más cómoda para gente mayor */
}

a { color: inherit; text-decoration: none; }

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  background: var(--naranja);
  color: var(--fondo);           /* texto oscuro sobre naranja = buen contraste */
  font-weight: 600;
  padding: 16px 32px;
  font-size: 1.05rem;
  border-radius: 999px;
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,122,26,.45); }
.btn-small { padding: 8px 18px; font-size: .9rem; }
.btn-outline { background: transparent; color: var(--naranja); border: 2px solid var(--naranja); }

/* ---------- Cabecera ---------- */
.header {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 6vw;
  background: rgba(20,23,31,.85);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.4rem; }
.nav { display: flex; align-items: center; gap: 24px; font-size: .95rem; }
.nav a:not(.btn):hover { color: var(--naranja); }

/* ---------- Portada ---------- */
.hero {
  text-align: center;
  padding: 120px 6vw 100px;
  background: radial-gradient(circle at 50% 0%, rgba(255,122,26,.28), transparent 60%);
}
.hero h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 800; line-height: 1.15; }
.accent { color: var(--naranja); }
.hero-sub { max-width: 600px; margin: 24px auto 36px; color: var(--texto-suave); font-size: 1.2rem; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- ¿Te suena esto? ---------- */
.pains { padding-top: 40px; }
.pain-list {
  list-style: none;
  max-width: 720px; margin: 0 auto;
  display: grid; gap: 14px;
  text-align: left;
}
.pain-list li {
  background: var(--fondo-2);
  border-left: 5px solid var(--naranja);
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 1.1rem;
}
.pains-end { margin-top: 36px; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; }

/* ---------- Secciones ---------- */
.section { padding: 90px 6vw; text-align: center; }
.section-alt { background: #10131A; }
.section h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 48px; }

/* =========================================================
   ✨ EJEMPLOS ANIMADOS
   ========================================================= */
.demos {
  display: flex; flex-wrap: wrap; justify-content: center;   /* 3 arriba, 2 centradas abajo */
  gap: 28px;
  max-width: 1100px; margin: 0 auto;
}
.demo {
  flex: 0 1 calc((100% - 56px) / 3); min-width: 270px;
  background: var(--fondo-2); border-radius: var(--radio); padding: 20px 20px 28px;
}
.demo h3 { margin-top: 20px; font-size: 1.2rem; }
.demo p { color: var(--texto-suave); font-size: 1rem; margin-top: 6px; }

.stage {
  position: relative;
  height: 230px;
  border-radius: 12px;
  background: #0E1016;
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}

/* Bocadillo con la orden de voz */
.bubble {
  position: absolute; top: 14px; left: 50%;
  transform: translateX(-50%);
  background: var(--texto); color: var(--fondo);
  font-size: .85rem; font-weight: 600;
  padding: 8px 14px; border-radius: 14px 14px 14px 4px;
  white-space: nowrap;
  animation: bubble var(--velocidad) infinite;
  z-index: 2;
}
@keyframes bubble {
  0%, 5%   { opacity: 0; transform: translate(-50%, 8px); }
  12%, 75% { opacity: 1; transform: translate(-50%, 0); }
  85%,100% { opacity: 0; }
}

/* --- 1. Lámpara --- */
.room { animation: roomLight var(--velocidad) infinite; }
.lamp { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.cord { width: 3px; height: 90px; background: #3A3F50; }
.bulb {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--apagado);
  animation: bulbOn var(--velocidad) infinite;
}
@keyframes bulbOn {
  0%, 30%  { background: var(--apagado); box-shadow: none; }
  36%, 85% { background: var(--naranja-claro); box-shadow: 0 0 40px 12px rgba(255,177,92,.7), 0 0 120px 50px rgba(255,122,26,.35); }
  92%,100% { background: var(--apagado); box-shadow: none; }
}
@keyframes roomLight {
  0%, 30%  { background: #0E1016; }
  36%, 85% { background: #2A1D14; }
  92%,100% { background: #0E1016; }
}

/* --- 2. Escalera paso a paso --- */
.stairs { position: relative; display: flex; align-items: flex-end; width: 85%; height: 70%; }
.step {
  flex: 1;
  height: calc(var(--i) * 16.66%);
  background: #252A38;
  border-top: 5px solid var(--apagado);
  animation: stepOn var(--velocidad) infinite;
  /* cada peldaño se enciende justo cuando la persona lo pisa */
  animation-delay: calc(.6s + (var(--i) - 1) * .6s);
}
@keyframes stepOn {
  0%       { border-top-color: var(--apagado); box-shadow: none; }
  3%, 40%  { border-top-color: var(--naranja-claro); box-shadow: 0 -8px 24px rgba(255,122,26,.6); }
  46%,100% { border-top-color: var(--apagado); box-shadow: none; }
}

/* Persona subiendo */
.walker {
  position: absolute; left: 0; bottom: 0;
  width: 16px; height: 34px;
  margin-left: 14px;
  animation: climb var(--velocidad) infinite;
}
.walker-body {
  position: relative; width: 100%; height: 100%;
  animation: bob .3s infinite alternate;   /* balanceo al andar */
}
.walker-body::before {   /* cabeza */
  content: ""; position: absolute; top: 0; left: 50%;
  width: 13px; height: 13px; margin-left: -6.5px;
  border-radius: 50%; background: var(--texto);
}
.walker-body::after {    /* cuerpo */
  content: ""; position: absolute; bottom: 0; left: 50%;
  width: 14px; height: 20px; margin-left: -7px;
  border-radius: 7px 7px 3px 3px; background: var(--texto);
}
@keyframes bob { to { transform: translateY(-2px) rotate(3deg); } }
@keyframes climb {
  0%       { left: -10%;    bottom: 0;      opacity: 0; }
  8%       { left: -4%;     bottom: 0;      opacity: 1; }
  18%      { left: 0%;      bottom: 16.66%; }
  28%      { left: 16.66%;  bottom: 33.33%; }
  38%      { left: 33.33%;  bottom: 50%; }
  48%      { left: 50%;     bottom: 66.66%; }
  58%      { left: 66.66%;  bottom: 83.33%; }
  68%, 78% { left: 83.33%;  bottom: 100%;   opacity: 1; }
  86%,100% { left: 83.33%;  bottom: 100%;   opacity: 0; }
}

/* --- 3. Persiana --- */
.window {
  position: relative;
  width: 150px; height: 150px; margin-bottom: 20px;
  border: 6px solid #3A3F50; border-radius: 6px;
  background: linear-gradient(#FFD08A, #FF9A3D);
  overflow: hidden;
}
.sun {
  position: absolute; left: 50%; bottom: 20px;
  width: 50px; height: 50px; margin-left: -25px;
  border-radius: 50%; background: #FFF4DE;
  box-shadow: 0 0 30px 10px rgba(255,244,222,.7);
}
.blind {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(#3A3F50 0 12px, #2B3040 12px 14px);
  animation: blindUp var(--velocidad) infinite;
}
@keyframes blindUp {
  0%, 25%   { transform: translateY(0); }
  50%, 80%  { transform: translateY(-92%); }
  95%, 100% { transform: translateY(0); }
}

/* Amanecer: primero sale el sol, después la persiana sube sola */
.sunrise { animation: sky var(--velocidad) infinite; }
.sunrise .sun { animation: sunUp var(--velocidad) infinite; }
.sunrise .blind {
  background: repeating-linear-gradient(rgba(58,63,80,.92) 0 12px, rgba(43,48,64,.92) 12px 14px); /* deja intuir el sol */
  animation: blindAfterSun var(--velocidad) infinite;
}
/* Ciclo completo: amanece → suben · anochece → bajan */
.sun-stage { --velocidad: 9s; }   /* esta animación va algo más despacio */
.bubble-night { opacity: 0; }
.sun-stage .bubble-day   { animation-name: bubbleDay; }
.sun-stage .bubble-night { animation-name: bubbleNight; }
@keyframes bubbleDay {
  0%, 3%    { opacity: 0; }
  8%, 48%   { opacity: 1; }
  53%, 100% { opacity: 0; }
}
@keyframes bubbleNight {
  0%, 55%   { opacity: 0; }
  60%, 92%  { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes sky {
  0%, 5%    { background: #1B2440; }
  25%, 58%  { background: #FFB15C; }
  76%, 100% { background: #1B2440; }
}
@keyframes sunUp {
  0%, 5%    { transform: translateY(90px); }
  25%, 58%  { transform: translateY(0); }
  76%, 100% { transform: translateY(90px); }
}
@keyframes blindAfterSun {
  0%, 27%   { transform: translateY(0); }
  45%, 66%  { transform: translateY(-92%); }
  84%, 100% { transform: translateY(0); }
}

/* --- 4. Calefacción --- */
.heat-stage { animation: coldToWarm var(--velocidad) infinite; gap: 34px; padding-bottom: 26px; }
.heater-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.radiator { display: flex; gap: 6px; }
.radiator span {
  width: 16px; height: 80px; border-radius: 8px;
  background: var(--apagado);
  animation: radiatorOn var(--velocidad) infinite;
}
.waves { display: flex; gap: 18px; height: 34px; }
.waves span {
  width: 5px; height: 26px; border-radius: 5px;
  background: var(--naranja-claro); opacity: 0;
  animation: heatWave var(--velocidad) infinite;
}
.waves span:nth-child(2) { animation-delay: .4s; }
.waves span:nth-child(3) { animation-delay: .8s; }
.thermo {
  position: relative; width: 20px; height: 110px;
  border: 3px solid #3A3F50; border-radius: 12px; overflow: hidden;
}
.thermo-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #5B8DEF;
  animation: thermoUp var(--velocidad) infinite;
}
@keyframes coldToWarm {
  0%, 25%  { background: #0F1626; }
  50%, 85% { background: #2A1A12; }
  95%,100% { background: #0F1626; }
}
@keyframes radiatorOn {
  0%, 25%  { background: var(--apagado); box-shadow: none; }
  40%, 85% { background: var(--naranja); box-shadow: 0 0 18px rgba(255,122,26,.6); }
  95%,100% { background: var(--apagado); box-shadow: none; }
}
@keyframes heatWave {
  0%, 35%  { opacity: 0; transform: translateY(10px); }
  50%      { opacity: .9; transform: translateY(0); }
  65%      { opacity: 0; transform: translateY(-10px); }
  100%     { opacity: 0; }
}
@keyframes thermoUp {
  0%, 25%  { height: 22%; background: #5B8DEF; }
  60%, 85% { height: 78%; background: var(--naranja); }
  95%,100% { height: 22%; background: #5B8DEF; }
}

/* --- 5. Escena "modo película" con enchufes --- */
.movie-stage { animation: movieRoom var(--velocidad) infinite; justify-content: space-between; padding: 0 26px 22px; }
.movie-stage .lamp .cord { height: 70px; }
.bulb-main { animation-name: mainOff; }
.tv {
  width: 120px; height: 72px;
  border: 5px solid #3A3F50; border-radius: 6px;
  background: #0A0B10;
  animation: tvOn var(--velocidad) infinite;
}
.floorlamp { display: flex; flex-direction: column; align-items: center; }
.shade {
  width: 50px; height: 34px;
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  background: var(--apagado);
  animation: shadeOn var(--velocidad) infinite;
}
.pole { width: 4px; height: 76px; background: #3A3F50; }
@keyframes mainOff {
  0%, 30%  { background: var(--naranja-claro); box-shadow: 0 0 40px 12px rgba(255,177,92,.6); }
  36%, 88% { background: var(--apagado); box-shadow: none; }
  94%,100% { background: var(--naranja-claro); box-shadow: 0 0 40px 12px rgba(255,177,92,.6); }
}
@keyframes tvOn {
  0%, 34%  { background: #0A0B10; box-shadow: none; }
  40%, 88% { background: #4F78D6; box-shadow: 0 0 30px 6px rgba(79,120,214,.45); }
  94%,100% { background: #0A0B10; box-shadow: none; }
}
@keyframes shadeOn {
  0%, 34%  { background: var(--apagado); filter: none; }
  40%, 88% { background: var(--naranja-claro); filter: drop-shadow(0 6px 16px rgba(255,122,26,.9)); }
  94%,100% { background: var(--apagado); filter: none; }
}
@keyframes movieRoom {
  0%, 30%  { background: #2A1D14; }
  36%, 88% { background: #0E1016; }
  94%,100% { background: #2A1D14; }
}

/* =========================================================
   🎬 VÍDEOS
   ========================================================= */
.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px; max-width: 1100px; margin: 0 auto;
}
.video-card video {
  width: 100%; aspect-ratio: 9 / 16;   /* vídeos de móvil (vertical). Para horizontales pon 16 / 9 */
  object-fit: cover;
  border-radius: var(--radio);
  background: #000;
}
.video-card figcaption { margin-top: 12px; color: var(--texto-suave); }

/* =========================================================
   ⭐ OPINIONES
   ========================================================= */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px; max-width: 1100px; margin: 0 auto;
}
.review { background: var(--fondo-2); border-radius: var(--radio); padding: 28px; text-align: left; }
.stars { color: var(--naranja); letter-spacing: 3px; margin-bottom: 12px; }
.review p { font-style: italic; }
.promise { text-align: center; }
.promise-icon { font-size: 2.4rem; margin-bottom: 8px; }
.promise h3 { color: var(--naranja); margin-bottom: 10px; font-size: 1.3rem; }
.promise p { font-style: normal; color: var(--texto-suave); }
.reviews-title { margin-top: 70px; }

/* ---------- Así de fácil (3 pasos) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px; max-width: 1100px; margin: 0 auto;
}
.step-card { background: var(--fondo-2); border-radius: var(--radio); padding: 32px 26px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--naranja); color: var(--fondo);
  font-size: 1.5rem; font-weight: 800; margin-bottom: 16px;
}
.step-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.step-card p { color: var(--texto-suave); }

.review cite { display: block; margin-top: 16px; color: var(--texto-suave); font-style: normal; font-size: .9rem; }

/* =========================================================
   📞 CONTACTO Y PIE
   ========================================================= */
.contact { background: radial-gradient(circle at 50% 100%, rgba(255,122,26,.25), transparent 60%); }
.contact > p:first-of-type { color: var(--texto-suave); margin-top: -28px; margin-bottom: 32px; }
.contact-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.family { margin-top: 36px; font-size: 1.1rem; }
.zone { margin-top: 16px; font-size: .9rem; color: var(--texto-suave); }
.footer { text-align: center; padding: 28px; color: var(--texto-suave); font-size: .85rem; border-top: 1px solid #23283A; }

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .nav a:not(.btn) { display: none; }   /* en móvil solo se ve el botón Contacto */
  .hero { padding: 80px 6vw 70px; }
}

/* Accesibilidad: sin animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}