/* =============================================================================
   landing.css — Estilos de la landing pública (/)
   =============================================================================

   Los dos colores de marca NO están acá: los define index.php en un <style>
   con lo que cargaste en el panel ("Landing"):
     --primario / --primario-texto      fondo del hero, títulos, checks
     --secundario / --secundario-texto  botones de acción
   (--*-texto es blanco u oscuro, elegido solo para que siempre se lea.)
   Acá solo hay valores por defecto por si ese <style> faltara.

   Idea de diseño: limpia y directa, para dueños de inmobiliarias que la van a
   ver mayormente desde el celular. Un solo color fuerte (el primario) en el
   bloque principal; el resto en blanco y gris muy claro, para que las
   capturas de pantalla y los precios sean los protagonistas.

   Organización: 1) variables  2) base  3) botones  4) encabezado  5) hero
                 6) secciones y tarjetas  7) planes  8) contacto y pie
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Variables
   ----------------------------------------------------------------------------- */
:root {
    --primario: #1F3A5F;
    --primario-texto: #FFFFFF;
    --secundario: #E8A33D;
    --secundario-texto: #1C2127;

    --tinta: #1C2127;
    --tinta-suave: #5B6570;
    --fondo: #FFFFFF;
    --fondo-tenue: #F4F5F3;
    --linea: #E2E5E0;

    /* Tinte muy suave del primario, para el recuadro de las capturas que
       todavía no se cargaron. color-mix() lo calcula a partir del color de
       marca; los navegadores viejos que no lo entienden usan el gris. */
    --primario-tinte: #EEF1F5;
    --primario-tinte: color-mix(in srgb, var(--primario) 10%, white);

    --letra: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --radio: 10px;
    --ancho: 1120px;
}


/* -----------------------------------------------------------------------------
   2. Base
   ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Quien pidió "reducir movimiento" en su sistema no tiene scroll animado. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--letra);
    font-size: 17px;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.02em; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.contenido { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }

/* Al tocar un link del menú, la sección no queda tapada por el encabezado fijo. */
[id] { scroll-margin-top: 5rem; }


/* -----------------------------------------------------------------------------
   3. Botones
   ----------------------------------------------------------------------------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3rem; padding: .75rem 1.5rem;
    border-radius: 999px; border: 2px solid transparent;
    font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
    text-decoration: none; text-align: center; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.boton:focus-visible { outline: 3px solid var(--secundario); outline-offset: 3px; }
.boton:active { transform: translateY(1px); }

/* Acción principal: color secundario (el que más resalta sobre el primario). */
.boton--accion { background: var(--secundario); color: var(--secundario-texto); }
@media (hover: hover) {
    .boton--accion:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .18); transform: translateY(-1px); }
}

/* Botón con borde, para usar sobre el fondo primario del hero. */
.boton--contorno { border-color: currentColor; color: var(--primario-texto); background: transparent; }
@media (hover: hover) {
    .boton--contorno:hover { background: rgba(255, 255, 255, .1); }
}

/* Botón con borde sobre fondo claro ("Consultar precio"). */
.boton--contorno-oscuro { border-color: var(--primario); color: var(--primario); background: transparent; }
@media (hover: hover) {
    .boton--contorno-oscuro:hover { background: var(--primario-tinte); }
}
.boton--chico { min-height: 2.5rem; padding: .5rem 1.1rem; font-size: .95rem; }

.icono-wa { width: 1.3rem; height: 1.3rem; flex: none; }


/* -----------------------------------------------------------------------------
   4. Encabezado (fijo arriba al hacer scroll)
   ----------------------------------------------------------------------------- */
.encabezado {
    position: sticky; top: 0; z-index: 10;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--linea);
}
.encabezado__fila {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 4rem;
}

/* Isotipo: logo, o el texto de marca con estilo mientras no haya logo. */
.isotipo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; min-width: 0; }
.isotipo img { max-height: 2.5rem; width: auto; }
/* (Versión 1.5.0) El nombre en texto va en su propio contenedor, para poder
   mostrarse solo o al lado del logo. Conserva exactamente el estilo de antes. */
.isotipo__texto { display: inline-flex; align-items: baseline; min-width: 0; }
/* Logo y nombre juntos: el logo un poco más bajo, para que no le gane al texto. */
.isotipo--doble img { max-height: 2.25rem; }
.isotipo__nombre { font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; color: var(--primario); }
.isotipo__resto { font-weight: 500; font-size: .95rem; color: var(--tinta-suave); white-space: pre; }

.menu { display: flex; gap: .25rem; }
.menu a {
    text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--tinta-suave);
    padding: .5rem .75rem; border-radius: 999px;
}
.menu a:hover { color: var(--tinta); background: var(--fondo-tenue); }
.menu a:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }


/* -----------------------------------------------------------------------------
   5. Hero (bloque principal)
   ----------------------------------------------------------------------------- */
.hero {
    background: var(--primario);
    color: var(--primario-texto);
    padding: clamp(4rem, 10vw, 7.5rem) 0;
}
/* El ancho se limita en el título y no en el contenedor, así el texto queda
   alineado a la izquierda con el logo y con el resto de las secciones. */
.hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); font-weight: 800; text-wrap: balance; max-width: 48rem; }
.hero__bajada {
    margin: 1.25rem 0 0; font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    max-width: 40rem; opacity: .88; text-wrap: pretty;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }


/* -----------------------------------------------------------------------------
   6. Secciones y tarjetas de funcionalidades
   ----------------------------------------------------------------------------- */
.seccion { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.seccion--tenue { background: var(--fondo-tenue); }
.seccion__titulo {
    font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--primario);
    margin-bottom: 2.25rem;
}

.tarjetas {
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.tarjeta h3 { font-size: 1.15rem; font-weight: 700; margin: 1rem 0 .4rem; }
.tarjeta p { margin: 0; color: var(--tinta-suave); font-size: 1rem; }

/* La imagen siempre ocupa el mismo lugar (proporción 16:10), haya captura o no:
   así las tarjetas quedan alineadas y nada "salta" mientras cargan. */
.tarjeta__imagen {
    aspect-ratio: 16 / 10; border-radius: var(--radio); overflow: hidden;
    border: 1px solid var(--linea); background: var(--primario-tinte);
}
.tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* Placeholder: una "ventana" esquemática con el nombre de la función. */
.marcador { height: 100%; display: flex; flex-direction: column; }
.marcador__barra {
    display: flex; gap: .35rem; padding: .6rem .75rem;
    background: rgba(255, 255, 255, .6); border-bottom: 1px solid var(--linea);
}
.marcador__barra i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--linea); }
.marcador__texto {
    flex: 1; display: grid; place-items: center; padding: 1rem; text-align: center;
    font-weight: 700; color: var(--primario); opacity: .75;
}


/* -----------------------------------------------------------------------------
   7. Planes
   ----------------------------------------------------------------------------- */
.planes {
    display: grid; gap: 1.25rem; align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.plan {
    display: flex; flex-direction: column;
    background: var(--fondo); border: 1px solid var(--linea); border-radius: calc(var(--radio) * 1.4);
    padding: 1.75rem 1.5rem;
}
.plan__nombre { font-size: 1.3rem; font-weight: 800; }

.plan__precio {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem;
    min-height: 3.25rem; margin: .75rem 0 1.25rem;
}
.plan__monto { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan__periodo { color: var(--tinta-suave); font-weight: 600; }
.plan__consultar { font-size: 1.25rem; font-weight: 700; color: var(--tinta-suave); }

.plan__lista { list-style: none; margin: 0 0 1.5rem; padding: 1.25rem 0 0; border-top: 1px solid var(--linea); }
.plan__lista li { display: flex; gap: .6rem; align-items: flex-start; font-size: .98rem; padding: .3rem 0; }
.plan__check { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .25rem; color: var(--primario); }

/* El botón queda siempre al pie de la tarjeta, aunque los planes tengan
   listas de distinto largo: así quedan alineados entre sí. */
.plan__boton { margin-top: auto; width: 100%; }


/* Debajo de las columnas (versión 1.2.0) --------------------------------------- */

/* Franja "qué incluyen todos los planes": fondo del color secundario, para
   que se lea como una aclaración que vale para TODOS, no como parte de uno. */
.planes-incluyen {
    margin: 1.5rem 0 0; padding: 1rem 1.5rem;
    background: var(--secundario); color: var(--secundario-texto);
    border-radius: var(--radio); text-align: center; font-weight: 600;
}

/* Contacto para desarrollos a medida: bloque aparte, con borde punteado
   (se lee como "otra opción", distinta de los planes), texto y botón en una
   línea en pantallas anchas, apilados en el celular. */
.desarrollo {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
    margin-top: 2.5rem; padding: 1.75rem 1.75rem;
    background: var(--fondo); border: 2px dashed var(--linea); border-radius: calc(var(--radio) * 1.4);
}
.desarrollo__texto { flex: 1 1 22rem; }
.desarrollo h3 { font-size: 1.25rem; font-weight: 800; color: var(--primario); }
.desarrollo p { margin: .4rem 0 0; color: var(--tinta-suave); }
.desarrollo__boton { flex: none; }
@media (max-width: 640px) {
    .desarrollo { padding: 1.5rem 1.25rem; }
    .desarrollo__boton { width: 100%; }
}


/* Bloque de migración de datos (versión 1.4.0): mismo estilo que el de
   desarrollo a medida, más pegado a él porque van juntos. */
.desarrollo--migracion { margin-top: 1rem; }


/* -----------------------------------------------------------------------------
   Versión 1.4.0: carrusel del hero, preguntas frecuentes y WhatsApp flotante
   ----------------------------------------------------------------------------- */

/* Carrusel: las fotos van apiladas detrás del contenido del hero, ocupando
   todo el bloque (object-fit: cover recorta lo que sobre sin deformar).
   Solo la "activa" se ve; el cambio es un fundido de 1,2 segundos. */
.hero--fotos { position: relative; overflow: hidden; isolation: isolate; color: #FFFFFF; }
.hero__fondo { position: absolute; inset: 0; z-index: -2; }
.hero__fondo img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.2s ease;
}
.hero__fondo img.activa { opacity: 1; }
/* Capa oscura entre la foto y el texto: el texto se lee bien sea cual sea la
   foto. Un degradé un poco más oscuro a la izquierda, donde está el texto. */
.hero--fotos::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(10, 14, 20, .72) 0%, rgba(10, 14, 20, .5) 60%, rgba(10, 14, 20, .38) 100%);
}
/* Sobre foto, el texto y el botón con borde van siempre en blanco (sobre el
   color primario usan el color de texto calculado para ese fondo). */
.hero--fotos .boton--contorno { color: #FFFFFF; }
.hero--fotos .hero__bajada { opacity: .92; }
@media (prefers-reduced-motion: reduce) {
    .hero__fondo img { transition: none; }
}

/* Preguntas frecuentes: acordeón con <details>. */
.preguntas__contenido { max-width: 52rem; }
.preguntas { border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem .25rem; cursor: pointer; list-style: none;
    font-weight: 700; font-size: 1.05rem;
}
/* Se oculta el triángulo propio del navegador y se dibuja un "+" que gira a
   "×" al abrir. */
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
    /* El segundo "content" (con "/ \"\"") marca el + como decorativo: los
       lectores de pantalla no lo leen. Los navegadores viejos usan el primero. */
    content: "+"; content: "+" / "";
    flex: none; display: grid; place-items: center;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--fondo-tenue); color: var(--primario); font-size: 1.25rem; font-weight: 600;
    transition: transform .2s ease;
}
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta summary:hover { color: var(--primario); }
.pregunta summary:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 4px; }
.pregunta__respuesta { padding: 0 .25rem 1.25rem; color: var(--tinta-suave); }
.pregunta__respuesta p { margin: 0; }

/* WhatsApp flotante: círculo fijo abajo a la derecha, con el verde de
   WhatsApp (el color que todos reconocen) y sombra para despegarlo del
   contenido. 3,5 rem = 56 px: cómodo para tocar con el pulgar. */
.wa-flotante {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 20;
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: #25D366; color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    transition: transform .15s ease, box-shadow .15s ease;
}
.wa-flotante .icono-wa { width: 1.9rem; height: 1.9rem; }
@media (hover: hover) {
    .wa-flotante:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(0, 0, 0, .28); }
}
.wa-flotante:focus-visible { outline: 3px solid var(--primario); outline-offset: 3px; }


/* -----------------------------------------------------------------------------
   8. Contacto y pie
   ----------------------------------------------------------------------------- */
.contacto__contenido { text-align: center; max-width: 40rem; }
.contacto .seccion__titulo { margin-bottom: .75rem; }
.contacto p { color: var(--tinta-suave); margin: 0 0 2rem; font-size: 1.1rem; }

.pie { border-top: 1px solid var(--linea); padding: 1.75rem 0; font-size: .9rem; color: var(--tinta-suave); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.pie p { margin: 0; }

/* Íconos de redes sociales (versión 1.3.0). Botones redondos de 40 px: fáciles
   de tocar con el dedo. Toman el color del texto; al pasar el mouse, el
   primario. */
.redes { display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.redes a {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
    border-radius: 50%; color: var(--tinta-suave);
    transition: color .15s ease, background-color .15s ease;
}
.redes a:hover { color: var(--primario); background: var(--fondo-tenue); }
.redes a:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.redes svg { width: 1.2rem; height: 1.2rem; }


/* -----------------------------------------------------------------------------
   Celular
   ----------------------------------------------------------------------------- */
@media (max-width: 640px) {
    body { font-size: 16px; }
    /* En pantallas angostas el resto de la marca ("by SH Diseño") pasa abajo
       del nombre, más chico, para que entre al lado del menú sin perderse. */
    .isotipo__texto { flex-direction: column; align-items: flex-start; line-height: 1.1; }
    /* (Versión 1.5.0) Logo y nombre juntos en el celular: no entran al lado
       del menú completo. El logo se achica, y el link "Funcionalidades"
       (el más largo) se oculta del menú: la sección se sigue viendo al
       bajar, y Planes y Contacto quedan a mano. */
    .isotipo--doble { gap: .45rem; }
    .isotipo--doble img { max-height: 1.9rem; max-width: 4.5rem; object-fit: contain; }
    .encabezado--doble .menu a[href="#funcionalidades"] { display: none; }
    .isotipo__nombre { font-size: 1.3rem; }
    .isotipo__resto { font-size: .72rem; white-space: normal; }
    .menu a { padding: .45rem .55rem; font-size: .88rem; }
    .hero__acciones .boton { flex: 1 1 auto; }
}
@media (max-width: 380px) {
    .menu a[href="#funcionalidades"] { display: none; }
}

/* (Versión 1.4.0) Espacio extra al pie para que el botón flotante de WhatsApp
   no tape la última línea (la firma y los íconos de redes). Va al final del
   archivo para que pise el padding general del pie. */
.pie { padding-bottom: 5.5rem; }

/* -----------------------------------------------------------------------------
   Versión 1.6.0: franja de promoción
   -----------------------------------------------------------------------------
   Solo existe en el HTML si hay texto cargado en el panel. Va dentro de
   .cabecera-fija junto con el encabezado: el contenedor entero queda pegado
   arriba al hacer scroll, con la franja por encima del encabezado. */
.cabecera-fija { position: sticky; top: 0; z-index: 15; }

/* Color: el secundario de la marca (el de los botones de acción), que es el
   que más resalta sobre el blanco del encabezado y combina con el resto. El
   color del texto se calcula solo para que siempre se lea. */
.promo {
    position: relative;
    background: var(--secundario); color: var(--secundario-texto);
    text-align: center; font-weight: 700; font-size: .95rem; line-height: 1.35;
}
/* El texto ocupa toda la franja: cualquier punto que se toque lleva a los
   planes. El padding lateral deja lugar para la × sin que el texto la pise. */
.promo__texto {
    display: block; margin: 0; padding: .55rem 3rem;
    color: inherit; text-decoration: none;
}
a.promo__texto:hover { text-decoration: underline; text-underline-offset: 3px; }
a.promo__texto:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

.promo__cerrar {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    width: 2rem; height: 2rem; border: 0; border-radius: 50%;
    background: transparent; color: inherit; cursor: pointer;
    font: inherit; font-size: 1.35rem; line-height: 1;
}
.promo__cerrar:hover { background: rgba(0, 0, 0, .1); }
.promo__cerrar:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* Con la franja visible, la cabecera fija es más alta: al bajar a una sección
   (por ejemplo, tocando la franja), se deja más margen para que el título no
   quede tapado. :has() mira si la franja existe; al cerrarla con la ×, se
   vuelve solo al margen normal. */
body:has(.promo) [id] { scroll-margin-top: 7.5rem; }

@media (max-width: 640px) {
    .promo { font-size: .88rem; }
    .promo__texto { padding: .5rem 2.75rem; }
}