@font-face {
  font-family: "AFGETA";
  src: url("/fonts/afgeta.woff2") format("woff2"),
       url("/fonts/afgeta.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 1️⃣ Cargar la fuente del logotipo */
@font-face {
  font-family: 'IMPARES-Regular';
  src: url('https://impares.blog/wp-content/uploads/2026/02/IMPARES-Regular-SVG.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Coreecciones del diseño de la plantilla */

/* evitar interferencias del menu superior con formulario y otros elementos */
.header{
	z-index: 10000;
}

/*cambiar la imagen del traductor*/
.trp-language-switcher-inner[
content: url("https://i0.wp.com/impares.blog/wp-content/uploads/2026/02/lectura-facil.jpg?resize=512%2C341&ssl=1");
]


.h1 naranja {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 140px;
  font-weight: 600;
  color: #f26b57;           /* coral/anaranjado */
  opacity: 0.65;            /* efecto translúcido */
  letter-spacing: 2px;
  white-space: nowrap;
  z-index: 2;
 }

.h1inicio{
	font-family: impares, sans-serif;
}

/* Bloque de texto naranja sobre azul */
.legal-section {
  display: flex;
  flex-direction: column;
  justify-content: center;

  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(15, 43, 58, 0.5) 30%
  );

  padding: 3rem 4rem;
  width: 100%;
}

/* Título */
.legal-title {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.legal-title h2 {
  font-size: clamp(2rem, 12vw, 10rem);
  color: #f06d5e;
  font-weight: normal;
}

/* Texto */
.legal-text {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.legal-text p {
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1.6;
  max-width: 40rem;
}

/*Texto El Equipo*/
.legal-section {
  display: flex;
  flex-direction: column;
  justify-content: center;

  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(15, 43, 58, 0.7) 30%
  );

  padding: 1rem 1rem;
  width: 100%;
}

/* Título */
.equipo-section {
  display: flex;
  flex-direction: column;
  justify-content: center;

  background: linear-gradient(
    to bottom,
    transparent 40%,             /* menos color arriba */
    rgba(15, 43, 58, 0.6) 40%,
    rgba(15, 43, 58, 0.6) 80%    /* menos espacio abajo */
  );

  padding: 3rem 1rem 2rem 1rem; /* padding-bottom reducido */
  width: 100%;
}

/* Título */
.equipo-title {
  width: 100%;
  display: flex;
  justify-content: center;
}

.equipo-title h2 {
font-size: clamp(2rem, 12vw, 10rem);
  color: #172a39;
  font-weight: normal;
	justify-content: center;
	margin-bottom: 0;
}

/* Texto */
.equipo-text {
  padding-top: -5;
	width: 100%;
  display: flex;
  justify-content: center;
}

.equipo-text p {
  color: #ffffff;
  font-size: 1.8rem;
	text-align: center;
  line-height: 1.4;
  max-width: 60rem;
	margin-top: 0;
}

/* Fondo con gradiente exacto */
.historia-section {
    background: linear-gradient(
        to bottom,
        transparent 35%,
        rgba(232, 103, 84, 0.5) 35%,
        rgba(232, 103, 84, 0.5) 65%,
        transparent 65%
    );
    padding: 2rem 0; /* opcional, para separación vertical */
}

/* H2 padre: mantener las palabras en líneas separadas y máximo ancho */
.titulo-historia {
    display: flex;
    flex-direction: column;   /* cada palabra en su línea */
    max-width: 1200px;        /* limitar ancho */
    margin: 0 auto;           /* centrar horizontalmente */
    line-height: 1;
}

/* IMPARES: alineado a la derecha */
#impares-title {
    align-self: flex-end;     /* mover a la derecha */
    font-size:clamp(3rem, 12vw, 9rem);
    color: #172a39;
    font-weight: normal;
    ;
}

/* HISTORIA: alineado a la izquierda */
#historia-title {
    align-self: flex-start;   /* mover a la izquierda */
    font-size: clamp(3rem, 12vw, 9rem);
    color: #172a39;
    font-weight: normal;
    margin-bottom: 0;
}

/* Responsive: centrar en móviles */
@media (max-width: 768px) {
    .titulo-historia {
        align-items: center;
    }
    #impares-title,
    #historia-title {
        align-self: center;
        text-align: center;
        margin-bottom: 0.5rem;
    }
}
/*Resursos y Herramientas*/
.recursos-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
	margin-bottom: 0.8rem;
	margin-top: 0.8rem;

  background: linear-gradient(
  to bottom,
  transparent 35%,
  rgba(232, 103, 84, 0.5) 25%,
  rgba(232, 103, 84, 0.5) 75%,
  transparent 65%
);

  padding: 3rem 4rem;
  width: 100%;
}

.equipo-title {
  width: 100%;
  display: flex;
  justify-content: center;
}

.recursos-section h2 {
font-size: clamp(2rem, 12vw, 10rem);
  color: #172a39;
  font-weight: normal;
	justify-content: center;
	margin-bottom: 0;
	text-align: center;
	line-height: 1;
}


/*Lectura fácil*/
.trp-language-switcher-inner img{ height: 2.6rem !important;
  width: auto !important;
}

.trp-language-switcher-inner span { font-size: 1.2rem;}

.trp-language-switcher.trp-floating-switcher.trp-ls-inline.trp-switcher-position-bottom.trp-opposite-language {
  all: unset;
	background-color: #172a39;
  border: 1px solid #fff;
  border-radius: 3px;
}

.trp-language-switcher.trp-floating-switcher.trp-ls-inline.trp-switcher-position-bottom.trp-opposite-language {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    position: fixed !important;
    right: 0px !important;
    bottom: 0px !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*Logotipo*/
.logotipo{
	margin-top: 11rem;
}

@media (max-width: 500px) {
	.logotipo{
		margin-top: 2rem;
	}
}
/* ============================
   Botones dentro del contenedor
   ============================ */
.trp-language-switcher.trp-floating-switcher a,
.trp-language-switcher.trp-floating-switcher .lectura-facil,
.btn-whatsapp {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 200px !important;
    min-width: 150px !important;
    max-width: 320px !important;
    height: 60px !important;
    border-radius: 3px !important;
    padding: 10px 14px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}
	#whatsappLink{
		height: 80px !important;
		
	}
	
    /* Accesibilidad adicional */
    min-height: 44px !important; /* objetivo táctil mínimo WCAG */
    cursor: pointer !important;
    outline: none !important; /* reset */
}

/* Contenedor flexible */
.trp-floating-switcher {
    flex-direction: row-reverse;
}

/* Botón Lectura Fácil */
.trp-language-switcher.trp-floating-switcher .lectura-facil {
    background: #005a9c !important;
    color: #fff !important;
}

/* Botón WhatsApp */
.btn-whatsapp {
    background: #128C4A !important; /* verde accesible */
    color: #fff !important;
    border-radius: 6px !important;
    padding: 1rem !important;
    font-size: 1.3rem !important;
    font-weight: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Indicador de foco visible */
.btn-whatsapp:focus {
    outline: 3px solid #fff !important;
    outline-offset: 3px !important;
}

/* Icono SVG WhatsApp */
.btn-whatsapp .icono-whatsapp svg {
    width: 2rem !important;
    height: 2rem !important;
    fill: white !important;
}

/* Texto interno botón WhatsApp */
.btn-whatsapp .texto-whatsapp {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
}

.btn-whatsapp .titulo {
    font-weight: bold !important;
    font-size: 1.3rem !important;
}

.btn-whatsapp .telefono,
.btn-whatsapp .ayuda {
    font-size: 1.2rem !important;
	font-weight: bold !important;
}

/* Ajustes móviles */
@media (max-width: 500px) {
    .trp-language-switcher.trp-floating-switcher {
        justify-content: center !important;
    }
}

/* Formulario de contacto */
/* =============================
   Campos del formulario
============================= */
input, textarea {
    width: 100% !important;
    background-color: #fff !important; /* fondo blanco */
    color: #111 !important;           /* texto oscuro */
    padding: 0.5rem !important;
    margin-top: 0.25rem !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

input:focus, textarea:focus {
    outline: 3px solid #0073aa !important; /* foco visible y accesible */
    background-color: #fff !important;
}

input::placeholder, textarea::placeholder {
    color: #555 !important; /* placeholder legible */
}

/* =============================
   Labels y mensajes de ayuda
============================= */
label {
    color: #111 !important; /* label oscuro para máximo contraste */
    font-weight: 600;
    display: block;
    margin-top: 0.5rem;
}

.form-hint {
    display: block;
    font-size: 0.9em;
    color: #222 !important; /* mensaje de ayuda alto contraste */
    margin-bottom: 0.5rem;
}

/* =============================
   Mensajes de envío (resumen)
============================= */
.contact-form-submission.contact-form-ajax-submission {
    display: block;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    box-sizing: border-box;
    background-color: #fff !important; /* fondo blanco */
    color: #111 !important;            /* texto oscuro */
    border: 1px solid #ccc !important; /* borde suave */
    role: status;
    aria-live: polite;
}


/* ============================
 titulos de los campos
============================= */


.contact-form-submission .field-name {
  color: #e86754 !important;
  font-size: 1,3rem !important;
  font-weight: 600 !important;
  margin-bottom: 8px;
	opacity: 100 !important;
}

/* =============================
   Enlace "Volver" estilo botón
============================= */
.go-back-message a {
    display: inline-block;
    background-color: #0073aa;  /* mismo estilo botón enviar */
    color: #fff !important;     /* texto blanco */
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s;
}

a.contact-form-back-link:hover,
a.contact-form-back-link:focus {
    background-color: #005177; /* hover/focus oscuro */
    outline: 3px solid #333;   /* foco visible teclado */
}

/* =============================
   Botón de enviar (para consistencia)
============================= */
button[type="submit"] {
    cursor: pointer;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    margin-top: 0.5rem;
    font-weight: 600;
}

button[type="submit"]:hover,
button[type="submit"]:focus {
    background-color: #005177;
}

/* =============================
   Responsive
============================= */
@media (max-width: 600px) {
    input, textarea {
        font-size: 0.95rem;
        padding: 0.5rem;
    }

    a.contact-form-back-link,
    button[type="submit"] {
        font-size: 0.95rem;
        padding: 0.45rem 0.9rem;
    }

    .form-hint {
        font-size: 0.85rem;
    }
}


/* =============================
   Logotipo como texto en home
============================= */
/* 2️⃣ Contenedor del logo centrado */
.logo-container {
  position: relative;
  display: flex;
  justify-content: center; /* CENTRA horizontalmente */
  align-items: center;     /* CENTRA verticalmente si quieres */
  max-width: 90%;
  margin: 0 auto;
}

/* 3️⃣ Texto del logo */
.logo-text {
  font-family: 'IMPARES-Regular', sans-serif;
  font-size: 6vw; /* Escalable y responsive */
  margin: 0;
  line-height: 1;
  text-align: center;
}

/* 4️⃣ SVG de los puntos */
.logo-dots {
  position: absolute;
  width: 100%;
  height: auto;
  pointer-events: none; /* No interfiere con clics */
  top: 50%;             /* Para centrar verticalmente sobre el texto */
  left: 50%;            /* Para centrar horizontalmente */
  transform: translate(-50%, -50%); /* Ajuste fino para centrar */
}

/* 5️⃣ Color de los puntos naranjas */
.logo-dots .dot {
  fill: #e86754;
}

/* 6️⃣ Ajuste para pantallas muy pequeñas */
@media (max-width: 480px) {
  .logo-text {
    font-size: 10vw;
  }
}
.banner-lectura-facil {
    width: 100%;
    background-color: #1c1c1c; /* color del footer */
    color: #ffffff;
    text-align: center;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}