@charset "UTF-8";
/* ==========================================================================
   CAMP ROIG PANIFICACIONS — hoja de estilos unica
   Sustituye a style.css + responsive.css (y a la cadena de 20 @import que
   arrastraban). Mantiene la paleta de marca: azul #209ed8 y ambar #dd8e00.
   Autocontenida: solo depende de la fuente Flaticon en ../fonts/flaticon/.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de diseno
   -------------------------------------------------------------------------- */
:root{
  /* Marca (colores originales del proyecto) */
  --azul:            #209ed8;
  --azul-oscuro:     #1a80ae;
  --azul-mas-oscuro: #14648a;
  --azul-tenue:      #eaf6fc;
  --ambar:           #dd8e00;
  --ambar-oscuro:    #b57400;
  --ambar-tenue:     #fff6e6;

  /* Neutros */
  --tinta:      #2b2f33;
  --tinta-suave:#4a5057;
  --apagado:    #6d747b;
  --borde:      #e4e7ea;
  --borde-suave:#eef1f3;
  --fondo:      #ffffff;
  --fondo-alt:  #f7f8f9;

  /* Tipografia */
  --fuente: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;

  /* Espaciado (escala de 4px) */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;    --e8: 4rem;   --e9: 6rem;

  /* Radios y sombras */
  --radio:    10px;
  --radio-sm: 6px;
  --radio-full: 999px;
  --sombra-1: 0 1px 2px rgba(16,24,32,.06), 0 1px 3px rgba(16,24,32,.08);
  --sombra-2: 0 4px 12px rgba(16,24,32,.08), 0 2px 4px rgba(16,24,32,.04);
  --sombra-3: 0 12px 32px rgba(16,24,32,.12), 0 4px 8px rgba(16,24,32,.06);

  /* Layout */
  --ancho-contenedor: 1200px;
  --alto-nav: 66px;
  --transicion: 180ms cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------------------------
   2. Reset moderno
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--alto-nav) + 1rem); }
body{
  margin:0;
  font-family:var(--fuente);
  font-size:16px;
  line-height:1.65;
  color:var(--tinta-suave);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,iframe{ max-width:100%; }
img,svg,video{ height:auto; display:block; }
h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--e3);
  font-weight:700;
  line-height:1.25;
  color:var(--tinta);
  text-wrap:balance;
}
h1{ font-size:clamp(1.9rem,1.4rem + 2vw,2.75rem); }
h2{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); }
h3{ font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem); }
h4{ font-size:1.15rem; }
h5{ font-size:1rem; }
h6{ font-size:.9375rem; }
p{ margin:0 0 var(--e4); }
p:last-child{ margin-bottom:0; }
a{ color:var(--azul-oscuro); text-decoration:none; transition:color var(--transicion); }
a:hover{ color:var(--ambar-oscuro); text-decoration:underline; }
ul,ol{ margin:0 0 var(--e4); padding-left:1.25rem; }
li{ margin-bottom:var(--e1); }
hr{ border:0; border-top:1px solid var(--borde); margin:var(--e6) 0; }
table{ border-collapse:collapse; width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--ambar-tenue); color:var(--tinta); }

/* Foco visible y accesible en todo elemento interactivo */
:focus-visible{
  outline:3px solid var(--ambar);
  outline-offset:2px;
  border-radius:var(--radio-sm);
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* Enlace para saltar al contenido (lectores de pantalla / teclado) */
.saltar-contenido{
  position:absolute; left:var(--e4); top:-100px; z-index:10001;
  background:var(--ambar); color:#fff; font-weight:600;
  padding:var(--e3) var(--e5); border-radius:0 0 var(--radio) var(--radio);
  transition:top var(--transicion);
}
.saltar-contenido:focus{ top:0; color:#fff; text-decoration:none; }

/* --------------------------------------------------------------------------
   3. Iconografia (fuente Flaticon del proyecto)
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Flaticon";
  src:url("../fonts/flaticon/Flaticon.woff") format("woff"),
      url("../fonts/flaticon/Flaticon.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
[class^="flaticon-"]::before,[class*=" flaticon-"]::before{
  font-family:"Flaticon";
  font-style:normal;
  font-weight:normal;
  font-size:1.25rem;
  line-height:1;
  display:inline-block;
}
.flaticon-black-male-user-symbol::before{ content:"\f102"; }
.flaticon-call-answer::before{ content:"\f104"; }
.flaticon-clock::before{ content:"\f107"; }
.flaticon-envelope::before{ content:"\f10b"; }
.flaticon-home-page::before{ content:"\f10d"; }

/* --------------------------------------------------------------------------
   4. Rejilla — 12 columnas compatibles con el marcado existente
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--ancho-contenedor);
  margin-inline:auto;
  padding-inline:var(--e4);
}
.row{
  display:flex;
  flex-wrap:wrap;
  margin-inline:calc(var(--e4) * -.5);
}
.row > [class*="col-"]{
  width:100%;
  padding-inline:calc(var(--e4) * .5);
  min-width:0; /* evita desbordes de contenido largo dentro de flex */
}
.clearfix::after{ content:""; display:table; clear:both; }
.pull-left{ float:left; }
.pull-right{ float:right; }
.text-center{ text-align:center; }

/* xs: por defecto todo a ancho completo (mobile-first) */
[class*="col-xs-"]{ width:100%; }

@media (min-width:576px){
  .col-sm-1{width:8.3333%}   .col-sm-2{width:16.6667%} .col-sm-3{width:25%}
  .col-sm-4{width:33.3333%}  .col-sm-5{width:41.6667%} .col-sm-6{width:50%}
  .col-sm-7{width:58.3333%}  .col-sm-8{width:66.6667%} .col-sm-9{width:75%}
  .col-sm-10{width:83.3333%} .col-sm-11{width:91.6667%} .col-sm-12{width:100%}
}
@media (min-width:768px){
  .col-md-1{width:8.3333%}   .col-md-2{width:16.6667%} .col-md-3{width:25%}
  .col-md-4{width:33.3333%}  .col-md-5{width:41.6667%} .col-md-6{width:50%}
  .col-md-7{width:58.3333%}  .col-md-8{width:66.6667%} .col-md-9{width:75%}
  .col-md-10{width:83.3333%} .col-md-11{width:91.6667%} .col-md-12{width:100%}
}
@media (min-width:992px){
  .col-lg-1{width:8.3333%}   .col-lg-2{width:16.6667%} .col-lg-3{width:25%}
  .col-lg-4{width:33.3333%}  .col-lg-5{width:41.6667%} .col-lg-6{width:50%}
  .col-lg-7{width:58.3333%}  .col-lg-8{width:66.6667%} .col-lg-9{width:75%}
  .col-lg-10{width:83.3333%} .col-lg-11{width:91.6667%} .col-lg-12{width:100%}
}

/* --------------------------------------------------------------------------
   5. Cabecera
   -------------------------------------------------------------------------- */
.header-area{
  background:var(--fondo);
  padding:var(--e5) 0;
  border-bottom:1px solid var(--borde-suave);
}
/* Dos filas: la marca arriba y los accesos debajo, alineados a la derecha. */
.header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--e4);
}
@media (min-width:768px){
  .header-inner{ align-items:stretch; }
}

/* --- Marca: icono + nombre como un unico bloque -------------------------- */
.marca{
  display:flex;
  align-items:center;
  gap:var(--e4);
  flex:0 1 auto;
  min-width:0;
  padding:var(--e2);
  border-radius:var(--radio);
  text-decoration:none;
  transition:transform var(--transicion);
}
.marca:hover{ text-decoration:none; transform:translateY(-1px); }
.marca-icono{
  flex:0 0 auto;
  height:64px;
  width:auto;
}
/* El nombre es un JPG de fondo blanco: se separa del icono con un filete
   y se escala con la altura del bloque para que la pareja quede equilibrada. */
.marca-nombre{
  height:auto;
  width:auto;
  max-height:38px;
  max-width:100%;
  padding-left:var(--e4);
  border-left:2px solid var(--borde);
}
@media (max-width:575px){
  .marca{ gap:var(--e3); }
  .marca-icono{ height:52px; }
  .marca-nombre{ max-height:28px; padding-left:var(--e3); }
}

/* Fila inferior de la cabecera: accesos a la izquierda, catalogo a la derecha */
.header-accesos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--e4);
}
@media (min-width:768px){
  .header-accesos{ justify-content:space-between; }
}

/* --- Descarga del catalogo ----------------------------------------------- */
.cta-catalogo{
  display:none; /* solo en escritorio: en movil ya esta en el pie */
  align-items:center;
  gap:var(--e4);
  padding:var(--e3) var(--e5) var(--e3) var(--e4);
  border-radius:var(--radio);
  color:#fff;
  text-decoration:none;
  background:linear-gradient(120deg, var(--ambar) 0%, #e9a521 45%, var(--azul) 130%);
  box-shadow:0 6px 18px rgba(221,142,0,.32);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--transicion), box-shadow var(--transicion);
}
@media (min-width:768px){
  .cta-catalogo{ display:inline-flex; }
}
/* Brillo que recorre el boton al pasar el raton */
.cta-catalogo::after{
  content:"";
  position:absolute;
  inset:0 auto 0 -60%;
  width:55%;
  z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg);
  transition:left 620ms cubic-bezier(.4,0,.2,1);
}
.cta-catalogo:hover{
  color:#fff;
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(221,142,0,.42);
}
.cta-catalogo:hover::after{ left:110%; }

.cta-catalogo-icono{
  flex:0 0 auto;
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:var(--radio-full);
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.35);
}
.cta-catalogo-icono svg{ display:block; }
/* La flecha baja al pasar el raton: refuerza la idea de descarga */
.cta-catalogo:hover .cta-catalogo-icono svg{ animation:bajar-flecha 900ms ease-in-out infinite; }
@keyframes bajar-flecha{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(3px); }
}

.cta-catalogo-texto{ display:block; text-align:left; }
.cta-catalogo-titulo{
  display:block;
  font-size:.9375rem;
  font-weight:700;
  line-height:1.3;
  white-space:nowrap;
}
.cta-catalogo-sub{
  display:block;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
  line-height:1.4;
}

/* --- Contacto de cabecera: tarjetas pulsables ---------------------------- */
.header-contact-info ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--e3);
  justify-content:center;
}
@media (min-width:768px){
  .header-contact-info ul{ justify-content:flex-start; }
}
.header-contact-info li{ margin:0; }
.header-contact-info li > a{
  display:flex;
  align-items:center;
  gap:var(--e3);
  padding:var(--e3) var(--e4);
  background:var(--fondo-alt);
  border:1px solid var(--borde-suave);
  border-radius:var(--radio);
  text-decoration:none;
  transition:border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion), background var(--transicion);
}
.header-contact-info li > a:hover{
  border-color:var(--azul);
  background:var(--fondo);
  box-shadow:var(--sombra-2);
  transform:translateY(-2px);
  text-decoration:none;
}
.header-contact-info .iocn-holder{
  flex:0 0 auto;
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:var(--radio-full);
  background:var(--azul-tenue);
  color:var(--azul-oscuro);
  transition:background var(--transicion), color var(--transicion);
}
.header-contact-info li > a:hover .iocn-holder{ background:var(--ambar-tenue); color:var(--ambar-oscuro); }
.header-contact-info .text-holder{ display:block; max-width:none; }
.header-contact-info .etiqueta{
  display:block;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--apagado);
  line-height:1.3;
}
.header-contact-info .dato{
  display:block;
  font-size:.9375rem;
  font-weight:600;
  color:var(--tinta);
  line-height:1.35;
  white-space:nowrap;
}

/* El acceso de clientes destaca como llamada a la accion */
.header-contact-info .acceso-cliente > a{
  background:var(--ambar-tenue);
  border-color:#f0d9a8;
}
.header-contact-info .acceso-cliente .iocn-holder{ background:var(--ambar); color:#fff; }
.header-contact-info .acceso-cliente > a:hover{ border-color:var(--ambar); background:#fff; }
.header-contact-info .acceso-cliente > a:hover .iocn-holder{ background:var(--ambar-oscuro); color:#fff; }

/* --------------------------------------------------------------------------
   6. Menu principal
   -------------------------------------------------------------------------- */
.mainmenu-area{
  background:var(--azul);
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:var(--sombra-1);
}
.mainmenu-area.stricky-fixed{ box-shadow:var(--sombra-2); }

.navbar-header{ display:flex; align-items:center; justify-content:space-between; }

/* Boton hamburguesa: area de pulsacion amplia (44px minimo) */
.navbar-toggle{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:48px; height:48px;
  margin:6px 0;
  padding:0 12px;
  background:transparent;
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radio-sm);
  cursor:pointer;
}
.navbar-toggle .icon-bar{
  display:block;
  height:2px;
  width:100%;
  background:#fff;
  border-radius:2px;
  transition:transform var(--transicion), opacity var(--transicion);
}
.navbar-toggle:hover{ background:rgba(255,255,255,.14); }

.navigation{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.navigation li{ margin:0; }
.navigation li a{
  display:block;
  padding:var(--e3) var(--e4);
  color:#fff;
  font-weight:500;
  font-size:.9375rem;
  letter-spacing:.01em;
  border-radius:var(--radio-sm);
  transition:background var(--transicion), color var(--transicion);
}
.navigation li a:hover,
.navigation li a:focus-visible{
  background:rgba(255,255,255,.16);
  color:#fff;
  text-decoration:none;
}
/* Pagina actual: ambar de marca, con subrayado grueso para no depender solo del color */
.navigation li.current > a{
  background:var(--ambar);
  color:#fff;
  font-weight:700;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
}
.navigation li.current > a:hover{ background:var(--ambar-oscuro); }

/* Colapso del menu en movil (compatible con el toggle de Bootstrap: clase .in) */
.navbar-collapse{ padding:0 0 var(--e3); }
.collapse{ display:none; }
.collapse.in{ display:block; }
.collapsing{ height:0; overflow:hidden; transition:height var(--transicion); }

@media (min-width:768px){
  .navbar-toggle{ display:none; }
  .navbar-collapse{ padding:0; }
  .navbar-collapse.collapse{ display:block !important; height:auto !important; overflow:visible !important; }
  .navigation{ flex-direction:row; flex-wrap:wrap; gap:var(--e1); align-items:center; }
  /* En escritorio hay sitio de sobra: menu mas grande y legible */
  .navigation li a{
    padding:var(--e4) var(--e5);
    font-size:1.0625rem;
    font-weight:600;
    border-radius:0;
  }
  .navigation li.current > a{ border-radius:0; }
}

/* --------------------------------------------------------------------------
   7. Secciones de contenido
   -------------------------------------------------------------------------- */
.video-gallery-area{ padding:var(--e8) 0; }
.video-gallery-area .row{ align-items:flex-start; gap:var(--e5) 0; }

/* Columna de texto: medida de linea comoda para leer */
.text-holder{ max-width:68ch; }

/* Texto de presentacion: es largo, asi que se prioriza la comodidad de
   lectura — cuerpo algo mayor, interlineado amplio y aire entre parrafos. */
.text-holder .top-text{
  font-size:1.0625rem;
  line-height:1.85;
  color:var(--tinta-suave);
  /* Justificado a ambos lados; con guionado automatico (el documento declara
     lang="es") para evitar los huecos grandes entre palabras. */
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.text-holder .top-text p{ margin-bottom:var(--e5); }
.text-holder .top-text p:last-child{ margin-bottom:0; }

/* Todos los parrafos comparten el mismo formato: el HTML del editor se
   normaliza en PHP (normalizar_parrafos), no hace falta ningun caso especial. */
/* El texto llega de la base de datos con HTML mal cerrado y genera parrafos
   fantasma vacios; se ocultan para que no abran huecos en la maqueta. */
.top-text p:empty{ display:none; }
.text-holder .top-text img{ border-radius:var(--radio-sm); }
.text-holder .top-text a img{ transition:transform var(--transicion); }
.text-holder .top-text a:hover img{ transform:scale(1.04); }

/* Enlace al catalogo en PDF: se presenta como boton, no como imagen suelta */
.text-holder .top-text a:has(> img[src*="adobe"]){
  display:inline-flex;
  align-items:center;
  gap:var(--e2);
  margin-top:var(--e2);
}

.titulo2{
  font-size:1.375rem;
  font-weight:700;
  color:var(--tinta);
  margin:0;
}

.rev_slider_wrapper{ margin:0; }
.rev_slider_wrapper:empty{ display:none; }

/* --- Portada: dos columnas, texto e imagenes ----------------------------- */
.home-split{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--e6);
  align-items:start;
}
@media (min-width:992px){
  .home-split{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--e7); }
  /* Las imagenes quedan fijas mientras se desplaza el texto, de modo que
     acompanan a la lectura en lugar de dejar un hueco vacio a la derecha. */
  .home-media{
    position:sticky;
    top:calc(var(--alto-nav) + var(--e4));
  }
}
.home-texto .text-holder{ max-width:none; }

/* Aviso de acceso a pedidos online: encabeza la columna de imagenes */
.aviso-destacado{
  margin:0 0 var(--e4);
  padding:var(--e4) var(--e5);
  font-size:1rem;
  font-weight:600;
  line-height:1.5;
  color:var(--tinta);
  background:#fff6e7;
  border:1px solid #f0d9a8;
  border-left:5px solid var(--ambar);
  border-radius:0 var(--radio) var(--radio) 0;
}

/* Boton de descarga del catalogo (sustituye al icono suelto de Acrobat) */
.boton-catalogo{
  display:inline-flex;
  align-items:center;
  gap:var(--e2);
  padding:var(--e3) var(--e5);
  min-height:46px;
  font-weight:600;
  color:#fff;
  background:var(--azul);
  border-radius:var(--radio-sm);
  box-shadow:var(--sombra-1);
  transition:background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton-catalogo::before{
  content:"\f10d";
  font-family:"Flaticon";
  font-size:1rem;
  display:none;
}
.boton-catalogo:hover{
  background:var(--azul-oscuro);
  color:#fff;
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:var(--sombra-2);
}

/* Galeria de instalaciones — rejilla nativa, sin JavaScript.
   Sustituye al carrusel "ism-slider", que dependia de una libreria de 2015. */
.galeria{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--e3);
}
.galeria li{ margin:0; }
.galeria img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radio);
  box-shadow:var(--sombra-1);
  background:var(--fondo-alt);
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.galeria img:hover{ transform:scale(1.02); box-shadow:var(--sombra-3); }

/* --- Paginas de producto: una sola columna, imagenes a todo el ancho ------ */
.pagina-producto .text-holder{ max-width:none; }
.pagina-producto .galeria{ margin-top:var(--e6); }

/* Sin columna lateral, las fichas se reparten el ancho completo del
   contenedor: dos por fila en escritorio y una en movil. */
.galeria--ancha{
  grid-template-columns:repeat(auto-fit, minmax(420px, 1fr));
  gap:var(--e5);
}
@media (max-width:575px){
  .galeria--ancha{ grid-template-columns:1fr; }
}

/* Fichas de producto: se muestran enteras (llevan texto y precios que no se
   pueden recortar), a diferencia de las fotos de instalaciones. */
.galeria--producto img{
  aspect-ratio:auto;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--borde-suave);
}

@media (max-width:575px){
  .galeria{ grid-template-columns:1fr; }
  .galeria img{ aspect-ratio:16/10; }
  .galeria--producto img{ aspect-ratio:auto; }
}

/* Mapa de Google: responsivo y encajado en el sistema */
.googlemaps{
  border-radius:var(--radio);
  overflow:hidden;
  box-shadow:var(--sombra-2);
  border:1px solid var(--borde);
}
.googlemaps iframe{
  display:block;
  width:100%;
  height:min(70vh,450px);
  border:0;
}

/* --------------------------------------------------------------------------
   8. Formularios (contacto y acceso de clientes)
   -------------------------------------------------------------------------- */
.form-container{
  background:var(--fondo);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra-1);
  padding:var(--e6);
  max-width:560px;
}
.form-container br{ display:none; } /* el espaciado lo controla el CSS, no los <br> */

.form-title{
  font-size:.875rem;
  font-weight:600;
  color:var(--tinta);
  margin:var(--e4) 0 var(--e2);
}
.form-title:first-child{ margin-top:0; }
.form-title .titulo2{ margin-bottom:var(--e2); }
.form-container > .form-title:first-child{
  padding-bottom:var(--e4);
  margin-bottom:var(--e5);
  border-bottom:2px solid var(--borde-suave);
}

.form-field{
  display:block;
  width:100%;
  padding:var(--e3) var(--e4);
  margin-bottom:var(--e4);
  font-size:1rem;
  color:var(--tinta);
  background:var(--fondo);
  border:1px solid var(--borde);
  border-radius:var(--radio-sm);
  transition:border-color var(--transicion), box-shadow var(--transicion);
  min-height:46px; /* objetivo tactil comodo */
}
.form-field::placeholder{ color:var(--apagado); opacity:1; }
.form-field:hover{ border-color:#c9ced3; }
.form-field:focus{
  outline:none;
  border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(32,158,216,.18);
}
textarea.form-field{ min-height:120px; resize:vertical; }

.submit-container{
  display:flex;
  flex-direction:column;
  gap:var(--e4);
  margin-top:var(--e5);
  padding-top:var(--e5);
  border-top:1px solid var(--borde-suave);
}
.submit-container input[type="checkbox"]{
  width:20px; height:20px;
  margin:0 var(--e2) 0 0;
  accent-color:var(--azul);
  vertical-align:-4px;
  cursor:pointer;
}
.submit-container > a{
  font-size:.875rem;
  color:var(--tinta-suave);
  line-height:1.5;
}

/* Boton principal */
.submit-button{
  display:inline-block;
  align-self:flex-start;
  padding:var(--e3) var(--e7);
  min-height:48px;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  background:var(--ambar);
  border:0;
  border-radius:var(--radio-sm);
  cursor:pointer;
  box-shadow:var(--sombra-1);
  transition:background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.submit-button:hover{ background:var(--ambar-oscuro); box-shadow:var(--sombra-2); transform:translateY(-1px); }
.submit-button:active{ transform:translateY(0); box-shadow:var(--sombra-1); }
.submit-button:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* Mensajes de respuesta del formulario */
#mensaje:not(:empty){
  margin-top:var(--e4);
  padding:var(--e3) var(--e4);
  border-radius:var(--radio-sm);
  background:var(--azul-tenue);
  border-left:4px solid var(--azul);
  font-size:.9375rem;
  color:var(--tinta);
}
/* Aviso de error: rojo, para que no se confunda con un mensaje informativo */
#mensaje.error:not(:empty){
  background:#fdecec;
  border-left-color:#c0392b;
  color:#8e2b21;
  font-weight:500;
}
/* Boton deshabilitado mientras se comprueban las credenciales */
.submit-button[disabled]{ opacity:.65; cursor:progress; }

/* --------------------------------------------------------------------------
   9. Pie de pagina
   -------------------------------------------------------------------------- */
.footer-area{
  background:var(--azul);
  color:rgba(255,255,255,.92);
  padding:var(--e8) 0 var(--e5);
  margin-top:var(--e8);
}
.footer-area a{ color:rgba(255,255,255,.92); }
.footer-area a:hover{ color:#fff; text-decoration:underline; }

/* Rejilla del pie: 4 columnas en escritorio, 2 en tableta, 1 en movil */
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:var(--e6) var(--e5);
  align-items:start;
}

.single-footer-widget{ margin-bottom:0; }
.single-footer-widget .title h3{
  font-size:1rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:var(--e4);
  padding-bottom:var(--e3);
  border-bottom:2px solid rgba(255,255,255,.28);
}

.services-list,
.footer-contact-info{ list-style:none; margin:0; padding:0; }
.services-list li{ margin-bottom:var(--e2); }
.services-list li a{
  display:inline-block;
  padding-left:1.1rem;
  position:relative;
  font-size:.9375rem;
}
.services-list li a::before{
  content:"";
  position:absolute; left:0; top:.6em;
  border:5px solid transparent;
  border-left-color:var(--ambar);
}
.services-list li a:hover{ padding-left:1.35rem; transition:padding var(--transicion); }

.footer-contact-info li{
  display:flex;
  gap:var(--e3);
  align-items:flex-start;
  margin-bottom:var(--e4);
}
.footer-contact-info .icon-holder{
  flex:0 0 auto;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:var(--radio-full);
  background:rgba(255,255,255,.16);
  color:#fff;
}
.footer-contact-info .icon-holder::before{ color:var(--ambar); }
.footer-contact-info .text-holder{ max-width:none; }
.footer-contact-info .text-holder h5{
  margin:0;
  font-size:.9375rem;
  font-weight:400;
  line-height:1.55;
  color:rgba(255,255,255,.92);
}
.footer-contact-info .text-holder h5 span{
  display:block;
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ambar-tenue);
}

/* Sellos de certificacion: fondo blanco para que se lean sobre el azul */
.footer-sellos img{
  display:block;
  width:100%;
  max-width:190px;
  height:auto;
  background:#fff;
  padding:var(--e2);
  border-radius:var(--radio-sm);
  margin-bottom:var(--e3);
}

/* Bloque de ayudas y subvenciones, a todo el ancho bajo la rejilla */
.footer-ayudas{
  margin-top:var(--e7);
  padding-top:var(--e5);
  border-top:1px solid rgba(255,255,255,.24);
}
.footer-ayudas .services-list{ max-width:70ch; }
.footer-ayudas .nota{
  display:block;
  font-size:.75rem;
  opacity:.85;
  margin-top:var(--e1);
}
.footer-ayudas img{
  margin-top:var(--e4);
  max-width:560px;
  width:100%;
  background:#fff;
  padding:var(--e2);
  border-radius:var(--radio-sm);
}

.footer-bottom{
  margin-top:var(--e5);
  padding-top:var(--e4);
  border-top:1px solid rgba(255,255,255,.24);
}
.copyright-text{
  margin:0;
  font-size:.875rem;
  color:rgba(255,255,255,.8);
}

/* --------------------------------------------------------------------------
   10. Boton "volver arriba"
   -------------------------------------------------------------------------- */
.scroll-to-top{
  position:fixed;
  right:var(--e5); bottom:var(--e5);
  z-index:1001;
  width:48px; height:48px;
  display:grid; place-items:center;
  background:var(--ambar);
  color:#fff;
  border-radius:var(--radio-sm);
  box-shadow:var(--sombra-2);
  cursor:pointer;
  transition:background var(--transicion), transform var(--transicion);
}
.scroll-to-top:hover{ background:var(--ambar-oscuro); transform:translateY(-2px); color:#fff; text-decoration:none; }
/* Flecha dibujada en CSS: evita depender de toda la fuente Font Awesome */
.scroll-to-top .fa{ display:none; }
.scroll-to-top::before{
  content:"";
  width:11px; height:11px;
  border-top:2.5px solid currentColor;
  border-left:2.5px solid currentColor;
  transform:translateY(3px) rotate(45deg);
}

/* --------------------------------------------------------------------------
   11. Utilidades y ajustes finales
   -------------------------------------------------------------------------- */
/* El preloader se ha eliminado del marcado; esta regla neutraliza cualquier
   resto que pudiera quedar en una pagina no actualizada. */
.preloader{ display:none !important; }

@media (max-width:767px){
  .video-gallery-area{ padding:var(--e6) 0; }
  .footer-area{ padding-top:var(--e6); margin-top:var(--e6); }
  .form-container{ padding:var(--e5); }
  .scroll-to-top{ right:var(--e4); bottom:var(--e4); }
  .text-holder{ max-width:none; }
}

@media print{
  .mainmenu-area,.scroll-to-top,.footer-area,.header-contact-info{ display:none; }
  body{ color:#000; }
}