:root{
    --bg: #0b0f14;
    --text: #f3f6fb;
    --muted: rgba(243,246,251,.78);
    --glass: rgba(10,14,20,.52);
    --border: rgba(255,255,255,.14);
    --shadow: 0 20px 60px rgba(0,0,0,.45);
    --radius: 18px;
  }
  
  *{ box-sizing:border-box; }
  
  html{
    height:100%;
    overflow-x: hidden;
  }

  body{
    height:100%;
    margin:0;
    overflow-x: hidden;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
  }
  
  /* ================= SCENES ================= */
  
  .scene{
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
    overflow: hidden;
  }
  
  .scene--active{
    opacity: 1;
    pointer-events: auto;
  }
  
  /* ================= ANIMACIONES ================= */
  
  /* Zoom lento del fondo */
  @keyframes bgSlowZoom {
    0%   { transform: scale(1.03); }
    100% { transform: scale(1.10); }
  }
  
  /* Entrada suave (sin tocar el "posicionamiento" de la caja) */
  @keyframes cardInSimple {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  
  /* Shake error (solo escena 1, respeta su transform base) */
  @keyframes shake {
    0%,100% { transform: translate(-50%, -20%) translateX(0); }
    20% { transform: translate(-50%, -20%) translateX(-6px); }
    40% { transform: translate(-50%, -20%) translateX(6px); }
    60% { transform: translate(-50%, -20%) translateX(-4px); }
    80% { transform: translate(-50%, -20%) translateX(4px); }
  }
  
  /* ================= TEXTOS / CONTROLES ================= */
  
  .quote{
    margin: 0 0 12px;
    font-size: clamp(18px, 2.2vw, 26px);
    line-height: 1.35;
    letter-spacing: .2px;
  }
  
  .hint{
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14px;
  }
  
  .gate{
    display: grid;
    gap: 10px;
    justify-items: center;
  }
  
  .label{
    font-size: 13px;
    color: var(--muted);
  }
  
  .row{
    display:flex;
    gap:10px;
    width: min(420px, 92vw);
  }
  
  input{
    flex: 1;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.08);
    color: var(--text);
    outline: none;
    font-size: 16px;
    letter-spacing: 1px;
  }
  
  input:focus{
    border-color: rgba(255,255,255,.35);
  }
  
  .btn{
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.12);
    color: var(--text);
    cursor: pointer;
  }
  
  .btn:hover{
    background: rgba(255,255,255,.18);
  }
  
  .msg{
    margin: 0;
    min-height: 18px;
    font-size: 13px;
    color: rgba(255,120,120,.95);
  }
  
  /* ================= ESCENA 1 ================= */
  
  .bg{
    position:absolute;
    inset:0;
    background-image: url("assets/img/caminos.jpg");
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    will-change: transform;
    animation: bgSlowZoom 28s ease-in-out infinite alternate;
  }
  
  .overlay{
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 50% 35%, rgba(0,0,0,.25), rgba(0,0,0,.75));
    backdrop-filter: blur(1px);
  }
  
  .card{
    position: absolute;
    max-width: 680px;
    top: 72%;
    left: 72%;
    transform: translate(-50%, -20%);
    padding: 22px 18px;
    border-radius: var(--radius);
    background: var(--glass);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-align: center;
  }
  
  /* Entrada escena 1 sin romper su transform base */
  @keyframes cardInScene1 {
    0%   { opacity: 0; transform: translate(-50%, -20%) translateY(14px); }
    100% { opacity: 1; transform: translate(-50%, -20%) translateY(0); }
  }
  
  .scene--active .card{
    animation: cardInScene1 .9s ease both;
    animation-delay: .15s;
  }
  
  .card.shake{
    animation: shake .35s ease;
  }
  
  /* ================= ESCENA 2 (CONIL) ================= */
  
  .scene2-bg{
    position:absolute;
    inset:0;
    background-image: url("assets/img/conil.jpg");
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    will-change: transform;
    animation: bgSlowZoom 30s ease-in-out infinite alternate;
  }
  
  .scene2-overlay{
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 70% 75%, rgba(0,0,0,.25), rgba(0,0,0,.75));
    backdrop-filter: blur(1px);
  }
  
  /* Caja abajo-derecha (anclada de verdad) */
  #scene2 .scene2-content{
    position: fixed;
    right: 24px;
    bottom: 24px;
    left: auto;
    top: auto;
  
    width: min(560px, 92vw);
    margin: 0;
  
    padding: 22px 18px;
    border-radius: var(--radius);
    background: rgba(10,14,20,.55);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-align: center;
  
    z-index: 5;
  }
  
  /* Entrada escena 2 (no mueve la caja de sitio) */
  .scene--active #scene2 .scene2-content{
    animation: cardInSimple .9s ease both;
  }

  /* Fotografías elegantes (tras escribir CONIL) - secuencia 1→2→3 */
  .scene2-photos {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
  }

  @keyframes scene2PhotoRevealCenter {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.88); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }

  @keyframes scene2PhotoReveal {
    0%   { opacity: 0; transform: scale(0.88); }
    100% { opacity: 1; transform: scale(1); }
  }

  .scene2-photo {
    position: absolute;
    border-radius: 14px;
    box-shadow: 0 14px 48px rgba(0,0,0,.45);
    border: 2px solid rgba(255,255,255,.22);
    object-fit: cover;
    opacity: 0;
  }

  .scene2-photo--1 {
    width: min(300px, 38vw);
    aspect-ratio: 4/3;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.88);
  }

  .scene2-photo--2 {
    width: min(280px, 32vw);
    aspect-ratio: 4/3;
    top: 10%;
    left: 6%;
    transform: scale(0.88);
  }

  .scene2-photo--3 {
    width: min(280px, 32vw);
    aspect-ratio: 4/3;
    top: 10%;
    right: 6%;
    left: auto;
    transform: scale(0.88);
  }

  .scene2-photos.is-visible .scene2-photo--1 {
    animation: scene2PhotoRevealCenter .9s ease 0s forwards;
  }

  .scene2-photos.is-visible .scene2-photo--2 {
    animation: scene2PhotoReveal .9s ease 1.2s forwards;
  }

  .scene2-photos.is-visible .scene2-photo--3 {
    animation: scene2PhotoReveal .9s ease 2.4s forwards;
  }

  /* ================= ESCENA 2: transiciones hidden/show ================= */
  .hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .5s ease, visibility .5s ease;
  }

  .scene2-content--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s ease, visibility .45s ease;
  }

  .scene2-content--hidden.hidden-done {
    display: none;
  }

  /* Bloque nuevo (texto + contador) - misma posición que scene2-content */
  .scene2-after {
    position: fixed;
    right: 24px;
    bottom: 24px;
    left: auto;
    top: auto;
    width: min(520px, 92vw);
    margin: 0;
    padding: 22px 20px;
    border-radius: var(--radius);
    background: rgba(10,14,20,.55);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-align: center;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    transition: opacity .6s ease, visibility .6s ease;
  }

  .scene2-after.show {
    opacity: 1;
    visibility: visible;
  }

  .scene2-after-quote {
    margin: 0 0 8px;
    font-size: clamp(20px, 2.5vw, 28px);
    line-height: 1.35;
    letter-spacing: .3px;
    font-weight: 500;
  }

  .scene2-after-sub {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--muted);
  }

  .scene2-counter {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s ease;
  }

  .scene2-counter.show {
    opacity: 1;
    visibility: visible;
  }

  .counter-days {
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 4px;
  }

  .counter-time {
    font-size: clamp(15px, 1.8vw, 18px);
    color: var(--muted);
    letter-spacing: .3px;
  }

  /* ================= RESPONSIVE: tablets (<=768px) ================= */
  @media (max-width: 768px) {
    .quote {
      font-size: clamp(16px, 4.5vw, 20px);
      margin-bottom: 10px;
    }

    .hint {
      font-size: 13px;
      margin-bottom: 14px;
    }

    .label {
      font-size: 12px;
    }

    .msg {
      font-size: 12px;
    }

    .row {
      flex-direction: column;
      width: 100%;
      max-width: 100%;
    }

    input {
      width: 100%;
      min-width: 0;
      font-size: 16px;
    }

    .btn {
      width: 100%;
    }

    /* Escena 2: encuadre del fondo en móvil - mostrar ancho completo, sin recortes laterales */
    .scene2-bg {
      background-size: 100% auto;
      background-position: center center;
      background-repeat: no-repeat;
    }

    /* Escena 1: card abajo centrada */
    .card {
      top: auto;
      left: 50%;
      right: auto;
      bottom: calc(20px + env(safe-area-inset-bottom));
      transform: translate(-50%, 0);
      max-width: min(520px, 92vw);
      width: 92vw;
      padding: 18px 14px;
    }

    .scene--active .card {
      animation: cardInScene1Mobile .9s ease both;
      animation-delay: .15s;
    }

    .card.shake {
      animation: shakeMobile .35s ease;
    }

    /* Escena 2: content y after - más compactas en móvil para no tapar CONIL */
    #scene2 .scene2-content,
    .scene2-after {
      left: 50%;
      right: auto;
      bottom: calc(16px + env(safe-area-inset-bottom));
      transform: translateX(-50%);
      width: min(460px, 88vw);
      padding: 14px 12px;
    }

    #scene2 .scene2-content .quote {
      font-size: clamp(14px, 3.8vw, 17px);
      line-height: 1.3;
      margin-bottom: 8px;
    }

    #scene2 .scene2-content .gate {
      gap: 6px;
    }

    .scene--active #scene2 .scene2-content {
      animation: cardInSimpleMobile .9s ease both;
      animation-delay: .15s;
    }

    .scene2-after-quote {
      font-size: clamp(16px, 4vw, 20px);
      margin-bottom: 4px;
    }

    .scene2-after-sub {
      margin: 0 0 10px;
      font-size: 12px;
    }

    .counter-days {
      font-size: clamp(16px, 4vw, 20px);
    }

    .counter-time {
      font-size: clamp(12px, 3vw, 14px);
    }

    /* Fotos: ligeramente más pequeñas en tablet */
    .scene2-photo--1 {
      width: min(260px, 42vw);
    }

    .scene2-photo--2,
    .scene2-photo--3 {
      width: min(200px, 28vw);
    }
  }

  /* Animaciones móvil (posicionamiento bottom-centered) */
  @keyframes cardInSimpleMobile {
    0%   { opacity: 0; transform: translate(-50%, 0) translateY(14px); }
    100% { opacity: 1; transform: translate(-50%, 0) translateY(0); }
  }

  @keyframes cardInScene1Mobile {
    0%   { opacity: 0; transform: translate(-50%, 0) translateY(14px); }
    100% { opacity: 1; transform: translate(-50%, 0) translateY(0); }
  }

  @keyframes shakeMobile {
    0%,100% { transform: translate(-50%, 0) translateX(0); }
    20% { transform: translate(-50%, 0) translateX(-6px); }
    40% { transform: translate(-50%, 0) translateX(6px); }
    60% { transform: translate(-50%, 0) translateX(-4px); }
    80% { transform: translate(-50%, 0) translateX(4px); }
  }

  /* ================= RESPONSIVE: móviles pequeños (<=600px) ================= */
  @media (max-width: 600px) {
    .quote {
      font-size: clamp(15px, 4.2vw, 18px);
    }

    .card {
      padding: 14px 12px;
      bottom: calc(16px + env(safe-area-inset-bottom));
    }

    #scene2 .scene2-content,
    .scene2-after {
      padding: 10px 10px;
      bottom: calc(12px + env(safe-area-inset-bottom));
      width: min(400px, 90vw);
    }

    #scene2 .scene2-content .quote {
      font-size: clamp(13px, 3.5vw, 15px);
      margin-bottom: 6px;
    }

    .scene2-after-quote {
      font-size: clamp(14px, 3.5vw, 17px);
    }

    .scene2-after-sub {
      margin: 0 0 8px;
      font-size: 11px;
    }

    .counter-days {
      font-size: clamp(14px, 3.5vw, 18px);
    }

    .counter-time {
      font-size: 11px;
    }

    .overlay,
    .scene2-overlay {
      backdrop-filter: none;
    }

    .scene2-photo--1 {
      width: min(220px, 48vw);
    }

    .scene2-photo--2,
    .scene2-photo--3 {
      width: min(160px, 32vw);
    }
  }