/* =========================================================
   ESPAÑOL FOR ALL — HOJA DE ESTILOS
   ---------------------------------------------------------
   Cómo está organizado este archivo (para Rut o quien
   mantenga la web sin conocimientos técnicos):

   1. Colores y medidas generales (variables)
   2. Estilos base (toda la página)
   3. Cabecera y menú
   4. Sección de inicio (hero)
   5. Sección "¿Te suena?"
   6. Sección "Método" (errores típicos)
   7. Sección de la guía gratuita (lead magnet)
   8. Sección "Sobre mí"
   9. Sección "Sígueme"
   10. Sección "Contacto"
   11. Pie de página
   12. Botón flotante de WhatsApp
   13. Páginas legales (privacidad y aviso legal)
   14. Programa piloto A2 (página independiente)
   15. Banner sticky del programa piloto
   16. Tamaños de pantalla más grandes (responsive)

   IMPORTANTE: este CSS usa propiedades "lógicas"
   (margin-inline-start, padding-inline-end, text-align: start...)
   en lugar de left/right. Así, cuando se active el árabe
   (de derecha a izquierda), todo se coloca solo, sin tocar
   este archivo.
   ========================================================= */


/* =========================================================
   1. COLORES Y MEDIDAS GENERALES
   Si Rut quiere cambiar un color de toda la web, lo cambia
   aquí UNA sola vez.
   ========================================================= */
:root {
  /* Colores de la marca (sacados del logo) */
  --color-azul-marino: #2B2D6E;
  --color-rojo: #DD2A30;
  --color-amarillo: #F5B41F;
  --color-crema: #FBF6EE;
  --color-blanco: #FFFFFF;
  --color-texto: #2E2E2E;
  --color-texto-claro: #FFFFFF;
  --color-borde: #E3DFD3;

  /* Tipografías */
  --fuente-titulos: "Poppins", "Cairo", sans-serif;
  --fuente-cuerpo: "Mulish", "Cairo", sans-serif;

  /* Medidas */
  --ancho-maximo: 1180px;
  --espacio-seccion: 4rem;
  --radio-borde: 16px;

  /* Sombra suave para tarjetas */
  --sombra-tarjeta: 0 4px 16px rgba(43, 45, 110, 0.08);
}


/* =========================================================
   2. ESTILOS BASE
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Esto hace que el desplazamiento al pulsar un enlace de
     menú (ej. "#metodo") sea suave, no un salto brusco */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-texto);
  background-color: var(--color-blanco);
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  color: var(--color-azul-marino);
  line-height: 1.25;
  margin-block: 0 0.75rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }

p {
  margin-block: 0 1rem;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-azul-marino);
}

/* Texto que solo leen los lectores de pantalla (accesibilidad) */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Enlace "saltar al contenido", para quien navega con teclado
   o lector de pantalla: aparece solo al recibir el foco */
.enlace-saltar {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: 0;
  background: var(--color-azul-marino);
  color: var(--color-texto-claro);
  padding: 0.75rem 1rem;
  z-index: 200;
}

.enlace-saltar:focus {
  inset-inline-start: 0;
}

/* Foco visible para quien navega con teclado: NO QUITAR,
   es un requisito de accesibilidad */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-amarillo);
  outline-offset: 2px;
}

/* Contenedor centrado que usan todas las secciones */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Espaciado vertical estándar de cada sección */
.seccion {
  padding-block: var(--espacio-seccion);
}

.seccion--crema {
  background-color: var(--color-crema);
}

.seccion__titulo {
  text-align: center;
  margin-block-end: 2rem;
}

/* Subrayado decorativo amarillo bajo palabras clave de los títulos */
.resalte {
  position: relative;
  white-space: nowrap;
}

.resalte::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -2px;
  width: 100%;
  height: 6px;
  background-color: var(--color-amarillo);
  z-index: -1;
  opacity: 0.6;
}


/* =========================================================
   BOTONES
   ========================================================= */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  padding: 0.9rem 1.75rem;
  /* Tamaño táctil mínimo recomendado (accesibilidad) */
  min-height: 44px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.boton:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-tarjeta);
}

/* Botón rojo: SOLO para las llamadas a la acción más importantes
   (descargar guía, WhatsApp). No usar el rojo en otros botones. */
.boton--primario {
  background-color: var(--color-rojo);
  color: var(--color-texto-claro);
}

/* Botón de contorno, para acciones secundarias */
.boton--secundario {
  background-color: transparent;
  color: var(--color-azul-marino);
  border: 2px solid var(--color-azul-marino);
}

/* Botón sobre fondo azul marino (sección de la guía) */
.boton--sobre-azul {
  background-color: var(--color-amarillo);
  color: var(--color-azul-marino);
}


/* =========================================================
   3. CABECERA Y MENÚ
   ========================================================= */

.cabecera {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background-color: var(--color-blanco);
  border-block-end: 1px solid var(--color-borde);
}

.cabecera__contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 16px;
}

.cabecera__logo {
  display: flex;
  align-items: center;
}

.cabecera__logo img {
  height: 95px !important;
  width: auto !important;
}

/* Botón de menú (hamburguesa), solo visible en móvil */
.cabecera__boton-menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.cabecera__boton-menu span {
  display: block;
  width: 24px;
  height: 3px;
  background-color: var(--color-azul-marino);
  margin-inline: auto;
  border-radius: 2px;
}

/* Navegación: en móvil se oculta y se muestra en columna al
   pulsar el botón de menú */
.cabecera__nav {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  background-color: var(--color-blanco);
  border-block-end: 1px solid var(--color-borde);
  display: none;
  flex-direction: column;
  padding: 1rem 1.25rem;
}

.cabecera__nav.cabecera__nav--abierto {
  display: flex;
}

.cabecera__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cabecera__lista a {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-azul-marino);
  display: inline-block;
  padding-block: 0.4rem;
}

.cabecera__lista a:hover {
  color: var(--color-rojo);
}

/* Selector de idioma ES / العربية */
.selector-idioma {
  display: flex;
  gap: 0.4rem;
  margin-block-start: 1rem;
}

.selector-idioma__boton {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.9rem;
  background-color: var(--color-crema);
  color: var(--color-azul-marino);
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  min-height: 44px;
}

.selector-idioma__boton[aria-pressed="true"] {
  background-color: var(--color-azul-marino);
  color: var(--color-texto-claro);
  border-color: var(--color-azul-marino);
}


/* =========================================================
   4. SECCIÓN DE INICIO (HERO)
   ========================================================= */

.hero {
  padding-block: 2.5rem 3rem;
  background-color: var(--color-crema);
}

.hero__contenedor {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.hero__texto {
  text-align: center;
}

.hero__titulo {
  font-size: 1.9rem;
}

.hero__subtitulo {
  font-size: 1.1rem;
  margin-block-end: 1.5rem;
}

.hero__botones {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.hero__imagen {
  width: 100%;
  max-width: 320px;
}

.hero__imagen img {
  width: 100%;
  border-radius: var(--radio-borde);
}


/* =========================================================
   5. SECCIÓN "¿TE SUENA?"
   ========================================================= */

.tarjetas-perfiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.tarjeta-perfil {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  padding: 1.5rem;
  box-shadow: var(--sombra-tarjeta);
}

.tarjeta-perfil__cita {
  font-style: italic;
  font-size: 1.05rem;
  margin-block-end: 1rem;
}

.tarjeta-perfil__respuesta {
  margin: 0;
  padding-inline-start: 1rem;
  border-inline-start: 4px solid var(--color-amarillo);
  font-weight: 600;
  color: var(--color-azul-marino);
}


/* =========================================================
   6. SECCIÓN "MÉTODO" (errores típicos)
   ========================================================= */

.metodo__intro {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: 2rem;
}

.lista-errores {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.tarjeta-error {
  display: flex;
  gap: 1rem;
  background-color: var(--color-blanco);
  border-radius: var(--radio-borde);
  padding: 1.25rem;
  box-shadow: var(--sombra-tarjeta);
}

/* Icono circular amarillo (detalle "pequeñas dosis de sol") */
.tarjeta-error__icono {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-amarillo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.tarjeta-error__titulo {
  margin-block-end: 0.4rem;
}

.metodo__cierre {
  margin-block-start: 2.5rem;
  text-align: center;
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-azul-marino);
  max-width: 700px;
  margin-inline: auto;
}


/* =========================================================
   7. SECCIÓN DE LA GUÍA GRATUITA (LEAD MAGNET)
   ========================================================= */

.guia {
  background-color: var(--color-azul-marino);
  color: var(--color-texto-claro);
}

.guia h2 {
  color: var(--color-texto-claro);
}

.guia__contenido {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.guia__lista {
  list-style: none;
  margin: 0 0 2rem 0;
  padding: 0;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.guia__lista li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.guia__lista li::before {
  content: "✓";
  color: var(--color-amarillo);
  font-weight: 700;
  flex-shrink: 0;
}

/* Caja del formulario de MailerLite (o del botón temporal) */
.guia__formulario {
  background-color: var(--color-blanco);
  border-radius: var(--radio-borde);
  padding: 1.5rem;
  color: var(--color-texto);
}


/* =========================================================
   8. SECCIÓN "SOBRE MÍ"
   ========================================================= */

.sobre-mi__contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

/* ---------------------------------------------------------
   ELEMENTO DE FIRMA: el arco del logo enmarca la foto de Rut.
   Se consigue recortando la imagen con clip-path en forma de
   arco (como la "n" del logo) y añadiendo un borde y un grupo
   de "rayos de sol" detrás, en la esquina.
   --------------------------------------------------------- */
.sobre-mi__figura {
  position: relative;
  width: 100%;
  max-width: 280px;
}

/* Rayos de sol decorativos detrás del arco */
.sobre-mi__sol {
  position: absolute;
  inset-block-start: -1.5rem;
  inset-inline-end: -1.5rem;
  width: 90px;
  height: 90px;
  z-index: 0;
}

.sobre-mi__imagen-marco {
  position: relative;
  z-index: 1;
  border: 6px solid var(--color-azul-marino);
  border-radius: 50% 50% var(--radio-borde) var(--radio-borde) / 60% 60% var(--radio-borde) var(--radio-borde);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.sobre-mi__imagen-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sobre-mi__texto {
  max-width: 620px;
}


/* =========================================================
   9. SECCIÓN "SÍGUEME"
   ========================================================= */

.sigueme__contenedor {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.tarjeta-youtube {
  background-color: var(--color-crema);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  padding: 1.5rem;
  text-align: center;
  max-width: 560px;
}

.tarjeta-youtube__titulo {
  margin-block-end: 0.5rem;
}

.redes-sociales {
  display: flex;
  gap: 1rem;
}

.redes-sociales a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: transform 0.15s ease;
}

.redes-sociales a:hover {
  transform: scale(1.1);
}

.redes-sociales svg,
.pie__redes svg {
  width: 32px;
  height: 32px;
  display: block;
}


/* =========================================================
   10. SECCIÓN "CONTACTO"
   ========================================================= */

.contacto {
  text-align: center;
}

.contacto__contenedor {
  max-width: 560px;
  margin-inline: auto;
}

.contacto__email {
  margin-block-start: 1.5rem;
}

.contacto__email a {
  font-weight: 600;
  text-decoration: none;
}


/* =========================================================
   11. PIE DE PÁGINA
   ========================================================= */

.pie {
  background-color: var(--color-crema);
  border-block-start: 1px solid var(--color-borde);
  padding-block: 2.5rem;
  text-align: center;
}

.pie__logo img {
  height: 80px;
  width: auto;
  object-fit: contain;
  margin-inline: auto;
  margin-block-end: 1rem;
}

.pie__nav {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.pie__nav a,
.pie__legal a {
  text-decoration: none;
  color: var(--color-azul-marino);
  font-size: 0.95rem;
}

.pie__nav a:hover,
.pie__legal a:hover {
  color: var(--color-rojo);
}

.pie__redes {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-block: 1rem;
}

.pie__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: transform 0.15s ease;
}

.pie__redes a:hover {
  transform: scale(1.1);
}

.pie__legal {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.pie__copyright {
  font-size: 0.85rem;
  color: #6b6b6b;
}


/* =========================================================
   12. BOTÓN FLOTANTE (GUÍA GRATIS)
   Se coloca al final del eje de lectura: a la derecha en
   español (LTR) y a la izquierda en árabe (RTL), de forma
   automática gracias a "inset-inline-end".
   ========================================================= */

.flotante-guia {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background-color: var(--color-rojo);
  color: var(--color-texto-claro);
  text-decoration: none;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.flotante-guia:hover {
  transform: scale(1.05);
}


/* =========================================================
   13. PÁGINAS LEGALES (privacidad.html y aviso-legal.html)
   ========================================================= */

.legal {
  padding-block: 3rem;
}

.legal__contenido {
  max-width: 760px;
  margin-inline: auto;
}

.legal__contenido h2 {
  margin-block-start: 2rem;
}

.legal__volver {
  display: inline-block;
  margin-block-end: 2rem;
}


/* =========================================================
   14. PROGRAMA PILOTO A2 (página independiente)
   Estilos de "programa-piloto-a2.html". Reutiliza las
   variables de color y los componentes generales (.boton,
   .seccion, .guia, .sobre-mi__*) definidos arriba.
   ========================================================= */

.piloto__lista-check,
.piloto__lista-cruz {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.piloto__lista-check li,
.piloto__lista-cruz li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 1.05rem;
}

.piloto__lista-check li::before {
  content: "✓";
  color: var(--color-amarillo);
  font-weight: 700;
  flex-shrink: 0;
}

.piloto__lista-cruz li::before {
  content: "✗";
  color: var(--color-rojo);
  font-weight: 700;
  flex-shrink: 0;
}

.piloto__pasos {
  list-style: none;
  margin: 0 0 2rem 0;
  padding: 0;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.piloto__pasos li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.piloto__pasos li p {
  margin: 0;
}

.piloto__paso-numero {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-azul-marino);
  color: var(--color-texto-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-titulos);
  font-weight: 700;
}

.piloto__destacado {
  text-align: center;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--color-rojo);
  max-width: 640px;
  margin-inline: auto;
}

.piloto__faq {
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.piloto__faq-item h3 {
  margin-block-end: 0.4rem;
}

.piloto__faq-item p {
  margin: 0;
}


/* =========================================================
   15. BANNER STICKY DEL PROGRAMA PILOTO
   Banner fijo arriba de "index.html" que promociona
   "programa-piloto-a2.html". Se puede desactivar del todo
   con BANNER_ACTIVO en js/principal.js. El botón "×" lo
   cierra y recuerda la elección en localStorage.
   ========================================================= */

.banner-piloto {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background-color: var(--color-rojo);
  color: var(--color-texto-claro);
  padding: 0.6rem 2.75rem;
  text-align: center;
}

.banner-piloto[hidden] {
  display: none;
}

.banner-piloto__texto {
  margin: 0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.banner-piloto__boton {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  color: var(--color-texto-claro);
  text-decoration: underline;
  white-space: nowrap;
}

.banner-piloto__cerrar {
  position: absolute;
  inset-inline-end: 0.4rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-texto-claro);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  min-height: 44px;
  min-width: 44px;
}


/* =========================================================
   16. TAMAÑOS DE PANTALLA MÁS GRANDES (RESPONSIVE)
   "Mobile-first": el CSS de arriba es para móviles pequeños
   (desde 390px). Aquí añadimos los cambios para pantallas
   más grandes.
   ========================================================= */

/* Tablets (a partir de ~600px) */
@media (min-width: 600px) {
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.9rem; }

  .hero__titulo { font-size: 2.4rem; }

  .hero__botones {
    flex-direction: row;
    justify-content: center;
  }

  .tarjetas-perfiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .lista-errores {
    grid-template-columns: repeat(2, 1fr);
  }

  .redes-sociales {
    gap: 1.25rem;
  }
}

/* Escritorio (a partir de ~900px) */
@media (min-width: 900px) {
  /* La cabecera deja de necesitar el botón de hamburguesa:
     el menú se muestra siempre, en línea */
  .cabecera__boton-menu {
    display: none;
  }

  .cabecera__nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    border: none;
    padding: 0;
    width: auto;
  }

  .cabecera__lista {
    flex-direction: row;
    gap: 1.5rem;
  }

  .selector-idioma {
    margin-block-start: 0;
  }

  /* Hero: texto y foto lado a lado */
  .hero__contenedor {
    flex-direction: row;
    text-align: start;
  }

  .hero__texto {
    text-align: start;
    flex: 1;
  }

  .hero__botones {
    justify-content: flex-start;
  }

  .hero__imagen {
    flex: 0 0 360px;
    max-width: 360px;
  }

  /* Sobre mí: foto y texto lado a lado */
  .sobre-mi__contenedor {
    flex-direction: row;
    text-align: start;
    align-items: center;
  }

  .sobre-mi__figura {
    flex: 0 0 280px;
  }

  .banner-piloto {
    max-height: 60px;
  }
}

/* Pantallas grandes (a partir de ~1200px) */
@media (min-width: 1200px) {
  .lista-errores {
    grid-template-columns: repeat(2, 1fr);
  }

  .tarjetas-perfiles {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* =========================================================
   PREPARACIÓN PARA ÁRABE (RTL) — Fase C
   Gracias a las propiedades lógicas usadas en todo este
   archivo, el cambio a árabe (dir="rtl") debería funcionar
   sin tener que duplicar reglas. Aquí solo ajustamos el
   tamaño de letra, un poco mayor para que el árabe se lea
   igual de cómodo que el español.
   ========================================================= */

html[lang="ar"] body {
  font-family: "Cairo", sans-serif;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .boton,
html[lang="ar"] .selector-idioma__boton,
html[lang="ar"] .cabecera__lista a {
  font-family: "Cairo", sans-serif;
}

html[lang="ar"] body {
  font-size: 1.1rem; /* aprox. 10% más grande que el latino */
}