/* ==========================================================================
   Terraform · Reformas en Lanzarote
   Hoja de estilos basada en marca/identidad-visual.md
   Colores, tipografías y formas: NO modificar sin actualizar la guía.
   ========================================================================== */

:root {
  --tf-naranja:     #F36B21;
  --tf-naranja-osc: #D45813;
  --tf-antracita:   #202124;
  --tf-negro:       #111111;
  --tf-blanco:      #FFFFFF;
  --tf-gris-claro:  #F5F5F3;
  --tf-gris-texto:  #6B6B6B;
  --tf-borde:       #E4E4E0;

  --tf-font-titulo: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tf-font-texto:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --tf-radio: 10px;
  --tf-ancho: 1180px;
  --tf-sombra: 0 1px 3px rgba(32, 33, 36, .06), 0 8px 24px rgba(32, 33, 36, .05);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--tf-font-texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tf-antracita);
  background: var(--tf-blanco);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--tf-naranja); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--tf-font-titulo);
  color: var(--tf-antracita);
  line-height: 1.15;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); letter-spacing: -.015em; }
h2 { font-weight: 700; font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.25rem); letter-spacing: -.01em; }
h3 { font-weight: 600; font-size: 1.2rem; }

p { margin: 0 0 1em; }
p.grande { font-size: 1.12rem; }
.secundario { color: var(--tf-gris-texto); }

.contenedor { width: 100%; max-width: var(--tf-ancho); margin: 0 auto; padding: 0 20px; }

section { padding: clamp(56px, 7vw, 96px) 0; }
.fondo-claro   { background: var(--tf-gris-claro); }
.fondo-oscuro  { background: var(--tf-antracita); color: var(--tf-blanco); }
.fondo-oscuro h2, .fondo-oscuro h3 { color: var(--tf-blanco); }
.fondo-oscuro .secundario { color: #B8B9BC; }

/* --- Guion naranja antes de los títulos de sección (lenguaje de formas) --- */
.rotulo {
  font-family: var(--tf-font-titulo);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tf-naranja);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.rotulo::before {
  content: "";
  width: 28px; height: 4px;
  background: var(--tf-naranja);
  flex: none;
}

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--tf-font-texto); font-weight: 600; font-size: 1rem;
  padding: 14px 26px; border-radius: var(--tf-radio);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn--principal { background: var(--tf-naranja); color: var(--tf-blanco); }
.btn--principal:hover { background: var(--tf-naranja-osc); }
.btn--linea { background: transparent; color: var(--tf-antracita); border-color: var(--tf-antracita); }
.btn--linea:hover { background: var(--tf-antracita); color: var(--tf-blanco); }
.btn--linea-claro { background: transparent; color: var(--tf-blanco); border-color: rgba(255,255,255,.45); }
.btn--linea-claro:hover { background: var(--tf-blanco); color: var(--tf-antracita); }
.btn svg { width: 19px; height: 19px; flex: none; }

/* ==========================================================================
   Barra de contacto + cabecera
   ========================================================================== */

.barra-util {
  background: var(--tf-antracita);
  color: var(--tf-blanco);
  border-bottom: 4px solid var(--tf-naranja);
  font-size: .88rem;
}
.barra-util .contenedor {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  align-items: center; justify-content: space-between;
  min-height: 44px; padding-top: 6px; padding-bottom: 6px;
}
.barra-util a { color: var(--tf-blanco); font-weight: 500; }
.barra-util .tel { font-weight: 600; letter-spacing: .01em; }
.barra-util .dato { display: inline-flex; align-items: center; gap: 7px; color: #C9CACD; }
.barra-util .dato strong { color: var(--tf-blanco); font-weight: 500; }
.barra-util svg { width: 15px; height: 15px; flex: none; }

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--tf-borde);
}
.cabecera .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 76px;
}

/* Bloque de marca: monograma original + denominación en Montserrat.
   El monograma NUNCA se deforma ni se recolorea. */
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca:hover { text-decoration: none; }
.marca img { width: 40px; height: 40px; object-fit: contain; }
.marca .nombre {
  font-family: var(--tf-font-titulo); font-weight: 700; font-size: 1.06rem;
  letter-spacing: .22em; color: var(--tf-antracita); line-height: 1.1;
}
.marca .lugar {
  font-family: var(--tf-font-titulo); font-weight: 600; font-size: .58rem;
  letter-spacing: .34em; color: var(--tf-naranja); line-height: 1.4;
}

.menu { display: flex; align-items: center; gap: 28px; }
.menu a {
  font-weight: 500; font-size: .97rem; color: var(--tf-antracita);
  text-decoration: none; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.menu a:hover { border-bottom-color: var(--tf-naranja); text-decoration: none; }
.cabecera .btn { padding: 11px 20px; font-size: .95rem; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { background: var(--tf-gris-claro); padding: clamp(48px, 6vw, 84px) 0; }
.hero .contenedor {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero h1 { margin-bottom: .35em; }
.hero .entradilla { font-size: 1.14rem; color: #3C3D42; max-width: 33em; }
.hero .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; }
.hero .apoyo { font-size: .92rem; color: var(--tf-gris-texto); margin: 0; }
.hero figure { margin: 0; position: relative; }
.hero figure img {
  width: 100%; border-radius: var(--tf-radio);
  box-shadow: var(--tf-sombra); object-fit: cover;
  aspect-ratio: 4 / 5;
}
.hero figcaption {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(32,33,36,.9); color: var(--tf-blanco);
  font-size: .82rem; font-weight: 500;
  padding: 8px 13px; border-radius: 7px;
}

/* ==========================================================================
   Compromisos (los cuatro miedos del cliente)
   ========================================================================== */

.compromisos { padding: clamp(44px, 5vw, 68px) 0; border-bottom: 1px solid var(--tf-borde); }
.rejilla-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.compromiso {
  border: 1px solid var(--tf-borde); border-radius: var(--tf-radio);
  padding: 24px 22px; background: var(--tf-blanco);
}
.compromiso .icono {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(243,107,33,.11); color: var(--tf-naranja);
  display: grid; place-items: center; margin-bottom: 14px;
}
.compromiso .icono svg { width: 20px; height: 20px; }
.compromiso h3 { font-size: 1.03rem; margin-bottom: .35em; }
.compromiso p { font-size: .94rem; color: var(--tf-gris-texto); margin: 0; }

/* ==========================================================================
   Servicios
   ========================================================================== */

.cabecera-seccion { max-width: 44em; margin-bottom: 42px; }
.cabecera-seccion p { color: var(--tf-gris-texto); margin: 0; }

.rejilla-servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.servicio {
  background: var(--tf-blanco); border: 1px solid var(--tf-borde);
  border-radius: var(--tf-radio); overflow: hidden;
  display: flex; flex-direction: column;
}
.servicio img { width: 100%; height: 208px; object-fit: cover; }
.servicio .cuerpo { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.servicio h3 { margin-bottom: .4em; }
.servicio p { font-size: .95rem; color: var(--tf-gris-texto); flex: 1; }
.servicio .enlace {
  font-weight: 600; font-size: .93rem; color: var(--tf-naranja);
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
}

/* ==========================================================================
   Proceso
   ========================================================================== */

.pasos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; counter-reset: paso; }
.paso { position: relative; }
.paso .num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--tf-naranja); color: var(--tf-blanco);
  font-family: var(--tf-font-titulo); font-weight: 700; font-size: 1.02rem;
  display: grid; place-items: center; margin-bottom: 14px;
}
.paso h3 { font-size: 1.02rem; margin-bottom: .3em; }
.paso p { font-size: .93rem; color: var(--tf-gris-texto); margin: 0; }
.fondo-oscuro .paso p { color: #B8B9BC; }

/* ==========================================================================
   Trabajos
   ========================================================================== */

.rejilla-trabajos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.trabajo {
  border-radius: var(--tf-radio); overflow: hidden;
  border: 1px solid var(--tf-borde); background: var(--tf-blanco);
}
.trabajo > img { width: 100%; height: 300px; object-fit: cover; }
.trabajo .info { padding: 20px 22px; }
.trabajo h3 { font-size: 1.08rem; margin-bottom: .25em; }
.trabajo .lugar {
  font-family: var(--tf-font-titulo); font-weight: 600;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tf-naranja); margin-bottom: 6px;
}
.trabajo p { font-size: .94rem; color: var(--tf-gris-texto); margin: 0; }

/* Antes / después: siempre en dos columnas, también en móvil */
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--tf-borde); }
.par figure { margin: 0; position: relative; }
.par img { width: 100%; height: 300px; object-fit: cover; }
.etiqueta {
  position: absolute; left: 10px; top: 10px;
  font-family: var(--tf-font-titulo); font-weight: 600;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 5px;
}
.etiqueta--antes   { background: rgba(32,33,36,.88); color: var(--tf-blanco); }
.etiqueta--despues { background: var(--tf-naranja);  color: var(--tf-blanco); }

/* ==========================================================================
   Quiénes somos
   ========================================================================== */

.somos .contenedor {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(30px, 5vw, 60px); align-items: center;
}
.fotos-somos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fotos-somos img { border-radius: var(--tf-radio); width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.somos ul { list-style: none; padding: 0; margin: 22px 0 0; }
.somos li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: .98rem; color: #3C3D42;
}
.somos li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--tf-naranja);
}

/* ==========================================================================
   Preguntas frecuentes
   ========================================================================== */

.faq { max-width: 800px; }
.faq details {
  border-bottom: 1px solid var(--tf-borde);
  padding: 4px 0;
}
.faq summary {
  font-family: var(--tf-font-titulo); font-weight: 600; font-size: 1.06rem;
  padding: 18px 34px 18px 0; cursor: pointer; list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 15px;
  font-size: 1.5rem; font-weight: 400; color: var(--tf-naranja); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--tf-gris-texto); padding-bottom: 16px; margin: 0; font-size: .98rem; }

/* ==========================================================================
   Contacto
   ========================================================================== */

.contacto .contenedor {
  display: grid; grid-template-columns: 1fr .85fr;
  gap: clamp(32px, 5vw, 60px); align-items: start;
}
.formulario {
  background: var(--tf-blanco); border: 1px solid var(--tf-borde);
  border-radius: var(--tf-radio); padding: 28px; box-shadow: var(--tf-sombra);
}
.campo { margin-bottom: 16px; }
.campo label {
  display: block; font-weight: 500; font-size: .9rem;
  margin-bottom: 6px; color: var(--tf-antracita);
}
.campo input, .campo select, .campo textarea {
  width: 100%; font-family: var(--tf-font-texto); font-size: 1rem;
  padding: 11px 13px; border: 1px solid #D8D8D4; border-radius: 8px;
  background: var(--tf-blanco); color: var(--tf-antracita);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--tf-naranja); outline-offset: 1px; border-color: var(--tf-naranja);
}
.campo textarea { min-height: 110px; resize: vertical; }
.formulario .btn { width: 100%; margin-top: 6px; }
.formulario .aviso { font-size: .82rem; color: var(--tf-gris-texto); margin: 12px 0 0; }

.canal {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px; border: 1px solid var(--tf-borde);
  border-radius: var(--tf-radio); margin-bottom: 16px; background: var(--tf-blanco);
}
.canal .icono {
  width: 42px; height: 42px; border-radius: 9px; flex: none;
  background: rgba(243,107,33,.11); color: var(--tf-naranja);
  display: grid; place-items: center;
}
.canal .icono svg { width: 21px; height: 21px; }
.canal h3 { font-size: 1rem; margin-bottom: .2em; }
.canal p { font-size: .93rem; color: var(--tf-gris-texto); margin: 0; }
.canal a { font-weight: 600; }

/* ==========================================================================
   Pie
   ========================================================================== */

.pie { background: var(--tf-antracita); color: #B8B9BC; padding: 56px 0 28px; font-size: .94rem; }
.pie .rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.pie h3 {
  font-family: var(--tf-font-titulo); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tf-blanco);
  margin-bottom: 14px;
}
.pie a { color: #D6D7DA; }
.pie a:hover { color: var(--tf-naranja); }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 9px; }
.pie .marca .nombre { color: var(--tf-blanco); }
.pie .eslogan { margin: 18px 0 0; max-width: 30em; }
.pie .legal {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 40px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .86rem;
}

/* --- Botón flotante de WhatsApp --- */
.wa-flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: bottom .25s ease;
}
.wa-flotante:hover { text-decoration: none; }
.wa-flotante svg { width: 30px; height: 30px; }

/* Se aparta SOLO mientras el aviso de cookies está en pantalla. Al cerrarse,
   la regla deja de aplicar y el botón vuelve solo a su esquina. */
body:has(.cookies--visible) .wa-flotante { bottom: 130px; }
@media (max-width: 900px) {
  body:has(.cookies--visible) .wa-flotante { bottom: 210px; }
}

/* --- Marcador de dato pendiente de confirmar (borrar antes de publicar) --- */
.pendiente {
  background: rgba(243,107,33,.10);
  outline: 1px dashed var(--tf-naranja);
  padding: 0 5px; border-radius: 3px; font-weight: 600; color: var(--tf-naranja-osc);
}

/* --- Accesibilidad --- */
.salto-contenido {
  position: absolute; left: -9999px; top: 0;
  background: var(--tf-antracita); color: #fff; padding: 12px 18px; z-index: 100;
}
.salto-contenido:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--tf-naranja); outline-offset: 2px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  .rejilla-4 { grid-template-columns: repeat(2, 1fr); }
  .rejilla-servicios { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .pie .rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .menu { display: none; }
  .hero .contenedor,
  .somos .contenedor,
  .contacto .contenedor { grid-template-columns: 1fr; }
  .hero figure { order: -1; }
  .hero figure img { aspect-ratio: 3 / 2; }
  .fotos-somos img { aspect-ratio: 3 / 4; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .rejilla-4, .rejilla-servicios, .rejilla-trabajos { grid-template-columns: 1fr; }
  .trabajo > img, .par img { height: 230px; }
  .pasos { grid-template-columns: 1fr; row-gap: 26px; }
  .pie .rejilla { grid-template-columns: 1fr; }
  .barra-util .contenedor { justify-content: center; text-align: center; }
  .barra-util .horario { display: none; }
  .hero .acciones .btn { width: 100%; }
  .cabecera .btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ==========================================================================
   Banner de cookies
   ========================================================================== */

.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--tf-antracita); color: var(--tf-blanco);
  border-top: 4px solid var(--tf-naranja);
  padding: 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px 32px;
  transform: translateY(100%);
  transition: transform .25s ease;
  box-shadow: 0 -6px 26px rgba(0,0,0,.18);
}
.cookies--visible { transform: translateY(0); }
.cookies__texto { max-width: 620px; }
.cookies__texto strong {
  font-family: var(--tf-font-titulo); font-weight: 600;
  display: block; margin-bottom: 4px;
}
.cookies__texto p { margin: 0; font-size: .92rem; color: #C9CACD; }
.cookies__texto a { color: var(--tf-blanco); text-decoration: underline; }
/* Los dos botones tienen el mismo tamaño: rechazar cuesta lo mismo que aceptar. */
.cookies__botones { display: flex; gap: 12px; flex: none; }
.cookies__botones .btn { padding: 12px 26px; min-width: 130px; }

@media (max-width: 620px) {
  .cookies { padding: 18px 16px 20px; }
  .cookies__botones { width: 100%; }
  .cookies__botones .btn { flex: 1; min-width: 0; }
}

/* ==========================================================================
   Páginas de texto legal
   ========================================================================== */

.legal-cuerpo { max-width: 760px; }
.legal-cuerpo h2 { font-size: 1.4rem; margin-top: 1.8em; }
.legal-cuerpo h2:first-of-type { margin-top: 0; }
.legal-cuerpo h3 { font-size: 1.08rem; margin-top: 1.4em; }
.legal-cuerpo ul { padding-left: 20px; }
.legal-cuerpo li { margin-bottom: 8px; }
.legal-cuerpo table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .94rem; }
.legal-cuerpo th, .legal-cuerpo td {
  border: 1px solid var(--tf-borde); padding: 10px 12px; text-align: left; vertical-align: top;
}
.legal-cuerpo th { background: var(--tf-gris-claro); font-family: var(--tf-font-titulo); font-weight: 600; }
.legal-cuerpo .fecha { font-size: .88rem; color: var(--tf-gris-texto); }

.aviso-caja {
  background: rgba(243,107,33,.08);
  border-left: 4px solid var(--tf-naranja);
  border-radius: 0 var(--tf-radio) var(--tf-radio) 0;
  padding: 18px 20px; margin: 24px 0;
}
.aviso-caja p { margin: 0; font-size: .95rem; }
.aviso-caja strong { color: var(--tf-naranja-osc); }

/* Casilla de consentimiento del formulario */
.consentimiento { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; }
.consentimiento input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--tf-naranja); }
.consentimiento label { font-size: .88rem; color: var(--tf-gris-texto); line-height: 1.5; }
.consentimiento a { font-weight: 500; }

/* Trampa antispam: invisible para las personas, visible para los robots */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Reseñas
   ========================================================================== */

.rejilla-resenas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.resena {
  background: var(--tf-blanco); border: 1px solid var(--tf-borde);
  border-radius: var(--tf-radio); padding: 26px 26px 22px;
  display: flex; flex-direction: column;
}
.resena blockquote {
  margin: 0 0 18px; font-size: 1.02rem; color: #3C3D42; flex: 1;
}
.resena__autor {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--tf-borde); padding-top: 14px;
}
.resena__autor strong {
  font-family: var(--tf-font-titulo); font-weight: 600; font-size: .95rem;
}
.resena__autor span { font-size: .85rem; color: var(--tf-gris-texto); }

.resenas-pie { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.resenas-pie p { margin: 0; font-size: .93rem; color: var(--tf-gris-texto); }

@media (max-width: 760px) {
  .rejilla-resenas { grid-template-columns: 1fr; }
}
.resena__estrellas {
  color: var(--tf-naranja); font-size: 1.05rem; letter-spacing: .12em;
  margin: 0 0 12px; line-height: 1;
}