/* =============================================
   Black Week · Finca La Machota
   Una sola pantalla: oferta y formulario a la vista desde el primer momento.
   Fondo negro con sesgo verde (el verde de marca llevado a su extremo oscuro),
   crema de marca para el texto y el ambar del otono de las fotos como acento.
   Tipografias de marca: DM Serif Display para el titular, Raleway para todo lo demas.
   ============================================= */

:root {
    /* Negros con sesgo verde: un gris puro se veria barato al lado de las fotos */
    --fondo: #0D1510;
    --fondo-2: #141F18;
    --linea: rgba(247, 245, 239, .16);

    /* Crema de marca */
    --crema: #F7F5EF;
    --crema-apagada: #BFC7B2;

    /* Acento: el ambar del otono que domina las fotos y la creatividad */
    --ambar: #D9A441;

    --display: 'DM Serif Display', Georgia, serif;
    --ui: 'Raleway', system-ui, sans-serif;
    --espaciado-etiqueta: .055em;
    --ancho-max: 1180px;

    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--crema);
    font-family: var(--ui);
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ----- Rejilla principal ----- */
.oferta {
    /* La foto del anuncio, al fondo: quien llega desde el video reconoce el sitio.
       Se oscurece lo suficiente para que el texto encima se lea siempre. */
    background:
        linear-gradient(180deg, rgba(13,21,16,.80) 0%, rgba(13,21,16,.93) 55%, var(--fondo) 100%),
        url('/images/hero-otono.webp') center top / cover no-repeat;
}

.oferta__interior {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding-block: clamp(28px, 3.6vw, 52px);
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
}

/* En movil manda la conversion: el formulario va por delante del carrusel, que
   si no deja catorce fotos entre el titular y la casilla de enviar. */
.oferta__texto { order: 1; }
.caja          { order: 2; }
.carrusel      { order: 3; }

@media (min-width: 900px) {
    /* La columna de fotos manda: el formulario solo necesita su ancho justo.
       El texto y el carrusel se apilan a la izquierda; el formulario ocupa la
       columna derecha entera y se queda fijo al desplazar. */
    .oferta__interior { grid-template-columns: minmax(0, 1fr) clamp(330px, 30vw, 390px); }
    .oferta__texto { grid-column: 1; grid-row: 1; }
    .carrusel      { grid-column: 1; grid-row: 2; }
    .caja          { grid-column: 2; grid-row: 1 / span 2; }
}

.oferta__interior--centrado { max-width: 640px; }
.oferta__texto { min-width: 0; }

/* ----- Titular ----- */
.antetitulo {
    display: block;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: var(--espaciado-etiqueta);
    text-transform: uppercase;
    color: var(--crema-apagada);
}

.titular { margin: clamp(12px, 1.6vw, 18px) 0 0; line-height: 1.02; text-wrap: balance; }

.titular__black {
    display: block;
    font-family: var(--display);
    font-size: clamp(2.7rem, 6.4vw, 4.4rem);
    letter-spacing: -.01em;
}

.titular__dto {
    display: block;
    margin-top: .18em;
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.35rem, 2.8vw, 2.1rem);
    color: var(--ambar);
}
.titular__dto strong { font-weight: inherit; font-style: normal; }

.entradilla {
    margin: clamp(12px, 1.4vw, 16px) 0 0;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.5;
}
.entradilla strong { font-weight: 700; }

.texto {
    margin: 10px 0 0;
    max-width: 50ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--crema-apagada);
}

/* Solo lo que decide la visita. En negrita y en crema entera: si el parrafo
   fuera todo negrita no destacaria nada. */
.texto strong { font-weight: 700; color: var(--crema); }

/* ----- Carrusel de la finca -----
   Una foto grande cada vez, con su pie debajo. La pista se desplaza sola con
   scroll-snap: sin JavaScript sigue funcionando a mano o con el teclado, y las
   flechas y los puntos solo aparecen cuando el JS los enciende. */
/* Sin margen propio: lo separa el hueco de la rejilla. */
.carrusel { margin: 0; min-width: 0; }

.carrusel__pista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* La barra sobra: ya hay flechas y puntos. */
    scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline: 2px solid var(--ambar); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
    .carrusel__pista { scroll-behavior: auto; }
}

.carrusel__foto { position: relative; margin: 0; scroll-snap-align: center; }

.carrusel__foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 3px;
    background: var(--fondo-2);
}

/* El texto va sobre la foto. El degradado es lo que lo hace legible: sin el,
   una esquina clara de la imagen se come el texto. Mismo reparto que en el
   anuncio: titular en serif y bajada en la tipografia de interfaz. */
.carrusel__foto figcaption {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: 5px;
    padding: 90px 22px 20px;
    background: linear-gradient(180deg, transparent 0%, rgba(13, 21, 16, .5) 38%, rgba(13, 21, 16, .93) 100%);
    border-radius: 0 0 3px 3px;
    text-shadow: 0 1px 12px rgba(13, 21, 16, .8);
}

.carrusel__titular {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.3rem, 2.3vw, 1.75rem);
    line-height: 1.1;
    color: var(--crema);
    text-wrap: balance;
}

.carrusel__pie {
    font-size: 14.5px;
    line-height: 1.45;
    color: rgba(247, 245, 239, .88);
}

@media (max-width: 560px) {
    .carrusel__foto figcaption { padding: 72px 15px 15px; }
    .carrusel__pie { font-size: 13px; }
}

/* ----- Caja del formulario ----- */
.caja {
    position: relative;
    padding: clamp(20px, 2.6vw, 30px);
    background: var(--fondo-2);
    border: 1px solid var(--linea);
    border-radius: 3px;
}

@media (min-width: 900px) {
    /* Acompana al visitante mientras lee la columna de la izquierda. */
    .caja { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 20px); }
}

.caja__titulo {
    /* El hueco lo daba el subtitulo, que ya no esta: ahora lo pone el titulo. */
    margin: 0 0 clamp(16px, 2vw, 22px);
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    line-height: 1.12;
    text-wrap: balance;
}

.caja__texto { margin: 10px 0 18px; font-size: .95rem; line-height: 1.55; color: var(--crema-apagada); }

/* ----- Formulario de OK Web -----
   OK Web lee estas variables del contenedor al pintar, el boton incluido.
   Con !important mandan sobre los colores de su panel. */
.caja .okw {
    --okw-acento: var(--ambar) !important;
    --okw-texto-boton: #1A1206 !important;
    --okw-acento-texto: var(--ambar) !important;
    --okw-linea: rgba(247, 245, 239, .3) !important;
    --okw-halo: rgba(217, 164, 65, .25) !important;
    --okw-gris: var(--crema-apagada) !important;
    --okw-radio: 2px !important;
    --okw-ancho-boton: 100% !important;   /* boton a todo el ancho: es la unica accion de la pagina */
    background-color: transparent !important;
    color: var(--crema) !important;
}

.caja .okw .okw-etiqueta { color: var(--crema-apagada); font-weight: 500; }
.caja .okw .okw-boton { min-height: 54px; font-size: 1rem !important; }
.caja .okw-cargando { color: var(--crema-apagada); }
/* La lista desplegable la dibuja el sistema sobre fondo claro: sin esto, en
   Windows las opciones heredan el texto claro y no se ven. */
.caja .okw-select option { color: #23252C; background: #fff; }

/* ----- Pie ----- */
.pie { border-top: 1px solid var(--linea); background: var(--fondo); }

.pie__interior {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding-block: clamp(26px, 3.4vw, 42px);
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    display: grid;
    gap: clamp(20px, 2.6vw, 30px);
}

@media (min-width: 900px) {
    .pie__interior { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}

.legal { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--crema-apagada); }

.pie__marca { display: grid; gap: 8px; justify-items: start; }
.pie__logo { width: 150px; height: auto; }
.pie__texto, .pie__legal { margin: 0; font-size: 13px; color: var(--crema-apagada); }
.pie__enlaces { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.pie__enlaces a { color: var(--crema-apagada); text-decoration: underline; text-underline-offset: 3px; }
.pie__enlaces a:hover { color: var(--crema); }
.pie__legal { color: rgba(191, 199, 178, .65); }

:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

/* ----- Rasca -----
   El codigo se descubre rascando y se pega en el formulario. El premio esta en
   el HTML y lo tapa un canvas que pinta el JS: si el script no llega, el codigo
   se ve igualmente y nadie pierde el descuento. */
.rasca {
    /* Va bajo el texto descriptivo, no dentro del formulario: es el gancho, y
       ahi lo ve todo el mundo sin tener que mirar a la caja de la derecha.
       Contenido a proposito: es un guino, no el protagonista de la pagina. */
    max-width: 300px;
    margin: clamp(18px, 2.2vw, 24px) 0 0;
}

.rasca__rotulo {
    margin: 0 0 9px;
    font-family: var(--display);
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ambar);
}

.rasca__area {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 76px;
    padding: 12px;
    background: rgba(217, 164, 65, .08);
    border: 1px dashed rgba(217, 164, 65, .55);
    border-radius: 3px;
    overflow: hidden;
}

.rasca__premio { display: grid; justify-items: center; text-align: center; }

.rasca__codigo {
    font-family: var(--display);
    font-size: clamp(1.45rem, 2.6vw, 1.75rem);
    line-height: 1;
    letter-spacing: .05em;
    color: var(--ambar);
}

/* El canvas tapa el premio hasta que se rasca lo suficiente. */
.rasca__capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
    /* Sin esto, arrastrar el dedo para rascar desplaza la pagina. */
    touch-action: none;
    transition: opacity .45s ease;
}
.rasca__capa:active { cursor: grabbing; }
.rasca--abierto .rasca__capa { opacity: 0; pointer-events: none; }

.rasca--abierto .rasca__area { border-style: solid; }
.rasca--abierto .rasca__codigo { animation: rasca-sale .45s ease both; }

@keyframes rasca-sale {
    from { transform: scale(.88); opacity: .4; }
    to   { transform: scale(1);   opacity: 1; }
}

.rasca__botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.rasca__botones button[hidden] { display: none; }

.rasca__ver, .rasca__copiar {
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--linea);
    border-radius: 2px;
    color: var(--crema-apagada);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.rasca__ver:hover, .rasca__copiar:hover { background: rgba(247, 245, 239, .08); border-color: var(--crema-apagada); color: var(--crema); }
.rasca__copiar { border-color: rgba(217, 164, 65, .55); color: var(--ambar); }
.rasca__copiar:hover { background: rgba(217, 164, 65, .14); border-color: var(--ambar); color: var(--ambar); }

/* Hueco reservado: sin el, el aviso empuja el formulario al aparecer. */
.rasca__aviso { margin: 8px 0 0; min-height: 1.4em; font-size: 12px; line-height: 1.4; color: var(--ambar); }

/* ----- Formulario propio ----- */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; }

.campo label { font-size: 13px; font-weight: 500; color: var(--crema-apagada); }
.opcional { font-weight: 400; opacity: .7; }

.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo select {
    width: 100%;
    min-height: 48px;
    padding: 0 13px;
    background: rgba(247, 245, 239, .05);
    border: 1px solid rgba(247, 245, 239, .28);
    border-radius: 2px;
    color: var(--crema);
    font: inherit;
    font-size: 1rem;   /* 16px o mas: por debajo, el iPhone hace zoom al enfocar */
    transition: border-color .2s, background .2s;
}
.campo input:focus, .campo select:focus { outline: 0; border-color: var(--ambar); background: rgba(247, 245, 239, .08); }
.campo__ayuda { font-size: 12px; line-height: 1.4; color: var(--crema-apagada); }

/* Se marca en ambar para que se vea que es donde va el codigo que se ha rascado. */
.campo--codigo input { border-style: dashed; border-color: rgba(217, 164, 65, .55); color: var(--ambar); font-family: var(--display); font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; }
.campo--codigo input::placeholder { font-family: var(--ui); font-size: .92rem; letter-spacing: 0; text-transform: none; color: rgba(191, 199, 178, .6); }

.campo--trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.campo--consentimiento { gap: 8px; }
.consentimiento { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--crema-apagada); }
.consentimiento input { margin-top: 2px; flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--ambar); }
.consentimiento a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; }

.enviar {
    width: 100%;
    min-height: 54px;
    padding: 0 24px;
    background: var(--ambar);
    border: 0;
    border-radius: 2px;
    color: #1A1206;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s;
}
.enviar:hover { filter: brightness(1.08); }

.error { font-size: 12.5px; line-height: 1.4; color: #F0A9A0; }
.error--bloque { margin: 0 0 14px; padding: 11px 13px; background: rgba(240, 169, 160, .12); border-left: 3px solid #F0A9A0; }