/* ============================================================
   INNATE Polanco — Landing corta (una sola pantalla)
   Paleta tomada del flyer oficial:
   verde INNATE #01742C · negro tipográfico #0A0A0A
   ============================================================ */

:root {
    --verde: #01742C;
    --verde-claro: #17913F;
    --verde-oscuro: #015C22;
    --verde-fondo: #F1F7F2;
    --tinta: #0A0A0A;
    --texto: #23282A;
    --texto-suave: #5C6560;
    --whatsapp: #1FAF57;
    --whatsapp-hover: #178F47;
    --borde: #E3EAE5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--texto);
    background: linear-gradient(180deg, var(--verde-fondo) 0%, #FFFFFF 45%);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* ---------- Contenedor central (máx. 600 px) ---------- */
.lp {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 22px 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------- Logo ---------- */
.lp__marca { margin-bottom: 1.35rem; }

.lp__marca img {
    width: 218px;
    height: auto;
    margin: 0 auto 0.55rem;
}

.lp__sucursal {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--verde);
}

.icono-pin { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- Título y texto ---------- */
h1 {
    color: var(--tinta);
    font-size: clamp(1.6rem, 6.6vw, 2.25rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

h1 .acento { color: var(--verde); display: block; }

.lp__sub {
    color: var(--texto-suave);
    font-size: 0.98rem;
    max-width: 30rem;
    margin: 0 auto 1.5rem;
}

/* ---------- Carrusel de flyers (proporción completa, sin recorte) ---------- */
.carrusel {
    width: 100%;
    margin-bottom: 1.25rem;
}

/* La ventana reserva la proporción exacta del flyer:
   evita saltos de contenido al cambiar de diapositiva. */
.carrusel__ventana {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 12px 32px -14px rgba(1, 116, 44, 0.3);
    background: #fff;
}

/* Respaldo para navegadores sin soporte de aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .carrusel__ventana { height: 0; padding-bottom: 131.99%; }
    .carrusel__pista { position: absolute; inset: 0; }
}

.carrusel__pista {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.carrusel__pista.sin-transicion { transition: none; }

.carrusel__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

/* contain: nunca recorta ni deforma el diseño del flyer */
.carrusel__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* ---------- Controles del carrusel (debajo, sin tapar los flyers) ---------- */
.carrusel__controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.carrusel__flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: 50%;
    background: #fff;
    color: var(--tinta);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.carrusel__flecha svg { width: 18px; height: 18px; }

.carrusel__flecha:hover {
    background: var(--verde-fondo);
    border-color: rgba(1, 116, 44, 0.35);
    color: var(--verde);
}

.carrusel__flecha:active { transform: scale(0.94); }

.carrusel__puntos { display: flex; align-items: center; gap: 0.45rem; }

.carrusel__punto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #C6D2C9;
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
}

.carrusel__punto.esta-activo {
    background: var(--verde);
    width: 24px;
    border-radius: 999px;
}

.carrusel__flecha:focus-visible,
.carrusel__punto:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 3px;
}

/* ---------- Botón de WhatsApp ---------- */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 52px;
    background: var(--whatsapp);
    color: #fff;
    font-weight: 700;
    font-size: clamp(0.95rem, 4vw, 1.05rem);
    white-space: nowrap;
    text-decoration: none;
    padding: 0.95rem 1.2rem;
    border-radius: 14px;
    box-shadow: 0 8px 22px -8px rgba(31, 175, 87, 0.55);
    transition: transform 0.2s ease, background 0.2s ease;
}

.btn-whatsapp:hover { background: var(--whatsapp-hover); transform: translateY(-2px); }
.btn-whatsapp:active { transform: scale(0.98); }

.icono-wa { width: 24px; height: 24px; flex-shrink: 0; }

/* ---------- Frase de confianza ---------- */
.lp__nota {
    font-size: 0.82rem;
    color: var(--texto-suave);
    margin-top: 0.9rem;
    line-height: 1.7;
}

.lp__tel {
    display: block;
    color: var(--verde);
    font-weight: 700;
    text-decoration: none;
}

.lp__tel:hover { text-decoration: underline; }

/* ---------- Cierre ---------- */
.lp__footer {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 22px 2.5rem;
    text-align: center;
}

.lp__sello {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(1, 116, 44, 0.09);
    color: var(--verde);
    border: 1px solid rgba(1, 116, 44, 0.18);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}

.lp__legal {
    color: var(--texto-suave);
    font-size: 0.74rem;
    max-width: 26rem;
    margin: 0 auto 0.5rem;
}

.lp__copy { color: #9AA3A0; font-size: 0.72rem; }

/* ---------- Ajustes de pantallas medianas y grandes ---------- */
@media (min-width: 640px) {
    .lp { padding-top: 3rem; }
    .lp__marca img { width: 250px; }
    .lp__sub { font-size: 1.05rem; }
    .btn-whatsapp { width: auto; min-width: 340px; }
}

/* Accesibilidad: respeta la preferencia de menos animaciones */
@media (prefers-reduced-motion: reduce) {
    .btn-whatsapp { transition: none; }
    .carrusel__pista { transition: none; }
}