/* ============================================================
   KIT TIPOGRÁFICO: corporativo (Inter — autoalojado, 1 archivo)
   Uso: 1) copiar inter-var.woff2 a /css/fonts/
        2) sustituir el bloque de kit del PRINCIPIO de style.css por este
        3) añadir el preload.html en head.php
   PROHIBIDO usar font-family directos fuera de este bloque:
   siempre var(--font-titulares) / var(--font-texto).
   ============================================================ */
@font-face {
	font-family: 'Inter';
	src: url('fonts/inter-var.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
:root {
	--font-titulares: 'Inter', system-ui, sans-serif;
	--font-texto: 'Inter', system-ui, sans-serif;
}
/* Aplicación del kit (sobrescribe los defaults de w3.css sin tocarlo) */
body { font-family: var(--font-texto); line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-titulares); }
/* Ajustes de composición del kit corporativo */
h1, h2 { font-weight: 700; letter-spacing: -0.02em; }

/* ============================================================
   PALETA FUERAOKUPAS — Sistema de temas w3-theme-*
   Solo cambiar valores de color, nunca los nombres de clase.
   ============================================================ */
html,body{
	font-size:16px
}
.menufront {color:#333; font-family:var(--font-titulares);} /* MENU FRONT — color texto menú */
.titular1 {color:#cc0000; font-family:var(--font-titulares);} /* Titulares rojo corporativo */
.titular2 {color:#cc0000; font-family:var(--font-titulares);} /* Titulares rojo corporativo */
.titular3 {color:#fff; font-family:var(--font-titulares);} /* Titulares blancos (sobre fondo oscuro) */
.titular4 {color:#333; font-family:var(--font-titulares);} /* Titulares gris oscuro */
.w3-theme-l5 {color:#fff; background-color:#cc0000} /* BOTO CAPÇALERA (rojo) */
.w3-theme-l4 {color:#ff9900; background-color:#fff} /* BOTO IDIOMES ACTIU (sin uso, reservado) */
.w3-theme-l3 {color:#ccc; background-color:#fff} /* BOTO IDIOMES (sin uso, reservado) */
.w3-theme-l2 {color:#fff; background-color:#cc0000} /* FOOTER (rojo) */
.w3-theme-l1 {color:#000; background-color:#fff} /* BOTO FOOTER / breadcrumb */
.w3-theme-d1 {color:#fff; background-color:#000} /* MENU MOBIL (negro) */
.w3-theme-d2 {color:#cc0000; background-color:#fff} /* COLOR ICONES (heredan via currentColor) */
.w3-theme-d3 {color:#fff; background-color:transparent} /* FONS TEXT SLIDESHOW (la trama la pone Transparencia.png) */
.w3-theme-d4 {color:#cc0000; background-color:#fff} /* COLOR TITULARS DESTACATS */
.w3-theme-d5 {color:#fff; background-color:#000} /* BOTO FORMULARI (negro) */
.w3-theme {color:#333; background-color:#fff} /* ESTIL GENERAL D'UNA SECCIO */
.w3-text-theme {color:#666} /* COLOR DEL TEXT GENERAL */
.w3-theme-light {color:#000; background-color:#fef4f3} /* Fondo claro rosado (bloques destacados) */
.w3-theme-dark {color:#fff; background-color:#8d1007} /* Fondo rojo oscuro */
.w3-theme-action {color:#fff; background-color:#8d1007} /* Botón acción rojo oscuro */
.w3-border-theme {border-color:#f44336} /* Borde tema */
.w3-hover-theme:hover {color:#fff; background-color:#f44336} /* Hover tema */
.w3-hover-text-theme:hover {color:#f44336} /* Hover texto tema */

/* ============================================================
   COMPONENTES PROPIOS FUERAOKUPAS
   ============================================================ */
/* Contenedores de color heredados del diseño original */
.contenidor1 {color:#fff; background-color:#333}
.contenidor2 {color:#fff; background-color:#cc0000}
.contenidor3 {color:#fff; background-color:#cc0000}

/* Botones y logos de redes sociales */
.botofacebook {color:#fff; background-color:#3a5ca9}
.bototwitter {color:#fff; background-color:#00bfff}
.botoinsta {color:#fff; background-color:#f71970}
.logofacebook {color:#3a5ca9; background-color:#fff}
.logotwitter {color:#00bfff; background-color:#fff}
.logoinsta {color:#f71970; background-color:#fff}

/* Portada con imagen de fondo (rutas SIEMPRE relativas) */
.portada-text {text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff}
.portada-text button {border:none; outline:0; display:inline-block; padding:10px 25px; color:#000; background-color:#fff; text-align:center; cursor:pointer}
.portada-text button:hover {background-color:#ddd; color:#000}
.portada1 {background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("../img/garantia-anti-okupas.webp"); background-color:#ccc; height:500px; background-position:center; background-repeat:no-repeat; background-size:cover; position:relative}

/* Utilidades heredadas */
.padding-section {padding:0 16px}
.margin-top-22 {margin-top:22px}
.font-14 {font-size:14px}
.seccion-principal {padding:0 16px}

/* CTA fija en móvil */
.cta-mobile {position:sticky; bottom:20px; z-index:999; box-shadow:0 4px 12px rgba(0,0,0,0.3)}

/* Imágenes responsivas con zoom suave al pasar el ratón */
img {max-width:100%; height:auto}
.w3-image {transition:transform .3s ease}
.w3-image:hover {transform:scale(1.02)}

/* Separador vertical estándar (sustituye a <div>&nbsp;</div>) */
.section-spacer {height:24px}
/* Separador vertical pequeño (formularios) */
.section-spacer-sm {height:12px}

/* Icono SVG inline del sprite (/img/icons.svg): tamaño base alineado con el texto */
.icono { width:1em; height:1em; vertical-align:-0.125em; }
/* Icono grande (equivalente a w3-xlarge sobre FA, p.ej. redes sociales) */
.icono-xl { width:1.5em; height:1.5em; vertical-align:-0.3em; }

/* Media queries — ORDEN CORRECTO CON max-width:
   primero el breakpoint más ancho y después el más pequeño. */

/* ≤992px : tablets medianas */
@media (max-width:992px){
	html,body{font-size:14px;line-height:1.2}
	h1{font-size:32px}h2{font-size:26px}h3{font-size:20px}h4{font-size:16px}h5{font-size:12px}h6{font-size:12px}
	.w3-large{font-size:16px!important}.w3-xlarge{font-size:20px!important}.w3-xxlarge{font-size:32px!important}.w3-xxxlarge{font-size:44px!important}.w3-jumbo{font-size:60px!important}
}

/* ≤768px : móviles y tablets pequeñas */
@media (max-width:768px){
	h1{font-size:20px}h2{font-size:18px}h3{font-size:16px}h4{font-size:14px}
	.cta-mobile{font-size:16px;padding:12px 20px;bottom:10px}
}

/* ≤600px : móviles */
@media (max-width:600px){
	h1{font-size:20px}h2{font-size:18px}h3{font-size:16px}h4{font-size:14px}h5{font-size:12px}h6{font-size:12px}
	.w3-large{font-size:16px!important}.w3-xlarge{font-size:18px!important}.w3-xxlarge{font-size:20px!important}.w3-xxxlarge{font-size:22px!important}.w3-jumbo{font-size:36px!important}
	.padding-section{padding:0 8px}
}