/* ==========================================================================
   AJUSTES PROPIOS DE REBATO ABOGADOS (23/10/2026)
   Se carga el último, después de style.css de la plantilla, para poder
   corregir lo suyo sin tocarlo. Lo de la plantilla se deja como vino.
   ========================================================================== */

/* --- Letras alojadas en la propia web -------------------------------------
   Antes se pedían a Google, que recibía la IP de cada visitante (hay
   sentencias por RGPD). Son fuentes "variables": un solo fichero sirve para
   todos los gruesos, por eso el font-weight va como un rango. */
@font-face {
    font-family: 'Frank Ruhl Libre';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../fonts/letras/frank-ruhl-libre-latin.woff2) format('woff2');
}
@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(../fonts/letras/karla-latin.woff2) format('woff2');
}

/* --- Carrusel de la portada ----------------------------------------------
   Solo puede haber un <h1> por página (SEO). La primera diapositiva lo lleva y
   las demás usan un párrafo con el mismo aspecto, copiado de la regla del h1
   de style.css (.hero-wrapper-one .hero-content h1 y el h1 general). */
.hero-wrapper-one .hero-content .titulo-diapositiva {
    font-family: "Frank Ruhl Libre", serif;
    font-weight: 600;
    font-size: 105px;
    line-height: 120px;
    color: #fff;
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    .hero-wrapper-one .hero-content .titulo-diapositiva {
        font-size: 42px;
        line-height: 50px;
    }
}

/* --- Formulario de contacto ---------------------------------------------- */
/* Las casillas y los textos que antes iban con <font> y estilos sueltos */
/* Dos columnas, como estaban en la plantilla original */
.contact-form .casillas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    padding: 20px 0 30px 30px;
}
.contact-form .casilla {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    font-family: "Frank Ruhl Libre", serif;
    color: #5c4c66;
    margin: 0;
}
.contact-form .casilla input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: #5c4c66;
}
.contact-form .casilla-privacidad {
    font-family: "Karla", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #43354c;
    margin-bottom: 20px;
    align-items: flex-start;
}
.contact-form .casilla-privacidad input {
    margin-top: 2px;
}
.contact-form .casilla-privacidad a {
    font-weight: 700;
    color: #5c4c66;
    text-decoration: underline;
}
.contact-form .etiqueta-captcha {
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-family: "Frank Ruhl Libre", serif;
    color: #5c4c66;
    margin-bottom: 10px;
}
.contact-form .imagen-captcha {
    display: block;
    margin-bottom: 10px;
    /* La imagen es diminuta (86x21) y se pinta al doble: que no salga borrosa */
    image-rendering: pixelated;
}
.contact-form .aviso-envio {
    padding: 15px 20px;
    margin-bottom: 30px;
    font-size: 16px;
    border-left: 4px solid;
}
.contact-form .aviso-envio.bien {
    color: #1e6b35;
    background: #eaf6ee;
}
.contact-form .aviso-envio.mal {
    color: #a12a2a;
    background: #fbeeee;
}
.contact-form .aviso-envio ul {
    margin: 8px 0 0 20px;
    list-style: disc;
}
.contact-form .info-proteccion-datos {
    font-size: 13px;
    line-height: 1.5;
    color: #6b6475;
    margin-top: 25px;
}
.contact-form .info-proteccion-datos a {
    text-decoration: underline;
}

/* Campo trampa para robots: fuera de la vista de las personas. No usar
   display:none, que algunos robots lo detectan y no lo rellenan. */
.contact-form .campo-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Móvil: aprovechar todo el ancho (mandamiento "Responsive") -----------
   En el móvil la caja del formulario dejaba 30 px de relleno además de los
   15 px del contenedor: 45 px por lado. Aquí se recorta a 12 px. */
@media (max-width: 767px) {
    .contact-wrapper-one {
        padding: 30px 12px 20px;
    }
    .contact-wrapper-one .contact-form .form_control {
        padding: 0 15px;
        font-size: 18px;
        margin-bottom: 15px;
    }
    .contact-form .casillas {
        padding: 5px 0 15px;
    }
    /* El margen de abajo de la plantilla (-140 px) solo tiene sentido en ordenador */
    .contact-wrapper-one {
        margin-bottom: 0;
    }
    .contact-form .main-btn {
        width: 100%;
        text-align: center;
    }
}

/* --- Asterisco rojo de los campos obligatorios (26/10/2026) ---------------
   Los campos no tienen etiqueta encima (el nombre va dentro, en gris), así
   que el asterisco se pone en la esquina de arriba a la derecha del campo.
   aria-hidden en el HTML: a los lectores de pantalla ya se lo dice "required". */
.contact-form .obligatorio {
    color: #c62828;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    font-family: "Karla", sans-serif;
}
.contact-form .form_group > .obligatorio {
    position: absolute;
    top: 8px;
    right: 10px;
    pointer-events: none;
}
.contact-form .nota-obligatorios {
    font-size: 13px;
    color: #6b6475;
    margin-bottom: 15px;
}

/* --- Texto de ayuda dentro de los campos, en gris (26/10/2026) ------------
   La plantilla lo pintaba oscuro y en negrita (#43354c), igual que lo
   escrito, y parecía que el campo ya estaba relleno. Ahora es gris claro y
   fino; lo que escribe la persona sigue saliendo oscuro. Mismo selector que
   style.css, y como este fichero se carga después, manda este. */
.contact-wrapper-one .contact-form .form_control::placeholder {
    color: #a39cab;
    font-weight: 400;
    opacity: 1;
}
.contact-wrapper-one .contact-form .form_control::-webkit-input-placeholder {
    color: #a39cab;
    font-weight: 400;
}
.contact-wrapper-one .contact-form .form_control::-moz-placeholder {
    color: #a39cab;
    font-weight: 400;
    opacity: 1;
}