/* ==========================================================================
   LiveGot! — Fase 0
   Hoja de estilos NUEVA. No reemplaza a index.css: se carga DESPUÉS de ella.
   No modificar index.css: todo lo de la Fase 0 vive acá.

   Contenido:
   1. Ícono del menú hamburguesa (hoy invisible en móvil)
   2. Proporción de las imágenes de obra (evita el salto de maquetado)
   3. Formulario de contacto
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ÍCONO DEL MENÚ HAMBURGUESA

   Problema que resuelve: el HTML tiene <div id="nav-icon0"> con 6 <span>,
   pero index.css no define NINGUNA regla para #nav-icon0. Los span quedan
   con 0x0 px y sin color, así que en pantallas de menos de 992px el botón
   del menú existe y es clickeable, pero no se ve nada.

   Se usan los 3 primeros span como barras. Los otros 3 se ocultan.
   El JS existente ya agrega y quita la clase .open sobre #nav-icon0,
   así que la animación a "X" funciona sin tocar script.js.
   -------------------------------------------------------------------------- */

/* Área táctil del botón: mínimo 44x44 px para que se pueda tocar cómodo */
.navbar .navbar-toggler {
    padding: 13px 10px;
    border: none;
    outline: none;
    cursor: pointer;
}

.navbar .navbar-toggler:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

#nav-icon0 {
    position: relative;
    display: block;
    width: 24px;
    height: 18px;
    margin: 0;
    transform: rotate(0deg);
    transition: 0.3s ease-in-out;
}

#nav-icon0 span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: #ffffff;
    border-radius: 3px;
    opacity: 1;
    transform: rotate(0deg);
    transition: transform 0.25s ease-in-out, top 0.25s ease-in-out, opacity 0.2s ease-in-out;
}

#nav-icon0 span:nth-child(1) { top: 0; }
#nav-icon0 span:nth-child(2) { top: 7px; }
#nav-icon0 span:nth-child(3) { top: 14px; }

/* El markup trae 6 span; solo se usan 3 */
#nav-icon0 span:nth-child(n+4) { display: none; }

/* Estado abierto: las barras se cruzan formando una X.

   Se contemplan dos señales del estado abierto, y alcanza con cualquiera:

   a) aria-expanded="true" en el botón. Lo maneja Bootstrap y es la señal
      confiable: cambia siempre, sin importar en qué parte del botón se tocó.
   b) la clase .open sobre #nav-icon0. La pone script.js, pero solo cuando el
      clic cae justo sobre el ícono; si se toca el margen del botón, no la
      pone. Se deja igual para no depender de una sola señal. */

.navbar-toggler[aria-expanded="true"] #nav-icon0 span:nth-child(1),
#nav-icon0.open span:nth-child(1) {
    top: 7px;
    transform: rotate(135deg);
}

.navbar-toggler[aria-expanded="true"] #nav-icon0 span:nth-child(2),
#nav-icon0.open span:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.navbar-toggler[aria-expanded="true"] #nav-icon0 span:nth-child(3),
#nav-icon0.open span:nth-child(3) {
    top: 7px;
    transform: rotate(-135deg);
}


/* Fondo del menú desplegado en celular.

   Por qué hace falta: el menú desplegable nunca tuvo fondo propio. Hasta
   ahora no se notaba porque, con el ícono invisible, prácticamente nadie
   lograba abrirlo. Al quedar el ícono visible, los tres enlaces caen encima
   de la foto del carrusel y no se leen.

   Solo se aplica por debajo de 992px, que es donde Bootstrap colapsa el
   menú. En escritorio no cambia nada. */

@media (max-width: 991.98px) {
    .navbar .navbar-collapse {
        background: rgba(25, 25, 25, 0.97);
        border-radius: 0 0 4px 4px;
        padding: 0.25rem 1rem 0.75rem 1rem;
        margin-top: 0.5rem;
    }

    .navbar .navbar-collapse .nav-item {
        list-style: none;
    }

    .navbar .navbar-collapse .nav-link {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
}


/* --------------------------------------------------------------------------
   2. PROPORCIÓN DE LAS IMÁGENES DE OBRA

   Las 12 imágenes de obra son todas 2:3 (verificado: 800x1200 y 400x600).
   Reservar la proporción evita que el texto salte mientras cargan, que es
   uno de los factores que Google mide como Cumulative Layout Shift.
   -------------------------------------------------------------------------- */

.work-card img {
    aspect-ratio: 2 / 3;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}


/* --------------------------------------------------------------------------
   3. BOTONERA DE WHATSAPP POR LÍNEA DE NEGOCIO

   Es el camino principal de contacto del sitio. Cuatro botones, uno por
   cada línea de negocio de LiveGot.

   Estética: se mantiene el blanco y negro del sitio. El único color es el
   verde de WhatsApp en el ícono, que es la señal que la gente reconoce.
   -------------------------------------------------------------------------- */

.lg-wa-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 620px;
    margin: 0 auto 2.5rem auto;
    padding: 0 1rem;
}

.lg-wa-btn {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    background: #ffffff;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    text-align: left;
    text-decoration: none;
    color: #191919;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.1s ease-in-out;
}

.lg-wa-btn:hover,
.lg-wa-btn:focus-visible {
    border-color: #191919;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
    text-decoration: none;
    color: #191919;
}

.lg-wa-btn:active {
    transform: translateY(1px);
}

.lg-wa-btn i {
    flex: 0 0 auto;
    font-size: 1.7rem;
    line-height: 1;
    color: #25d366;   /* verde de WhatsApp */
}

.lg-wa-txt {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.lg-wa-txt strong {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

.lg-wa-txt small {
    font-size: 0.82rem;
    line-height: 1.3;
    color: #6a6a6a;
}

@media (min-width: 768px) {
    .lg-wa-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 860px;
    }
}


/* --------------------------------------------------------------------------
   4. FORMULARIO DE CONTACTO — camino secundario
   -------------------------------------------------------------------------- */

.lg-form-titulo {
    display: block;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.lg-form-wrapper {
    max-width: 620px;
    margin: 0 auto 3rem auto;
    padding: 0 1rem;
    text-align: left;
}

.lg-form-intro {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

.lg-form .lg-field {
    margin-bottom: 1.1rem;
}

.lg-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.lg-form .lg-required {
    color: #c0392b;
    margin-left: 2px;
}

.lg-form input[type="text"],
.lg-form input[type="email"],
.lg-form input[type="tel"],
.lg-form select,
.lg-form textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    font-family: inherit;
    font-size: 1rem;
    color: #191919;
    background: #ffffff;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    /* 16px evita que iOS haga zoom automático al enfocar el campo */
    -webkit-appearance: none;
    appearance: none;
}

.lg-form select {
    /* flecha propia, porque appearance:none la saca */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    padding-right: 2.2rem;
}

.lg-form textarea {
    min-height: 110px;
    resize: vertical;
}

.lg-form input:focus,
.lg-form select:focus,
.lg-form textarea:focus {
    border-color: #191919;
    box-shadow: 0 0 0 3px rgba(25, 25, 25, 0.12);
    outline: none;
}

.lg-form input:invalid:not(:placeholder-shown),
.lg-form textarea:invalid:not(:placeholder-shown) {
    border-color: #c0392b;
}

/* Campo trampa anti-spam: invisible para personas, visible para robots.
   No se usa display:none porque algunos robots lo detectan. */
.lg-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.lg-form .lg-submit {
    display: inline-block;
    width: 100%;
    padding: 0.85rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: #191919;
    border: 1px solid #191919;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.lg-form .lg-submit:hover {
    background: #333333;
}

.lg-form .lg-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.lg-form-legal {
    margin-top: 0.9rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #666666;
    text-align: center;
}

/* Mensajes de respuesta después de enviar */
.lg-form-msg {
    display: none;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.45;
}

.lg-form-msg.is-visible {
    display: block;
}

.lg-form-msg.is-ok {
    background: #e8f5e9;
    border: 1px solid #4caf50;
    color: #1b5e20;
}

.lg-form-msg.is-error {
    background: #fdecea;
    border: 1px solid #c0392b;
    color: #8e2119;
}

@media (min-width: 576px) {
    .lg-form .lg-submit {
        width: auto;
        min-width: 220px;
    }
    .lg-form-wrapper {
        text-align: left;
    }
    .lg-form .lg-submit-row {
        text-align: center;
    }
}