/* =========================================================================
   Summr TV — capa propia sobre `base.css` (la hoja de la casa).

   Es el producto que se usa a oscuras, en una habitación de hotel: fondo
   índigo nocturno y un ámbar cálido para lo que «está encendido» —el QR de la
   pared, la señal, el emparejamiento—. El resto del sistema viene de la
   familia.
   ========================================================================= */

:root {
  --aqua: #7FE7FF;
  --cian: #34B6F0;
  --marea: #2F6BE0;
  --oceano: #1F5AC4;
  --grad: linear-gradient(118deg, #7FE7FF 0%, #34B6F0 46%, #2F6BE0 100%);
  --ambar: #FFC46B;

  --abismo: #0A1223;
  --hondo: #101C36;
  --marina: #1C3560;
  --claro: #EAF4FF;
  --claro-medio: #A2BBD8;
  --claro-tenue: #6A82A3;

  --papel: #FBFCFE;
  --hueso: #EFF3F8;
  --filete: #DBE2EC;
  --tinta: #0F2038;
  --tinta-suave: #526478;
  --tinta-tenue: #8494A6;
}

.hero::before { background: radial-gradient(circle, rgba(52, 182, 240, .62), transparent 68%); }
.hero::after { background: radial-gradient(circle, rgba(255, 196, 107, .30), transparent 68%); }
.cierre::before { background: radial-gradient(circle, rgba(52, 182, 240, .5), transparent 66%); }

/* --------------------------------------------------------- escena ------ */
/* La ilustración del hero: cartel en la pared, tele y teléfono. Es el gesto
   entero del producto en una sola imagen. */
.escena { margin: clamp(30px, 5vw, 56px) auto 0; width: min(920px, 94vw); }
.escena svg { width: 100%; height: auto; overflow: visible; }
.e-pared { fill: rgba(234, 244, 255, .04); stroke: rgba(162, 187, 216, .35); stroke-width: 2; }
.e-tv { fill: rgba(16, 28, 54, .9); stroke: rgba(162, 187, 216, .5); stroke-width: 2.5; }
.e-pantalla { fill: rgba(52, 182, 240, .12); }
.e-fono { fill: rgba(16, 28, 54, .95); stroke: var(--aqua); stroke-width: 2.5; }
.e-qr { fill: var(--ambar); }
.e-qr-caja { fill: rgba(255, 196, 107, .12); stroke: var(--ambar); stroke-width: 2; }
.e-haz { fill: none; stroke: var(--ambar); stroke-width: 2.5; stroke-linecap: round; opacity: .3; }
.e-haz--1 { animation: haz 2.6s ease-in-out infinite; }
.e-haz--2 { animation: haz 2.6s ease-in-out infinite .3s; }
.e-haz--3 { animation: haz 2.6s ease-in-out infinite .6s; }
@keyframes haz { 0%, 100% { opacity: .16; } 50% { opacity: .9; } }
.e-txt { font: 600 15px var(--sans); fill: var(--claro-medio); }
.e-mono { font: 12px var(--mono); fill: var(--claro-tenue); letter-spacing: .1em; }

/* --------------------------------------------------------- pasos ------- */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; counter-reset: paso; }
.paso { border-top: 2px solid var(--tinta); padding-top: 18px; }
.paso__n { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--oceano); }
.paso h3 { font-size: 21px; margin: 10px 0 8px; }
.paso p { color: var(--tinta-suave); font-size: 15px; }

/* --------------------------------------------------------- piezas ------ */
.piezas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pieza {
  background: var(--papel); border: 1px solid var(--filete); border-radius: var(--r);
  padding: 24px 22px 26px; transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.pieza:hover { transform: translateY(-4px); border-color: rgba(47, 107, 224, .4); }
.pieza__plataforma {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--oceano); margin-bottom: 8px;
}
.pieza h3 { font-size: 19px; margin-bottom: 8px; }
.pieza p { color: var(--tinta-suave); font-size: 14.5px; }

/* --------------------------------------------------------- decisión ---- */
/* El bloque donde se cuenta el problema difícil y lo que se descartó. */
.decision {
  background: var(--hueso); border: 1px solid var(--filete); border-radius: var(--r);
  padding: clamp(26px, 4vw, 40px);
}
.decision h3 { font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 14px; }
.decision p { color: var(--tinta-suave); margin-bottom: 14px; }
.decision p:last-child { margin-bottom: 0; }
.decision b { color: var(--tinta); }
.descartado {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 99px; margin-right: 8px;
  background: rgba(15, 32, 56, .07); color: var(--tinta-suave); border: 1px solid var(--filete);
}
.elegido { background: rgba(47, 107, 224, .1); color: var(--oceano); border-color: rgba(47, 107, 224, .25); }