/* Instalaciones Dosa — réplica estática de la web original (Elementor) */

/* Roboto alojada en local (sin llamadas a Google Fonts). 600 usa el archivo 700. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../fonts/roboto-latin-700.woff2") format("woff2"); }

:root {
  --primary: #A7140A;
  --secondary: #E39B17;
  --text: #180301;
  --accent: #6F0D06;
  --grey: #EAEAEA;
  --white: #FFFFFF;
  --max: 1140px;
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--primary); font-weight: 500; text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }

h1, h2, h3, h4, h5 { font-weight: 600; line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
p { margin: 0 0 .9rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--white); padding: .5rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 10px; }

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Cabecera ---------- */
.site-header {
  background-image: linear-gradient(170deg, var(--primary) 0%, var(--secondary) 100%);
  padding: 30px;
  margin-bottom: 30px;
  color: var(--white);
}
.site-header .container { padding: 0; }

.contact-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px 20px;
  padding: 10px 10px 40px;
}
.contact-item {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
}
.contact-item:hover { color: var(--white); text-decoration: underline; }
.contact-item .icon { font-size: 24px; }

.header-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.header-anim, .header-brand { width: 50%; padding: 10px; }
.header-anim { display: flex; justify-content: center; }
.lottie { width: 70%; aspect-ratio: 1 / 1; }
.header-brand { text-align: end; }
.header-brand a { display: inline-block; width: 55%; }
.header-brand img { width: 100%; }
.header-brand h1 {
  color: var(--white);
  font-size: 45px;
  margin: 20px 0 0;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Titulares animados ---------- */
.headline { text-align: center; font-weight: 600; }
.headline .plain { color: var(--primary); }
.headline .dynamic {
  position: relative;
  display: inline-block;
  z-index: 1;
  padding: 0 .1em;
}
.headline svg.marker {
  position: absolute;
  top: 50%; left: 50%;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
  fill: none;
  stroke: var(--secondary);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.headline svg.marker path { stroke-dasharray: 1500; stroke-dashoffset: 1500; }
.headline svg.marker.draw path { animation: draw-marker 1.2s forwards; }
.headline svg.marker.fade path { stroke-dashoffset: 0; opacity: 0; transition: opacity .4s; }
@keyframes draw-marker { to { stroke-dashoffset: 0; } }

/* Círculo alrededor del texto */
.marker-circle { width: calc(100% + 20px); height: calc(100% + 20px); transform: translate(-50%, -50%); }
/* Subrayado en zigzag debajo del texto */
.marker-zigzag { width: 100%; height: 100%; transform: translate(-50%, -40%); }

.intro { padding: 10px; }
.intro .row { display: flex; flex-wrap: wrap; align-items: center; }
.intro .col { width: 50%; padding: 10px; }
.intro .headline { font-size: 2.3rem; margin: 0; }
.intro .headline .dynamic { color: var(--primary); }
.intro h3 { text-align: center; color: var(--text); font-size: 1.75rem; }

/* ---------- Colaboradores + botones ---------- */
.partners { margin-bottom: 30px; }
.partners .box {
  display: flex;
  flex-wrap: wrap;
  background: var(--grey);
  padding: 30px;
}
.partners .half {
  width: 50%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.partners .actions { flex-direction: row; flex-wrap: wrap; }
.partners h4 { text-align: center; color: var(--text); margin: 0; }
.partners img { width: 50%; max-width: 220px; }

.btn {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  padding: 20px;
  border-radius: 3px;
  line-height: 1;
  transition: background-color .3s;
}
.btn:hover, .btn:focus { background: var(--accent); color: var(--white); text-decoration: none; }

/* ---------- Bloque rojo "Experiencia" ---------- */
.shape-top {
  position: relative;
  background: var(--primary);
  height: 70px;
  overflow: hidden;
}
.shape-top svg {
  position: absolute;
  top: -1px; left: 0;
  width: calc(100% + 1.3px);
  height: 30px;
  fill: var(--white);
  transform: translateX(-50%);
  left: 50%;
  display: block;
}

.experience {
  background: var(--primary);
  color: var(--white);
  padding: 0 0 30px;
}
.experience .container { max-width: 800px; }
.experience h2 { text-align: center; color: var(--white); }
.experience p { text-align: center; }
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.feature { text-align: center; }
.feature .icon { font-size: 50px; color: var(--white); margin: 0 auto 15px; }
.feature h5 { color: var(--white); font-size: 1.25rem; margin: 0; }

/* ---------- Servicios ---------- */
.service { margin: 40px; }
.service .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.service.reverse .container { flex-direction: row-reverse; }
.service .pic { width: 20%; padding: 10px; }
.service .body { width: 66.6666%; padding: 0 10px; }
.service.reverse .body { width: 45%; }
.service h4 { color: var(--primary); }
.service ul { margin: 0; padding-left: 1.2em; }
.service li { margin-bottom: .1rem; }

/* ---------- Aerotermia ---------- */
.banner { margin-bottom: 20px; }
.banner .box { background: var(--secondary); padding: 30px 70px; color: var(--white); text-align: center; }
.banner h2 { color: var(--white); margin-bottom: 30px; }
.banner p { margin: 0; }

/* ---------- Contacto ---------- */
.contact { margin-bottom: 40px; }
.contact .box { background: var(--grey); padding: 30px 70px; text-align: center; }
.contact .headline { font-size: 1.75rem; margin-bottom: 20px; }
.contact .headline .dynamic { color: var(--accent); }
.contact-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px 20px;
  margin: 10px 0 20px;
}
.contact-list .contact-item { color: var(--primary); }
.contact-list .contact-item:hover { color: var(--accent); }

/* ---------- Mapa ---------- */
.map iframe { display: block; width: 100%; height: 500px; border: 0; }

/* ---------- Pie ---------- */
.site-footer {
  background: var(--primary);
  color: var(--white);
  text-align: center;
  padding: 10px;
}
.site-footer p { margin: 10px 0; }
.site-footer a { color: var(--white); }

/* ---------- Modales de textos legales ---------- */
.modal {
  width: min(860px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  background: var(--white);
  box-shadow: 0 20px 60px rgba(24, 3, 1, .35);
  overflow: hidden;
}
.modal[open] { display: flex; flex-direction: column; animation: modal-in .25s ease; }
.modal::backdrop { background: rgba(24, 3, 1, .6); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body:has(.modal[open]) { overflow: hidden; }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 16px 24px;
  background-image: linear-gradient(170deg, var(--primary) 0%, var(--secondary) 100%);
  color: var(--white);
  flex: none;
}
.modal-head h2 { margin: 0; font-size: 1.6rem; color: var(--white); }
.modal-close {
  flex: none;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: var(--white);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s;
}
.modal-close:hover, .modal-close:focus-visible { background: rgba(255, 255, 255, .35); outline: none; }

.modal-body { padding: 8px 24px 28px; overflow-y: auto; overscroll-behavior: contain; font-size: 17px; }
.legal h3 { color: var(--primary); font-size: 1.3rem; margin-top: 1.8rem; }
.legal h4 { font-size: 1.1rem; margin-top: 1.4rem; }
.legal a { word-break: break-word; }
.legal .legal-updated { margin: 12px 0 16px; font-size: 14px; color: #6b5a58; }

@media (max-width: 767px) {
  .modal { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .modal-head { padding: 12px 12px 12px 16px; }
  .modal-head h2 { font-size: 1.3rem; }
  .modal-body { padding: 4px 16px 24px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }

/* ---------- Animaciones de entrada ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.visible { opacity: 1; transform: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .lottie { width: 100%; }
  .header-brand a { width: 75%; }
  .service .body, .service.reverse .body { width: 100%; }
  .service.reverse .container { flex-direction: row; }
  .service .pic { width: 30%; }
  .contact-list { flex-direction: column; align-items: center; }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
  h1 { font-size: 2rem; }
  .site-header { padding: 20px 16px 30px; }

  /* Contacto en móvil: rejilla de botones (teléfonos en 2 columnas, correo y dirección a lo ancho) */
  .contact-bar, .contact-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 0 24px;
    margin: 0;
  }
  .contact-list { margin: 16px 0 20px; padding: 0; }
  .contact-bar .contact-item, .contact-list .contact-item {
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.25;
    border-radius: 10px;
    text-align: left;
  }
  .contact-bar .contact-item {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
  }
  .contact-list .contact-item {
    background: var(--white);
    border: 1px solid rgba(167, 20, 10, .25);
  }
  .contact-bar .contact-item:hover, .contact-list .contact-item:hover { text-decoration: none; }
  .contact-bar .contact-item:active { background: rgba(255, 255, 255, .25); }
  .contact-list .contact-item:active { background: #f6e3e1; }
  .contact-item .icon { font-size: 18px; }
  /* el correo y la dirección ocupan las dos columnas */
  .contact-item[href^="mailto:"], .contact-item[href*="maps"] { grid-column: 1 / -1; }
  .contact-item[href*="maps"] { font-size: 15px; font-weight: 500; }

  .map iframe { height: 340px; }
  .header-anim, .header-brand { width: 100%; }
  .header-brand, .header-brand h1 { text-align: center; }
  .header-brand a { width: 100%; }
  .header-brand h1 { font-size: 36px; }
  .intro .col { width: 100%; }
  .intro .headline { font-size: 1.9rem; }
  .intro h3 { font-size: 1.4rem; }
  .partners .box { padding: 20px 10px; }
  .partners .half { width: 100%; }
  .experience { padding: 20px 16px; }
  .features { grid-template-columns: 1fr; gap: 10px; }
  .service { margin: 0; padding: 20px 6px; }
  .service .pic { width: 50%; margin: 0 auto; }
  .service .body { padding: 0 10px; }
  .banner .box, .contact .box { padding: 20px; }
  .banner h2 { font-size: 1.6rem; }
}

/* Móviles muy estrechos: todo en una columna */
@media (max-width: 340px) {
  .contact-bar, .contact-list { grid-template-columns: 1fr; }
}