/* ===========================================================
   TIENDA OHANA — "De Valpo al Bernabéu"
   Estilos de las dos paginas: index.html y gracias.html
   Base: plantilla "7. PLANTILLA LANDING SIMPLE RECEPCION DATOS"
   =========================================================== */
:root{
  /* Fondos — verde botella muy profundo, casi negro */
  --fondo:         #04140D;
  --fondo-alto:    #071C13;   /* bloques levantados sobre el fondo */
  --fondo-gracias: #04140D;

  /* Verde Santiago Wanderers */
  --verde:         #00A651;   /* verde vivo, el acento principal */
  --verde-claro:   #4ADE80;   /* realces y textos destacados */
  --verde-oscuro:  #00663220; /* usado solo en bordes tenues */
  --verde-banner:  #024C2A;   /* extremo oscuro de la franja */

  /* Plateado — la medalla */
  --plata:         #D8DEE6;
  --plata-tenue:   #9AA4B0;

  /* Azul de la cinta — color de apoyo */
  --azul-cinta:    #1B3A8C;

  /* Texto */
  --marfil:        #F5F1E8;
  --texto-suave:   #B9C4BD;
  --texto-tenue:   #7C8B83;

  --whatsapp:      #25D366;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;}

:focus-visible{outline:2px solid var(--verde-claro);outline-offset:3px;border-radius:4px;}


/* ===========================================================
   PAGINA 1 — REGISTRO
   =========================================================== */
body.pagina-registro{background:var(--fondo);}

/* ---------- Encabezado minimo (sin menu, a proposito) ---------- */
.oh-header{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 16px 0;}
.oh-escudo{height:calc(min(232px, 58vw) / 2.5243);width:auto;flex:none;}
/* El lettering de la campana es muy detallado: necesita ancho para
   leerse, por eso se dimensiona por ancho y no por alto. */
.oh-campana{width:min(232px,58vw);height:auto;}

/* ---------- Seccion principal ---------- */
.oh-section{padding:36px 20px 28px;text-align:center;}

.oh-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border:1px solid rgba(0,166,81,.5);border-radius:999px;color:var(--verde-claro);font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:24px;}
.oh-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--verde-claro);display:inline-block;animation:blinkdot .6s steps(1,end) infinite;}
@keyframes blinkdot{0%,49%{opacity:1;}50%,100%{opacity:0;}}

.oh-eyebrow{color:var(--verde-claro);font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px;}

.oh-headline{color:var(--marfil);font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-.02em;max-width:820px;margin:0 auto 24px;text-wrap:balance;}

/* ---------- El producto: protagonista visual ---------- */
.oh-medalla{max-width:440px;margin:0 auto 26px;}
.oh-medalla img{display:block;width:100%;max-width:100%;height:auto;border-radius:16px;}

/* Aviso que aparece solo si falta el archivo de una imagen,
   para que nunca se vea un icono roto. */
.imagen-faltante{display:grid;place-items:center;gap:10px;width:100%;aspect-ratio:1/1;border:1px dashed rgba(216,222,230,.3);border-radius:16px;background:linear-gradient(160deg, rgba(0,166,81,.07), rgba(27,58,140,.07));padding:20px;color:var(--plata-tenue);font-size:12px;font-weight:600;line-height:1.6;text-align:center;}
.oh-header .imagen-faltante{aspect-ratio:auto;min-height:46px;padding:8px 14px;font-size:11px;}

.oh-sub{color:var(--texto-suave);font-size:17px;line-height:1.55;max-width:560px;margin:0 auto 14px;}
.oh-cupos{color:var(--plata);font-size:15px;font-weight:700;margin:0 auto 6px;}
.oh-stock{color:var(--verde-claro);font-size:13px;font-weight:600;margin:0 auto 36px;}

/* ---------- Boton principal ---------- */
.oh-btn{display:inline-block;width:100%;max-width:440px;padding:20px 32px;background:linear-gradient(135deg,#31D67F,var(--verde));color:#03210F;font-family:inherit;font-weight:800;font-size:17px;line-height:1.25;letter-spacing:.4px;text-transform:uppercase;border:none;border-radius:28px;cursor:pointer;box-shadow:0 10px 30px rgba(0,166,81,.45), 0 0 44px rgba(74,222,128,.22);transition:transform .2s ease, box-shadow .2s ease;text-decoration:none;animation:respiroBoton 2.6s ease-in-out infinite;}
@keyframes respiroBoton{0%,100%{box-shadow:0 10px 30px rgba(0,166,81,.45), 0 0 44px rgba(74,222,128,.22);}50%{box-shadow:0 10px 34px rgba(0,166,81,.65), 0 0 64px rgba(74,222,128,.45);}}
.oh-btn:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(0,166,81,.55), 0 0 60px rgba(74,222,128,.3);animation-play-state:paused;}

.oh-aviso{margin-top:16px;color:var(--texto-suave);font-size:14px;}

/* ---------- Que incluye la coleccion ----------
   Flex con wrap para que al envolver no queden separadores
   huerfanos al inicio de una linea. */
.oh-incluye{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;color:var(--marfil);font-size:13px;font-weight:600;letter-spacing:.3px;}
.oh-incluye span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.oh-incluye i{color:var(--verde-claro);font-style:normal;}

/* ---------- Cierre emocional ---------- */
.oh-historia{margin:44px auto 0;max-width:560px;padding-top:30px;border-top:1px solid rgba(216,222,230,.12);}
.oh-historia strong{display:block;color:var(--marfil);font-size:19px;font-weight:800;letter-spacing:.08em;margin-bottom:10px;}
.oh-historia p{color:var(--texto-suave);font-size:15px;line-height:1.6;margin:0;}

/* ---------- Pie ---------- */
.oh-footer{padding:0 20px 44px;text-align:center;}
.oh-logo-pie{display:block;width:96px;height:auto;margin:0 auto 16px;}
.oh-legal{color:var(--texto-suave);font-size:13.5px;line-height:1.65;max-width:600px;margin:0 auto;}


/* ===========================================================
   VENTANA EMERGENTE DEL FORMULARIO
   =========================================================== */
.pop-overlay{position:fixed;inset:0;background:rgba(2,10,6,.86);z-index:99999;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 16px;opacity:0;transition:opacity .15s ease;}
.pop-overlay.is-open{opacity:1;}
.pop-overlay[hidden]{display:none;}

.pop-box{position:relative;background:#0C2118;border:1px solid rgba(0,166,81,.2);border-radius:12px;width:100%;max-width:500px;margin:auto;padding:56px 40px 44px;transform:translateY(12px);transition:transform .15s ease;}
.pop-overlay.is-open .pop-box{transform:translateY(0);}

.pop-close{position:absolute;top:18px;right:18px;width:30px;height:30px;display:grid;place-items:center;background:none;border:none;padding:0;cursor:pointer;color:rgba(245,241,232,.55);transition:color .2s ease;}
.pop-close:hover{color:var(--marfil);}
.pop-close svg{width:14px;height:14px;fill:currentColor;}

.pop-title{color:var(--marfil);font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0 0 10px;}
.pop-text{color:var(--texto-suave);font-size:15px;line-height:1.6;margin:0 0 32px;}

.pop-form{display:grid;gap:18px;}

.campo{display:grid;gap:7px;text-align:left;}
.campo label{color:var(--marfil);font-size:13px;font-weight:600;letter-spacing:.2px;}
.campo input[type=text],
.campo input[type=email],
.campo input[type=tel]{width:100%;height:50px;background:#fff;border:1px solid #E4E8EB;border-radius:8px;padding:12px 16px;font-family:inherit;font-size:16px;color:#1B2620;}
.campo input::placeholder{color:#95A09A;}
.campo input:focus{outline:2px solid var(--verde);outline-offset:1px;}
.campo.tiene-error input{border-color:#F87171;}

.campo-error{color:#FCA5A5;font-size:13px;line-height:1.4;}
.campo-error:empty{display:none;}

.pop-logo{display:block;height:56px;width:auto;margin:0 auto 18px;}

/* Telefono con prefijo +56 9 fijo, igual al de PDL Asesorias.
   Prefijo e input son hermanos dentro de una caja flex (no un
   padding-left calculado a ojo): así nunca se pueden superponer,
   sin importar el tamaño de letra del telefono/navegador de quien
   entra (el bug real: en su celular la letra grande del sistema
   agrandaba "+56 9" más de lo que el padding fijo reservaba). */
.campo-telefono-caja{display:flex;align-items:stretch;width:100%;height:50px;background:#fff;border:1px solid #E4E8EB;border-radius:8px;overflow:hidden;}
.campo-telefono-caja:focus-within{outline:2px solid var(--verde);outline-offset:1px;}
.campo-telefono.tiene-error .campo-telefono-caja{border-color:#F87171;}
.campo-telefono-prefijo{display:flex;align-items:center;gap:6px;flex:none;padding:0 12px;font-size:15px;font-weight:700;color:#515856;white-space:nowrap;border-right:1px solid #E4E8EB;pointer-events:none;}
.bandera-cl{flex:none;border-radius:2px;display:block;}
.campo-telefono input[type=tel]{flex:1;min-width:0;width:auto;height:auto;background:transparent;border:none;border-radius:0;padding:0 16px;}
.campo-telefono input[type=tel]:focus{outline:none;}
.campo-nota{color:var(--texto-tenue);font-size:12.5px;line-height:1.4;margin:0;}
.campo-nota.completo{color:var(--verde-claro);font-weight:700;}

/* Trampa anti-robots: invisible para personas, sin display:none
   para que los robots que la ignoran igual la rellenen. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- Casillas de consentimiento ---------- */
.consent{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;text-align:left;}
.consent input[type=checkbox]{width:19px;height:19px;margin:1px 0 0;accent-color:var(--verde);cursor:pointer;flex:none;}
.consent label{color:var(--texto-suave);font-size:13px;line-height:1.5;cursor:pointer;}
.consent a{color:var(--verde-claro);text-decoration:underline;}
.consent.tiene-error label{color:#FCA5A5;}

.pop-submit{height:52px;margin-top:6px;background:linear-gradient(135deg,#31D67F,var(--verde));color:#03210F;border:none;border-radius:8px;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;transition:filter .2s ease;}
.pop-submit:hover:not(:disabled){filter:brightness(1.08);}
.pop-submit:disabled{opacity:.6;cursor:progress;}

.pop-error{color:#FCA5A5;font-size:14px;line-height:1.5;margin:0;text-align:left;}
.pop-error:empty{display:none;}

.pop-nota{color:var(--texto-tenue);font-size:12px;text-align:center;margin:0;}
.pop-stock{color:var(--verde-claro);font-weight:700;margin-top:4px;}

/* Telon que tapa la pagina justo antes de saltar a gracias */
.pop-curtain{position:fixed;inset:0;background:var(--fondo);z-index:2147483647;}
.pop-curtain[hidden]{display:none;}


/* ===========================================================
   PAGINA 2 — GRACIAS
   =========================================================== */
body.pagina-gracias{background:var(--fondo-gracias);}

#gc-top-bar{position:fixed;top:0;left:0;width:100%;z-index:100000;}

.gc-banner{background:linear-gradient(90deg,var(--verde-banner),var(--verde),var(--verde-banner));padding:16px 20px;text-align:center;}
.gc-banner span{color:#fff;font-weight:800;font-size:19px;letter-spacing:.5px;}

.gc-progress-wrap{background:#000;padding:16px 20px;text-align:center;}
.gc-progress-track{max-width:600px;margin:0 auto;background:#0a0a0a;border:1px solid rgba(0,166,81,.4);border-radius:999px;padding:4px;}
.gc-progress-bar{background:linear-gradient(90deg,var(--verde),var(--verde-claro));height:24px;border-radius:999px;width:0%;transition:width .3s linear;display:flex;align-items:center;justify-content:flex-end;padding-right:12px;}
.gc-progress-bar span{color:#fff;font-weight:800;font-size:12px;font-variant-numeric:tabular-nums;}

/* La barra fija mide ~119px; el padding-top la despeja y deja el respiro.
   El contenido se alinea arriba, no al centro: al ser corto, centrarlo
   lo dejaba flotando en medio de la pantalla. */
.gracias-wrapper{position:fixed;inset:0;overflow-y:auto;z-index:99999;background:var(--fondo-gracias);color:var(--marfil);display:flex;justify-content:center;padding:40px 24px;padding-top:165px;}
.gracias-card{max-width:560px;width:100%;text-align:center;margin:0 auto;}

.gracias-check{width:72px;height:72px;border-radius:50%;background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 28px;}
.gracias-check svg{width:36px;height:36px;stroke:var(--verde-claro);}

.gracias-title{font-size:38px;font-weight:800;line-height:1.12;margin:0 0 16px;letter-spacing:-.02em;text-wrap:balance;}
.gracias-confirm{color:var(--texto-suave);font-size:17px;line-height:1.55;margin:0 0 30px;}

.wa-button{margin:0;display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:440px;padding:22px 28px;background:var(--whatsapp);color:#fff;border:none;border-radius:12px;font-size:17px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s;font-family:inherit;}
.wa-button:hover{background:#1EBE5B;transform:translateY(-2px);box-shadow:0 8px 26px rgba(37,211,102,.35);}
.wa-button svg{width:24px;height:24px;fill:#fff;flex:none;}

/* ---------- Video ---------- */
.gracias-video{margin-top:28px;position:relative;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#06120c;border:1px solid rgba(0,166,81,.18);cursor:pointer;}
.gracias-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;}
.gracias-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.gracias-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block;}
.gracias-video.reproduciendo{cursor:default;}
.gracias-video.reproduciendo .gracias-video-play,
.gracias-video.reproduciendo .gracias-video-label{display:none;}
.gracias-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:var(--verde-claro);display:grid;place-items:center;border:none;padding:0;cursor:pointer;}
.gracias-video-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--verde-claro);animation:pulsoPlayGracias 2s ease-out infinite;}
.gracias-video-play svg{width:26px;height:26px;fill:#06120c;margin-left:4px;}
@keyframes pulsoPlayGracias{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.8);opacity:0;}}
.gracias-video-label{position:absolute;left:0;right:0;bottom:18px;color:rgba(255,255,255,.75);font-size:13px;font-weight:600;text-align:center;pointer-events:none;}

.gracias-invitacion{margin-top:28px;padding:22px 24px;background:var(--fondo-alto);border:1px solid rgba(0,166,81,.18);border-radius:12px;color:var(--texto-suave);font-size:15px;line-height:1.6;}
.gracias-invitacion strong{color:var(--marfil);}

.gracias-nota{font-size:13px;color:var(--texto-tenue);line-height:1.6;margin-top:20px;}


/* ===========================================================
   RESPONSIVE — el celular manda
   =========================================================== */
@media(max-width:749px){
  .oh-section{padding:24px 20px 22px;}
  .oh-headline{font-size:30px;}
  .oh-medalla{max-width:300px;margin-bottom:20px;}
  .oh-sub{font-size:16px;}

  .gc-banner span{font-size:15px;}
  /* margen extra por si el aviso del banner cae en dos líneas */
  .gracias-wrapper{padding-top:180px;}
}

@media(max-width:600px){
  .oh-header{gap:12px;padding-top:14px;}
  .oh-logo-pie{width:84px;margin-bottom:14px;}
  .oh-badge{font-size:12px;padding:9px 18px;}
  .oh-headline{font-size:28px;}
  .oh-btn{font-size:16px;padding:19px 24px;}

  .pop-box{padding:46px 22px 32px;}
  .pop-logo{height:48px;margin-bottom:14px;}
  .pop-title{font-size:25px;}
  .pop-text{margin-bottom:26px;}

  .gracias-title{font-size:27px;}
  .gracias-confirm{font-size:15px;}
  .wa-button{font-size:15px;padding:20px 20px;}
}

/* Pantallas muy angostas (360 px) */
@media(max-width:380px){
  .oh-headline{font-size:26px;}
  .oh-medalla{max-width:250px;}
  .wa-button{gap:9px;font-size:14px;}
}

@media(min-width:750px){
  .oh-header{padding-top:24px;gap:22px;}
  .oh-escudo{height:calc(290px / 2.5243);}
  .oh-logo-pie{width:108px;margin-bottom:18px;}
  .oh-campana{width:290px;}
  /* El producto se limita para que el botón entre en la primera
     pantalla de un portátil (≈900 px de alto). */
  .oh-medalla{max-width:360px;margin-bottom:22px;}
  .oh-section{padding:26px 40px 32px;}
  .oh-badge{margin-bottom:28px;}
  .oh-headline{font-size:54px;}
  .oh-sub{font-size:19px;}
  /* En pantalla grande el botón se ajusta al texto y cabe en una línea;
     en celular sigue ocupando todo el ancho. */
  .oh-btn{font-size:18px;width:auto;max-width:none;padding:22px 52px;border-radius:999px;}
}

@media(prefers-reduced-motion:reduce){
  .oh-badge .dot{animation:none;}
  .oh-btn{animation:none;}
  .gracias-video-play::after{animation:none;}
  .oh-btn,.wa-button{transition:none;}
  .oh-btn:hover,.wa-button:hover{transform:none;}
}