/* =========================================================================
   viraltia.com · base
   Tokens del kit global de Elementor (post-34.css) y valores medidos en la web de WordPress el 26-09-2026.
   Lo que es de una sola página va en css/paginas/; cabecera, pie y popup, en componentes.css.
   ========================================================================= */

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/manrope-400.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/manrope-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/manrope-800.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Serif'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/robotoserif-300.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/robotoserif-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Serif'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/robotoserif-500.woff2') format('woff2'); }

:root {
  /* Color (kit global) */
  --c-primario: #B31FFF;      /* violeta */
  --c-grafito: #292827;       /* titulares y superficies oscuras */
  --c-texto: #595958;         /* cuerpo */
  --c-arena: #ADAB8F;         /* acento discreto, iconos */
  --c-apagado: #787673;       /* metadatos */
  --c-fondo: #F6F5F3;         /* hueso */
  --c-superficie: #FFFFFF;
  --c-borde: #EAE9E7;
  --c-azul: #239CFF;
  --c-ambar: #FFA42D;
  --c-naranja: #FF5816;

  /* El degradado de los botones principales, medido en la web */
  --degradado: linear-gradient(70deg, #239CFF 0%, #B31FFF 70%);

  /* Tipografía */
  --f-titulos: 'Roboto Serif', Georgia, 'Times New Roman', serif;
  --f-texto: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-h1: 82px;  --t-h2: 62px;  --t-h3: 48px;  --t-h4: 32px;  --t-h5: 24px;  --t-h6: 17px;
  --t-texto: 18px;          /* cuerpo, 1.55 */
  --t-destacado: 17px;      /* Manrope 700, 1.65 (accent) */
  --t-terciario: 16px;      /* Manrope 500, 1.65 */
  --t-meta: 15px;           /* Roboto Serif 400, 1.6 */
  --t-etiqueta: 13px;       /* Manrope 700 mayúsculas (taxonomy) */
  --t-pequeno: 14px;        /* Manrope 400, 1.55 */
  --t-boton: 16px;          /* Manrope 700, 1.65 */
  --t-cita: 30px;           /* Roboto Serif 400, 1.35, -1px */
  --t-entradilla: 20px;     /* Manrope 500, 1.5 */

  /* Forma y ritmo */
  --radio: 20px;
  --radio-boton: 10px;
  --ancho: 1360px;          /* contenido a 1440 px: de 40 a 1400 */
  --margen: 40px;           /* margen lateral de página */
  --seccion: 140px;         /* separación entre secciones */
  --hueco: 30px;            /* separación por defecto entre tarjetas */
  --transicion: 0.3s;
}

@media (max-width: 1180px) {
  :root {
    --t-h1: 60px; --t-h2: 48px; --t-h3: 36px; --t-h4: 28px; --t-h5: 22px; --t-h6: 16px;
    --t-texto: 17px; --t-destacado: 16px; --t-terciario: 15px; --t-meta: 14px; --t-etiqueta: 12px;
    --t-boton: 15px; --t-cita: 28px;
    --margen: 30px; --seccion: 100px;
  }
}

@media (max-width: 767px) {
  :root {
    --t-h1: 42px; --t-h2: 36px; --t-h3: 28px; --t-h4: 24px; --t-h5: 18px; --t-h6: 15px;
    --t-texto: 16px; --t-destacado: 15px; --t-terciario: 14px; --t-meta: 13px; --t-pequeno: 13px;
    --t-boton: 14px; --t-cita: 22px;
    --margen: 20px; --seccion: 70px; --hueco: 20px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-variation-settings: 'opsz' 14; }
/* Roboto Serif local es variable con eje óptico; WordPress la servía fija en tamaño óptico 14. Sin esto los
   titulares salen un 7 % más estrechos y cortan en otras líneas. Manrope no tiene ejes y no le afecta. */
body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-texto);
  font-size: var(--t-texto);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--f-titulos);
  font-weight: 400;
  color: var(--c-grafito);
}
h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -2px; }
h2 { font-size: var(--t-h2); line-height: 1.1;  letter-spacing: -2px; }
h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -1px; }
h4 { font-size: var(--t-h4); line-height: 1.25; letter-spacing: -1px; }
h5 { font-size: var(--t-h5); line-height: 1.35; letter-spacing: -1px; }
h6 { font-size: var(--t-h6); line-height: 1.65; letter-spacing: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; transition: color var(--transicion); }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
strong, b { font-weight: 700; }

:focus-visible { outline: 2px solid var(--c-primario); outline-offset: 3px; }

.saltar-al-contenido {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  padding: 10px 18px; border-radius: var(--radio-boton);
  background: var(--c-grafito); color: #fff; font-weight: 700;
}
.saltar-al-contenido:focus { top: 16px; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Maquetación ---------- */
.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.contenedor--estrecho { width: min(100% - 2 * var(--margen), 1040px); margin-inline: auto; }
.seccion { padding-block: var(--seccion); }
.centrado { text-align: center; }

/* Cabecera de sección: etiqueta + h2 + entradilla, centrados */
.cabeza-seccion { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin-bottom: 60px; }
.cabeza-seccion p { max-width: 640px; margin: 0; font-size: var(--t-pequeno); }
@media (max-width: 767px) { .cabeza-seccion { margin-bottom: 40px; } }

/* ---------- Tipografía de apoyo ---------- */
.entradilla { font-size: var(--t-entradilla); font-weight: 500; line-height: 1.5; }
.meta { font-family: var(--f-titulos); font-size: var(--t-meta); line-height: 1.6; color: var(--c-apagado); }
.pequeno { font-size: var(--t-pequeno); line-height: 1.55; }
.cita { font-family: var(--f-titulos); font-size: var(--t-cita); line-height: 1.35; letter-spacing: -1px; color: var(--c-grafito); }

/* Píldora encima del titular («Servicios», «Equipo»…) */
.etiqueta {
  display: inline-block;
  padding: 3px 13px;
  border-radius: 50px;
  background: var(--c-superficie);
  font-family: var(--f-titulos);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-grafito);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 30px;
  border-radius: var(--radio-boton);
  font-family: var(--f-texto); font-size: var(--t-boton); font-weight: 700; line-height: 1.65;
  text-align: center;
  box-shadow: 0 4px 30px rgba(255, 255, 255, 0.2);
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
  cursor: pointer;
}
.boton__icono { display: inline-flex; }
.boton__icono .icono { width: 12px; height: 12px; }  /* el glifo de flecha del tema, a su tamaño */
.boton:hover { transform: translateX(5px); }          /* desplazamiento al pasar el ratón, como en WordPress */
.boton--primario { background: var(--degradado); color: #fff; border: 0; }
.boton--primario:hover, .boton--primario:focus-visible {
  background: linear-gradient(var(--c-grafito), var(--c-grafito));
  box-shadow: 0 4px 40px rgba(255, 255, 255, 0.3);
}
.boton--secundario { background: transparent; color: var(--c-grafito); border: 1px solid var(--c-grafito); }
.boton--secundario:hover, .boton--secundario:focus-visible {
  background: var(--c-grafito); color: #fff;
  box-shadow: 0 4px 40px rgba(255, 255, 255, 0.3);
}
.botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.botones--centro { justify-content: center; }

.icono { width: 1em; height: 1em; flex: none; }

/* ---------- Tarjeta (firma del sistema: se enciende el filete en hover, sin elevarse) ---------- */
.tarjeta {
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
  transition: border-color var(--transicion);
}
.tarjeta--interactiva:hover { border-color: var(--c-primario); }

/* ---------- Aparición al entrar en pantalla (assets/js/sitio.js) ---------- */
.js [data-aparece] {
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--retraso, 0s);
}
.js [data-aparece="subir"] { transform: translateY(40px); }
.js [data-aparece="izquierda"] { transform: translateX(-40px); }
.js [data-aparece="derecha"] { transform: translateX(40px); }
.js [data-aparece="pop"] { transform: scale(0.75); }       /* cmsmasters-pop-in */
/* «fundido»: solo opacidad */
.js [data-aparece].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-aparece] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Aviso de cookies (solo con medicion.consentimiento = true) ---------- */
.aviso-cookies {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 900;
  max-width: 560px; padding: 20px 24px;
  background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--radio);
  box-shadow: 0 10px 40px rgba(41, 40, 39, 0.12);
  font-size: var(--t-pequeno);
}
.aviso-cookies a { text-decoration: underline; }
.aviso-cookies__botones { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.aviso-cookies .boton { padding: 8px 20px; }