/* ==========================================================
   Huecora — vida
   ----------------------------------------------------------
   Esta capa va después de todo y existe por un diagnóstico
   concreto: la web estaba bien hecha y parecía hecha por una
   máquina. Lo que la delataba:

     · rejillas de tarjetas idénticas,
     · todo centrado y alineado al mismo carril,
     · una paleta apagada sin un solo color que levante la voz,
     · y cero textura: colores planos sobre colores planos.

   Lo que se arregla aquí es eso, y nada más. No se toca la
   hoja principal: se le añade encima lo que le faltaba.

   La idea que lo gobierna todo: **una web con vida tiene
   imperfecciones a propósito**. Un trazo a mano que no es
   recto, una pegatina torcida tres grados, una tarjeta más
   grande que su vecina, un número gigante que se sale de su
   caja. Nada de eso lo hace una plantilla.
   ========================================================== */

:root {
  /*
    La paleta de marca es de tierra y está bien: es lo que
    distingue a Huecora de las mil apps azules. Pero no tenía
    ningún tono que levantara la voz. Estos tres son los
    mismos colores subidos de saturación, para acentos: no
    sustituyen a los de marca, los acompañan.
  */
  --coral: #e2714a;
  --coral-bright: #ff8a5c;
  --mint: #4f9e78;
  --mint-bright: #6fc79a;
  --gold: #e0a54c;
  --gold-soft: #fbeedb;
  --plum: #7b4b6b;

  --grad-calido: linear-gradient(135deg, #ff8a5c 0%, #e2714a 45%, #c8563a 100%);
  --grad-fresco: linear-gradient(135deg, #6fc79a 0%, #4f9e78 55%, #3d7c5e 100%);

  /* Sombras en capas: una sombra sola es un rectángulo gris. */
  --shadow-rica:
    0 1px 2px rgba(30, 34, 41, 0.04), 0 4px 8px rgba(30, 34, 41, 0.04),
    0 12px 24px rgba(30, 34, 41, 0.06), 0 24px 48px rgba(200, 109, 81, 0.07);
  --shadow-alta:
    0 2px 4px rgba(30, 34, 41, 0.05), 0 12px 24px rgba(30, 34, 41, 0.08),
    0 32px 64px rgba(200, 109, 81, 0.12);
}

/* ---------- 1. Textura ---------- */

/*
  Un grano finísimo sobre todo el fondo. No se ve; se nota.
  Es la diferencia entre un color plano de pantalla y algo que
  parece impreso en papel. Va en un pseudoelemento fijo para
  que no cueste nada al hacer scroll.
*/
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * {
  position: relative;
  z-index: 2;
}

/* ---------- 2. El trazo de rotulador ---------- */

/*
  Debajo de «tú más tranquilo» va un subrayado hecho a mano:
  un trazo que no es recto, que se sale por un lado y que se
  dibuja solo al cargar. Es el detalle que más dice «aquí hay
  alguien detrás».
*/
.h-marca {
  position: relative;
  display: inline-block;
}
.h-marca svg {
  position: absolute;
  left: -2%;
  bottom: -0.22em;
  width: 104%;
  height: 0.42em;
  overflow: visible;
  pointer-events: none;
}
.h-marca path {
  fill: none;
  stroke: var(--coral-bright);
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0.85;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: trazar 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.45s forwards;
}
@keyframes trazar {
  to {
    stroke-dashoffset: 0;
  }
}

/* Palabras resaltadas con rotulador, dentro del texto corrido. */
.subraya {
  background: linear-gradient(transparent 62%, var(--gold-soft) 62%);
  padding: 0 2px;
  font-weight: 600;
}

/* ---------- 3. Pegatinas torcidas ---------- */

/*
  Tres grados de inclinación. Un elemento perfectamente recto
  parece colocado por un programa; uno torcido, puesto por una
  mano.
*/
.pegatina {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  text-align: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--grad-calido);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  font-size: 0.92rem;
  box-shadow: 0 10px 28px rgba(200, 86, 58, 0.38);
  transform: rotate(-9deg);
  animation: pegatina-entra 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both;
}
.pegatina small {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  opacity: 0.92;
  margin-top: 2px;
}
.pegatina--hero {
  /*
    Colgando del borde izquierdo y por fuera del todo. Dos intentos antes la
    dejaban encima de «Martes, 14 oct»: una pegatina que tapa lo que vende no
    es un adorno, es un estorbo. Aquí no pisa nada.
  */
  top: -38px;
  left: -112px;
}
@media (max-width: 1180px) {
  .pegatina--hero {
    top: -32px;
    left: -98px;
    width: 92px;
    height: 92px;
    font-size: 0.84rem;
  }
}
@keyframes pegatina-entra {
  0% {
    opacity: 0;
    transform: rotate(14deg) scale(0.4);
  }
  100% {
    opacity: 1;
    transform: rotate(-9deg) scale(1);
  }
}
@media (max-width: 980px) {
  .pegatina--hero {
    display: none;
  }
}

/* ---------- 4. La cinta que no para ---------- */

/*
  Una banda que cruza la pantalla con lo que hace el producto.
  Dos copias del mismo contenido desplazándose: cuando la
  primera termina, la segunda ya está en su sitio y no se ve
  la costura.
*/
.cinta {
  overflow: hidden;
  padding: 18px 0;
  background: var(--ink);
  color: var(--cream);
  border-top: 1px solid #2d333c;
  border-bottom: 1px solid #2d333c;
  /* Un punto de fuga a los lados: no se corta de golpe. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta-pista {
  display: flex;
  width: max-content;
  animation: desfilar 38s linear infinite;
}
.cinta:hover .cinta-pista {
  animation-play-state: paused;
}
.cinta-grupo {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 500;
}
.cinta-grupo span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cinta-grupo i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral-bright);
  flex: none;
}
@keyframes desfilar {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- 5. La rejilla deja de ser una rejilla ---------- */

/*
  Seis tarjetas idénticas en tres columnas es la firma de una
  plantilla. Aquí la primera ocupa el doble, la cuarta es
  oscura y las demás caen alrededor: la vista tiene por dónde
  entrar.
*/
@media (min-width: 981px) {
  .bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  /*
    Tres tarjetas anchas, no dos. Con dos salían ocho huecos en una rejilla
    de tres columnas: dos filas llenas y una tercera con una tarjeta y un
    agujero en la esquina. Con tres son nueve, que es múltiplo de tres, y el
    bloque cierra en rectángulo. Y van en la 1, la 4 y la 5 para que el
    ancho cambie de lado en cada fila en vez de quedar alineado.
  */
  .bento > *:nth-child(1),
  .bento > *:nth-child(4),
  .bento > *:nth-child(5) {
    grid-column: span 2;
  }
}

/* Cada tarjeta lleva un filo de color arriba que se enciende al pasar. */
.card {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-rica);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-calido);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover::before {
  transform: scaleX(1);
}
.card:hover {
  box-shadow: var(--shadow-alta);
}

/* Un lavado de color muy suave al pasar por encima. */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at 20% 0%, rgba(226, 113, 74, 0.07), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.card:hover::after {
  opacity: 1;
}

/* La tarjeta oscura del bento, para que la rejilla tenga peso. */
.card--oscura {
  background: var(--ink);
  border-color: #343a44;
  color: var(--cream);
}
.card--oscura h3 {
  color: var(--cream);
}
.card--oscura p {
  color: #b2b7c0;
}
.card--oscura .icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--coral-bright);
}
.card--oscura::after {
  background: radial-gradient(420px circle at 20% 0%, rgba(255, 138, 92, 0.14), transparent 65%);
}

/* Los iconos dejan de ser cuadrados grises iguales. */
.icon--t {
  background: linear-gradient(135deg, #fbe3d8, #f6d2c2);
  color: #b4502f;
}
.icon--s {
  background: linear-gradient(135deg, #dff0e6, #c9e4d4);
  color: #35755a;
}
.icon--i {
  background: linear-gradient(135deg, #fbeedb, #f6e0bd);
  color: #9a6b22;
}

/* ---------- 6. Los pasos, con número gigante ---------- */

/*
  El número se sale de su caja y se queda detrás del texto.
  Es un recurso de revista, y es justo lo que una plantilla no
  hace.
*/
.step {
  position: relative;
  overflow: visible;
}
.step::before {
  counter-increment: paso;
  content: '0' counter(paso);
  position: absolute;
  top: -34px;
  right: -6px;
  font-family: var(--font-head);
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(200, 109, 81, 0.28);
  pointer-events: none;
  z-index: 0;
}
.steps {
  counter-reset: paso;
}
.step > * {
  position: relative;
  z-index: 1;
}

/* ---------- 7. Los bloques de función, descolocados ---------- */

/*
  Las dos filas alternas estaban clavadas al mismo carril. Un
  pelo de desplazamiento y una rotación mínima en la maqueta
  rompen la simetría sin que se note el truco.
*/
@media (min-width: 901px) {
  .feature-row .phone {
    transform: rotate(-2.2deg);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .feature-row--rev .phone {
    transform: rotate(2.6deg);
  }
  .feature-row .phone:hover,
  .feature-row--rev .phone:hover {
    transform: rotate(0deg) scale(1.03);
  }
}

/* ---------- 8. Fondos con relieve ---------- */

/*
  Las secciones blancas eran rectángulos blancos. Ahora llevan
  un degradado muy suave y un borde superior de color que las
  separa sin una línea dura.
*/
.section--white {
  background:
    radial-gradient(900px circle at 85% -10%, rgba(226, 113, 74, 0.055), transparent 60%),
    radial-gradient(700px circle at 5% 110%, rgba(79, 158, 120, 0.05), transparent 60%),
    var(--paper);
}
.section--white::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 109, 81, 0.35),
    rgba(92, 118, 103, 0.3),
    transparent
  );
}
.section {
  position: relative;
}

/* La franja de cifras, con el número en color y más peso. */
.strip-item b {
  background: var(--grad-calido);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 9. El botón manda más ---------- */

.btn--primary {
  background: var(--grad-calido);
  border: 0;
  box-shadow:
    0 2px 6px rgba(200, 86, 58, 0.26),
    0 10px 24px rgba(200, 86, 58, 0.22);
}
.btn--primary:hover {
  box-shadow:
    0 4px 10px rgba(200, 86, 58, 0.3),
    0 16px 34px rgba(200, 86, 58, 0.3);
}

/* La caja final deja de ser un rectángulo oscuro y plano. */
.cta-box {
  background:
    radial-gradient(600px circle at 15% 0%, rgba(226, 113, 74, 0.26), transparent 60%),
    radial-gradient(500px circle at 90% 100%, rgba(79, 158, 120, 0.2), transparent 60%), var(--ink);
  box-shadow: var(--shadow-alta);
}

/* ---------- 10. Y se apaga entero ---------- */

@media (prefers-reduced-motion: reduce) {
  .h-marca path {
    stroke-dashoffset: 0;
    animation: none;
  }
  .pegatina {
    animation: none;
    opacity: 1;
  }
  .cinta-pista {
    animation: none;
  }
  .feature-row .phone,
  .feature-row--rev .phone {
    transform: none;
  }
}