:root {
      --black: #0a0a0a;
      --ivory: #F5F3EE;
      --gutter: 24px;
      --baseline: 8px;
      --logo-w: 12ch;
      --brand-red: #f85c19;
      --brand-red-light: rgba(248, 92, 25, 0.15);
      --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  html,
  body {
      height: 100%;

  }

  *,
  *:before,
  *:after {
      box-sizing: border-box
  }

  body {
      margin: 0;
      background: var(--black);
      color: var(--ivory);
      font-family: "EB Garamond", serif;
      overflow: hidden;
      position: relative;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }

  /* Superposición de grano */
  .grain:before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .06;
      mix-blend-mode: soft-light;
      background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.35'/%3E%3C/svg%3E");
      background-size: 200px 200px;
  }

  /* LOGO con animación sutil */
  .logo {
      position: fixed;
      top: calc(var(--baseline)*3);
      left: var(--gutter);
      line-height: 1;
      user-select: none;
      width: auto;
      z-index: 5;
      transition: var(--transition);
  }

  .logo:hover {
      transform: translateY(-2px);
  }

  .logo img {
      width: 5vw;
      min-width: 100px;
      max-width: 180px;
      height: auto;
      display: block;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }

  /* Lateral derecho animado */
  .side-strip {
      position: fixed;
      top: 0;
      right: 0;
      width: 30mm;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      padding: 0;
      mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
      -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  }

  .side-strip .scroller {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      will-change: transform;
      animation: scrollY var(--scroll-duration, 60s) linear infinite;
  }

  /* Duplicamos contenido dentro del HTML para bucle perfecto */
  .side-strip .line {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-size: 13px;
      font-weight: 700;
      opacity: .85;
      letter-spacing: .04em;
      white-space: nowrap;
      transition: var(--transition);
  }

  .side-strip .line:hover {
      opacity: 1;
      color: var(--brand-red);
  }

  @keyframes scrollY {
      to {
          transform: translateY(calc(-1 * var(--scroll-distance, 50%)));
      }
  }

  .wrap {
      position: relative;
      height: 100vh;
      width: 100vw;
      display: grid;
      place-items: center;
      overflow: hidden;
  }

  .halo {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(38% 46% at 50% 60%, rgba(254, 122, 0, .30), rgba(200, 29, 37, .16) 40%, transparent 70%);
      filter: blur(22px) saturate(120%);
      animation: pulse 3.8s ease-in-out infinite;
      z-index: 1;
  }

  @keyframes pulse {

      0%,
      100% {
          transform: scale(1);
          opacity: .55
      }

      50% {
          transform: scale(1.06);
          opacity: .85
      }
  }

  /* Vídeo y caja en 100% del viewport */
  .flame-video,
  .caja-img {
       position: absolute;
  inset: 0;
  transform: none;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 2;
  transition: var(--transition);
  }

/* Caja centrada ~70% y transiciones sin tocar display inline */
.caja-img{
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
  height: auto;
  border-radius: 12px;
  z-index: 3;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);

  /* visibilidad controlada por clases (nada de display:none) */
  display: block !important;   /* anula el display:none viejo */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease;
}

.caja-img.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
  .flame-video {
       position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 2;
  transition: var(--transition);
  }

  .flame-video:hover {
      filter: brightness(1.5) saturate(130%);
  }

  .caja-img {
      display: none;
      border-radius: 12px;
      z-index: 3;
      pointer-events: auto;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }

  .bottom-left {
      position: fixed;
      left: var(--gutter);
      bottom: calc(var(--baseline)*2.5);
      display: flex;
      flex-direction: column;
      gap: calc(var(--baseline)*1);
      width: calc(var(--logo-w) + 28vw);
      z-index: 4;
  }

  /* Contador con efecto de brillo sutil */
  .countdown-bl {
      font-size: 3.5rem;
      margin-bottom: 30px;

      line-height: 3rem;
      text-shadow: 0 0 10px rgba(248, 92, 25, 0.3);
      transition: var(--transition);
  }

  .countdown-bl:hover {
      text-shadow: 0 0 15px rgba(248, 92, 25, 0.5);
  }

  /* CTA como botón visible y accesible */
  .cta {
      font-size: 1.5rem;
      text-transform: uppercase;
      cursor: pointer;
      width: max-content;
      line-height: calc(var(--baseline)*3);
      border-radius: 10px;
      border: 1px solid var(--brand-red);
      background: transparent;
      color: var(--brand-red);
      padding: 16px 20px;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
      font-family: "EB Garamond", serif;
      text-shadow: 0 0 10px rgba(248, 92, 25, 0.5);
  }

  .cta:before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.7s;
  }

  .cta:hover {
      background: var(--brand-red);
      color: #fff;
      box-shadow: 0 5px 15px rgba(248, 92, 25, 0.4);
      transform: translateY(-2px);
  }

  .cta:hover:before {
      left: 100%;
  }

  .cta:active {
      transform: translateY(1px);
      box-shadow: 0 2px 5px rgba(248, 92, 25, 0.4);
  }

  .cta:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
  }

  /* Modal con animación de entrada */
  .modal {
      position: fixed;
      inset: 0;
      display: none;
      place-items: center;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(2px);
      z-index: 10;
      opacity: 0;
      transition: opacity 0.3s ease;
  }

  .modal.open {
      display: grid;
      opacity: 1;
      animation: modalFadeIn 0.3s ease-out;
  }

  @keyframes modalFadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  .card {
      width: min(92vw, 520px);
      background: #111;
      color: var(--ivory);
      border: 1px solid #2a2a2a;
      border-radius: 14px;
      padding: calc(var(--baseline)*2.5);
      box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
      font-family: "EB Garamond", serif;
      transform: translateY(20px);
      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .modal.open .card {
      transform: translateY(0);
  }

  .card h2 {
      margin: 0 0 calc(var(--baseline)*1.5);
      font-weight: 700;
      font-size: 2rem;
      position: relative;
      padding-bottom: 10px;
  }

  .card h2:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 2px;
      background: var(--brand-red);
  }

  .card p {
      margin: 0 0 calc(var(--baseline)*2);
      opacity: .85;
      line-height: 1.5;
  }

  .form-row {
      display: flex;
      gap: calc(var(--baseline)*1.5);
      margin-bottom: calc(var(--baseline)*1.5);
      flex-wrap: wrap;
  }

  .form-row>div {
      flex: 1;
      min-width: 220px;
  }

  label {
      display: block;
      font-size: 1.25rem;
      opacity: .85;
      margin-bottom: calc(var(--baseline)*0.75);
  }

  input,
  select,
  textarea {
      width: 100%;
      background: #0b0b0b;
      color: var(--ivory);
      border: 1px solid #303030;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 1.1rem;
      font-family: "EB Garamond", serif;
      transition: var(--transition);
  }

  input:focus,
  select:focus,
  textarea:focus {
      outline: none;
      border-color: var(--brand-red);
      box-shadow: 0 0 0 2px var(--brand-red-light);
  }

  textarea {
      min-height: 88px;
      resize: vertical;
  }

  .consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.4;
      opacity: .85;
      font-size: 1.1rem;
      margin-top: 6px;

      width: 100%;
      white-space: normal;
      flex-wrap: wrap;
  }

  .consent input {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      margin: 2px 0 0;
      accent-color: var(--brand-red);
  }

  .consent span {
      flex: 1 1 0;
      display: block;
      white-space: normal;
      overflow-wrap: anywhere;
  }

  .actions {
      display: flex;
      gap: calc(var(--baseline)*1.5);
      justify-content: flex-end;
      margin-top: calc(var(--baseline)*2);
  }

  .btn {
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 1.1rem;
      border: 1px solid #2a2a2a;
      background: #191919;
      color: var(--ivory);
      cursor: pointer;
      font-family: "EB Garamond", serif;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
  }

  .btn:before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      transition: left 0.7s;
  }

  .btn:hover:before {
      left: 100%;
  }

  .btn.primary {
      background: #f5f3ee;
      color: #0a0a0a;
      border-color: #f5f3ee;
  }

  .btn.primary:hover {
      background: #e8e6e1;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(245, 243, 238, 0.2);
  }

  .btn:active {
      transform: translateY(1px);
  }

  /* Estados de carga para el formulario */
  .loading {
      position: relative;
      pointer-events: none;
  }

  .loading:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
      border: 2px solid transparent;
      border-top: 2px solid var(--brand-red);
      border-radius: 50%;
      animation: spin 1s linear infinite;
  }

  @keyframes spin {
      0% {
          transform: rotate(0deg);
      }

      100% {
          transform: rotate(360deg);
      }
  }

  /* Efecto de partículas sutiles en el fondo */
  .particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
  }

  .particle {
      position: absolute;
      background: rgba(248, 92, 25, 0.2);
      border-radius: 50%;
      animation: float 15s infinite linear;
  }

  @keyframes float {
      0% {
          transform: translateY(0) rotate(0deg);
          opacity: 0;
      }

      10% {
          opacity: 1;
      }

      90% {
          opacity: 1;
      }

      100% {
          transform: translateY(-100vh) rotate(360deg);
          opacity: 0;
      }
  }

  @media(prefers-reduced-motion:reduce) {

      .halo,
      .flame-video,
      .side-strip .scroller,
      .cta,
      .btn,
      .modal,
      .card,
      .particle {
          animation: none;
          transition: none;
      }
  }

  /* Responsive mejoras */
  @media (max-width: 768px) {
      .logo img {
          width: 80px;
      }

      .side-strip {
          width: 20mm;
      }

      .bottom-left {
          width: auto;
          max-width: 80%;
      }

      .form-row>div {
          min-width: 100%;
      }
  }