/* ========================================
   GERSER México — Estilos de plantillas WordPress
   Aviso de privacidad · páginas genéricas · 404 · listados
   Codesmic · 2026
   ======================================== */

/* === LOGO DEL HEADER ===
   Va la version blanca y sin el texto "GERSER" al lado: el logo ya trae
   el nombre y el tagline integrados, ponerlo dos veces era redundante.
   Al quedar solo, necesita mas altura que los 28px del lockup con texto. */
.gerser-brand--solo .gerser-brand__icon {
    height: 48px;
    width: auto;
}

@media (max-width: 860px) {
    .gerser-brand--solo .gerser-brand__icon { height: 40px; }
}

@media (max-width: 480px) {
    .gerser-brand--solo .gerser-brand__icon { height: 34px; }
}

/* === SELECCION DE TEXTO ===
   Astra pintaba la seleccion con su color de acento (un verde que no es de
   GERSER). Se define aqui con el rojo de la marca para que quede fijo,
   independiente de lo que tenga configurado el tema padre. */
::selection {
    background: #c91a2a !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

::-moz-selection {
    background: #c91a2a !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Astra aplica el acento tambien sobre elementos concretos, no solo en el
   selector global, asi que se cubren los contenedores del sitio. */
body ::selection,
body *::selection,
.gerser-nav ::selection,
.gerser-hero ::selection,
.gerser-footer ::selection,
.gerser-form ::selection,
.gerser-page ::selection,
.gerser-legal ::selection {
    background: #c91a2a !important;
    color: #ffffff !important;
}

body ::-moz-selection,
body *::-moz-selection {
    background: #c91a2a !important;
    color: #ffffff !important;
}

/* === ANCLAS DEL ONE-PAGE ===
   El header es fijo (~64px). Sin esto, entrar por URL directa
   (gersermexico.com/#contacto) deja la seccion pegada bajo el header.
   El clic en el menu ya lo resuelve por JS; esto cubre el otro caso. */
#comodato,
#nosotros,
#equipos,
#contacto {
    scroll-margin-top: 80px;
}

/* === FORMULARIO DE CONTACTO ===
   Seccion propia al final del one-page, en dos columnas: el texto a la
   izquierda y el formulario a la derecha. El menu "Contacto" y todos los
   botones de cotizar apuntan aqui (#cotizar).
   Los leads se guardan en wp_gerser_leads y se ven en wp-admin > Contactos. */
.gerser-form {
    background: linear-gradient(160deg, #050d24 0%, #0a1838 100%);
    border-top: 1px solid var(--gerser-line);
    padding: clamp(60px, 9vw, 110px) var(--gerser-gutter);
}

.gerser-form__inner {
    max-width: var(--gerser-container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 90px);
    align-items: start;
}

.gerser-form__lede {
    color: var(--gerser-silver);
    font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
    line-height: 1.65;
    margin: 18px 0 26px;
    max-width: 46ch;
}

.gerser-form__wa {
    display: inline-block;
    color: var(--gerser-white);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--gerser-red);
}

.gerser-form__wa:hover { color: var(--gerser-red-bright); }

.gerser-form__form { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 860px) {
    .gerser-form__inner { grid-template-columns: 1fr; }
}

/* Los campos llevan !important porque Astra (tema padre) trae sus propios
   estilos de formulario con alta especificidad y los pisaba: el texto salia
   oscuro sobre fondo navy, ilegible. */
.gerser-form .gerser-form__input,
.gerser-form .gerser-form__textarea,
.gerser-form input[type="text"],
.gerser-form input[type="email"],
.gerser-form input[type="tel"],
.gerser-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: #0d1c3d !important;
    background-color: #0d1c3d !important;
    background-image: none !important;
    border: 1px solid var(--gerser-line-strong) !important;
    border-radius: 10px !important;
    padding: 15px 18px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    font-family: var(--gerser-font-body) !important;
    font-size: 1rem;
    box-shadow: none !important;
    transition: border-color 0.2s ease;
}

.gerser-form .gerser-form__textarea,
.gerser-form textarea { resize: vertical; min-height: 130px; }

.gerser-form .gerser-form__input::placeholder,
.gerser-form .gerser-form__textarea::placeholder,
.gerser-form input::placeholder,
.gerser-form textarea::placeholder {
    color: var(--gerser-silver-mute) !important;
    -webkit-text-fill-color: var(--gerser-silver-mute) !important;
    opacity: 1;
}

.gerser-form .gerser-form__input:focus,
.gerser-form .gerser-form__textarea:focus,
.gerser-form input:focus,
.gerser-form textarea:focus {
    outline: none !important;
    border-color: var(--gerser-red) !important;
    background: #10224a !important;
    background-color: #10224a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* --- Autocompletado de Chrome ---
   Chrome pinta los campos autollenados de azul claro con texto oscuro y no
   respeta background normal. Se neutraliza con box-shadow inset y una
   transicion larguisima, que es el truco estandar. */
.gerser-form .gerser-form__input:-webkit-autofill,
.gerser-form .gerser-form__input:-webkit-autofill:hover,
.gerser-form .gerser-form__input:-webkit-autofill:focus,
.gerser-form .gerser-form__input:-webkit-autofill:active,
.gerser-form .gerser-form__textarea:-webkit-autofill,
.gerser-form .gerser-form__textarea:-webkit-autofill:hover,
.gerser-form .gerser-form__textarea:-webkit-autofill:focus,
.gerser-form .gerser-form__textarea:-webkit-autofill:active,
.gerser-form input:-webkit-autofill,
.gerser-form textarea:-webkit-autofill,
.gerser-form input:-internal-autofill-selected,
.gerser-form textarea:-internal-autofill-selected {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    caret-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #0d1c3d inset !important;
    box-shadow: 0 0 0 1000px #0d1c3d inset !important;
    background-color: #0d1c3d !important;
    background-image: none !important;
    transition: background-color 9999999s ease-in-out 0s !important;
}

/* Dispara una animacion al autollenar para que el JS lo detecte */
@keyframes gerserAutofillStart { from { background: #0d1c3d; } to { background: #0d1c3d; } }
@keyframes gerserAutofillCancel { from { background: #0d1c3d; } to { background: #0d1c3d; } }

.gerser-form .gerser-form__input:-webkit-autofill,
.gerser-form .gerser-form__textarea:-webkit-autofill {
    animation-name: gerserAutofillStart !important;
    animation-duration: 0.001s;
}

.gerser-form .gerser-form__input:not(:-webkit-autofill),
.gerser-form .gerser-form__textarea:not(:-webkit-autofill) {
    animation-name: gerserAutofillCancel;
}

.gerser-form__button {
    background: var(--gerser-red);
    color: var(--gerser-white);
    border: none;
    border-radius: 10px;
    padding: 16px 28px;
    font-family: var(--gerser-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s ease;
}

.gerser-form__button:hover { background: var(--gerser-red-bright); }
.gerser-form__button:disabled { opacity: 0.6; cursor: default; }

.gerser-form__consent {
    font-size: 0.8125rem;
    color: var(--gerser-silver-mute);
    margin: 2px 0 0;
}

.gerser-form__consent a { color: var(--gerser-silver); }

.gerser-form__error {
    font-size: 0.875rem;
    color: #ff6b78;
    margin: 4px 0 0;
}

.gerser-form__error a { color: #ff6b78; }

.gerser-form__success {
    background: #0d1c3d;
    border: 1px solid var(--gerser-line-strong);
    border-left: 3px solid var(--gerser-red);
    border-radius: 12px;
    padding: 32px 28px;
}

.gerser-form__success h3 {
    font-family: var(--gerser-font-display);
    font-size: 1.5rem;
    margin: 0 0 8px;
    color: var(--gerser-white);
}

.gerser-form__success p { margin: 0; color: var(--gerser-silver); }

/* === AVISO DE PRIVACIDAD ===
   Bloque <style> completo de aviso-privacidad.html del preview. */
.gerser-legal {
    background: linear-gradient(135deg, #050d24 0%, #0a1a3a 100%);
    color: #fff;
    padding: 80px 20px;
    min-height: 100vh;
}
.gerser-legal__container {
    max-width: 900px;
    margin: 0 auto;
}
.gerser-legal__header {
    margin-bottom: 60px;
}
.gerser-legal__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 12px;
    letter-spacing: -1px;
}
.gerser-legal__subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
    font-weight: 400;
}
.gerser-legal__content {
    line-height: 1.8;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}
.gerser-legal__content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 16px;
    color: #fff;
}
.gerser-legal__content h3 {
    font-size: 16px;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 12px;
    color: #fff;
}
.gerser-legal__content p {
    margin-bottom: 16px;
}
.gerser-legal__content ul {
    margin-left: 24px;
    margin-bottom: 16px;
}
.gerser-legal__content li {
    margin-bottom: 8px;
}
.gerser-legal__footer {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}
.gerser-legal__back {
    display: inline-block;
    margin-bottom: 40px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}
.gerser-legal__back:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* === PÁGINA GENÉRICA ===
   Contenedor para /servicios/, /nosotros/, /contacto/ y cualquier página
   sin plantilla propia. El contenido de Elementor se imprime dentro de
   .gerser-page__content y conserva sus propios estilos. */
.gerser-page {
    background: var(--gerser-navy-deep);
    color: var(--gerser-white);
    padding: clamp(100px, 14vh, 160px) 0 clamp(60px, 10vh, 100px);
    min-height: 60vh;
}

.gerser-page__container {
    max-width: var(--gerser-container);
    margin: 0 auto;
    padding: 0 var(--gerser-gutter);
}

.gerser-page__header {
    margin-bottom: clamp(28px, 5vw, 48px);
    padding-bottom: clamp(20px, 3vw, 32px);
    border-bottom: 1px solid var(--gerser-line);
}

.gerser-page__title {
    font-family: var(--gerser-font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--gerser-white);
}

.gerser-page__meta {
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--gerser-silver-mute);
}

.gerser-page__content {
    font-size: clamp(1rem, 1.4vw, 1.0625rem);
    line-height: 1.7;
    color: var(--gerser-silver);
}

.gerser-page__content h2,
.gerser-page__content h3 {
    font-family: var(--gerser-font-display);
    color: var(--gerser-white);
    letter-spacing: -0.01em;
    margin: 2em 0 0.6em;
}

.gerser-page__content h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.gerser-page__content h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

.gerser-page__content a { color: var(--gerser-red-bright); }
.gerser-page__content a:hover { color: var(--gerser-white); }

.gerser-page__content img { border-radius: 10px; margin: 1.5em 0; }

/* Listado de entradas */
.gerser-page__item {
    padding: 28px 0;
    border-bottom: 1px solid var(--gerser-line);
}

.gerser-page__item h2 {
    font-family: var(--gerser-font-display);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    margin: 0 0 10px;
}

.gerser-page__item h2 a {
    color: var(--gerser-white);
    text-decoration: none;
}

.gerser-page__item h2 a:hover { color: var(--gerser-red-bright); }

.gerser-page__excerpt { color: var(--gerser-silver-mute); }

/* === 404 ===
   Cabe en una sola pantalla, sin scroll. */
.gerser-404 {
    background: linear-gradient(135deg, #050d24 0%, #0a1a3a 100%);
    color: var(--gerser-white);
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px var(--gerser-gutter) 40px;
    box-sizing: border-box;
}

.gerser-404__inner {
    max-width: 620px;
    text-align: center;
}

.gerser-404__code {
    font-family: var(--gerser-font-display);
    font-size: clamp(4.5rem, 16vw, 9rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--gerser-red);
    margin-bottom: 0.15em;
}

.gerser-404__title {
    font-family: var(--gerser-font-display);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

.gerser-404__lede {
    font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
    line-height: 1.6;
    color: var(--gerser-silver);
    margin: 0 auto 32px;
    max-width: 46ch;
}

.gerser-404__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 28px;
}

.gerser-404__wa {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--gerser-silver-mute);
    text-decoration: none;
    border-bottom: 1px solid var(--gerser-line-strong);
    padding-bottom: 2px;
}

.gerser-404__wa:hover { color: var(--gerser-white); }

@media (max-width: 600px) {
    .gerser-404 { padding-top: 80px; }
    .gerser-404__ctas { flex-direction: column; align-items: stretch; }
}