/* ==========================================================================
   Tito Tejados — titotejados.com
   Paleta: teja #B4532A · pizarra #24313A · crema #FAF6F1
   ========================================================================== */

@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url(/fuentes/bitter-var-latin.woff2) format('woff2');
}

:root {
  --teja: #B4532A;
  --teja-oscura: #93401F;
  --teja-clara: #D97B54;
  --pizarra: #24313A;
  --pizarra-honda: #1B252C;
  --crema: #FAF6F1;
  --arena: #EFE7DC;
  --borde: #E3D8C9;
  --tinta: #2B3238;
  --tinta-suave: #5C6870;
  --wa: #128C7E;
  --wa-oscuro: #0E6F64;
  --fuente-titulo: 'Bitter', Georgia, 'Times New Roman', serif;
  --fuente-texto: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif;
}

/* ---------- Base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--fuente-titulo); color: var(--pizarra); line-height: 1.18; }

a { color: var(--teja); }
a:hover { color: var(--teja-oscura); }

:focus-visible {
  outline: 3px solid var(--teja);
  outline-offset: 2px;
  border-radius: 4px;
}

section[id], div[id] { scroll-margin-top: 92px; }

.contenedor {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pizarra);
  color: #fff;
  padding: .8em 1.4em;
  z-index: 100;
  border-radius: 0 0 10px 0;
}
.saltar:focus { left: 0; color: #fff; }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: .82em 1.55em;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn-teja { background: var(--teja); color: #fff; box-shadow: 0 6px 18px rgba(180, 83, 42, .28); }
.btn-teja:hover { background: var(--teja-oscura); color: #fff; }

.btn-blanco { background: #fff; color: var(--pizarra); }
.btn-blanco:hover { background: var(--crema); color: var(--pizarra); }

.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-oscuro); color: #fff; }

.btn-contorno { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-contorno:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }

.btn-contorno-teja { background: transparent; color: var(--teja); border-color: var(--teja); }
.btn-contorno-teja:hover { background: var(--teja); color: #fff; }

.btn-peq { font-size: .92rem; padding: .6em 1.2em; }

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 241, .94);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  transition: box-shadow .25s;
}
.cabecera.con-sombra { box-shadow: 0 2px 18px rgba(27, 37, 44, .12); }

.cabecera-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 74px;
}

.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { width: 44px; height: 44px; }
.logo-texto { line-height: 1; }
.logo-nombre {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: .02em;
  color: var(--pizarra);
}
.logo-apellido {
  display: block;
  margin-top: 3px;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .42em;
  color: var(--teja);
}

.nav-escritorio { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); }
.nav-enlace {
  font-weight: 600;
  font-size: .98rem;
  color: var(--pizarra);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-enlace:hover { color: var(--teja); border-color: var(--teja); }

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background: var(--pizarra);
  transition: transform .25s, opacity .2s;
}
.menu-btn.activo span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn.activo span:nth-child(2) { opacity: 0; }
.menu-btn.activo span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.panel-movil {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--crema);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 18px 30px rgba(27, 37, 44, .14);
  padding: 10px 0 18px;
}
.panel-movil.abierto { display: block; }
.panel-movil a {
  display: block;
  padding: .85em clamp(20px, 4vw, 32px);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--pizarra);
  text-decoration: none;
}
.panel-movil a:hover { background: var(--arena); color: var(--teja); }

/* ---------- Héroe ---------- */

.hero {
  position: relative;
  background-color: var(--pizarra);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.045' stroke-width='3'%3E%3Cpath d='M0 28a14 14 0 0 1 28 0M28 28a14 14 0 0 1 28 0M-14 14a14 14 0 0 1 28 0M14 14a14 14 0 0 1 28 0M42 14a14 14 0 0 1 28 0M0 0a14 14 0 0 1 28 0M28 0a14 14 0 0 1 28 0'/%3E%3C/g%3E%3C/svg%3E");
  color: #fff;
  overflow: hidden;
}

.hero-inner { padding: clamp(3.4rem, 7vw, 5.8rem) 0 clamp(2.4rem, 5vw, 3.6rem); }

.hero-eyebrow {
  margin: 0;
  color: var(--teja-clara);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hero h1 {
  margin: .45em 0 .35em;
  font-weight: 800;
  font-size: clamp(2.35rem, 5.4vw, 3.7rem);
  line-height: 1.06;
  color: #fff;
  max-width: 16ch;
}

.hero-sub {
  margin: 0;
  color: #C6CED4;
  font-size: clamp(1.03rem, 1.6vw, 1.18rem);
  max-width: 58ch;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.9rem; }

.hero-datos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2.3rem; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: .48em 1.05em;
  font-size: .87rem;
  color: #DDE3E7;
}
.chip svg { width: 1em; height: 1em; flex: none; color: var(--teja-clara); }

.divisor { display: block; width: 100%; height: clamp(52px, 9vw, 110px); }

/* ---------- Secciones ---------- */

.seccion { padding: clamp(3.2rem, 7vw, 5.4rem) 0; }
.seccion-blanca { background: #fff; }

.kicker {
  margin: 0 0 .6em;
  color: var(--teja);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.seccion h2 { margin: 0 0 .45em; font-size: clamp(1.75rem, 3.4vw, 2.45rem); font-weight: 800; }
.entradilla { margin: 0; color: var(--tinta-suave); font-size: 1.05rem; max-width: 62ch; }

/* Servicios */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 20px;
  margin-top: 2.5rem;
}
.tarjeta {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 18px;
  padding: 26px 24px 24px;
  box-shadow: 0 1px 2px rgba(27, 37, 44, .04);
  transition: box-shadow .25s, border-color .25s;
}
.tarjeta:hover { box-shadow: 0 12px 32px rgba(27, 37, 44, .1); border-color: #D9C9B4; }
.tarjeta-icono { width: 52px; height: 52px; margin-bottom: 14px; color: var(--teja); }
.tarjeta h3 { margin: 0 0 .4em; font-size: 1.22rem; font-weight: 700; }
.tarjeta p { margin: 0 0 1.1em; color: var(--tinta-suave); font-size: .96rem; }
.tarjeta ul { list-style: none; margin: auto 0 0; padding: 0; }
.tarjeta li {
  position: relative;
  padding-left: 1.5em;
  margin-top: .45em;
  font-size: .92rem;
  font-weight: 600;
  color: var(--pizarra);
}
.tarjeta li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teja);
  font-weight: 800;
}

/* Proceso */

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: 30px 26px;
  margin-top: 2.5rem;
}
.paso-num {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 2.7rem;
  line-height: 1;
  color: var(--teja);
}
.paso h3 { margin: .45em 0 .35em; font-size: 1.13rem; font-weight: 700; }
.paso p { margin: 0; color: var(--tinta-suave); font-size: .95rem; }

/* Banda urgencia */

.banda {
  background-color: var(--teja);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.06' stroke-width='3'%3E%3Cpath d='M0 28a14 14 0 0 1 28 0M28 28a14 14 0 0 1 28 0M-14 14a14 14 0 0 1 28 0M14 14a14 14 0 0 1 28 0M42 14a14 14 0 0 1 28 0M0 0a14 14 0 0 1 28 0M28 0a14 14 0 0 1 28 0'/%3E%3C/g%3E%3C/svg%3E");
  color: #fff;
  padding: clamp(2.6rem, 5vw, 3.6rem) 0;
}
.banda-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.banda h2 { margin: 0 0 .25em; color: #fff; font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 800; max-width: 24ch; }
.banda p { margin: 0; color: #F6DFD3; font-size: 1rem; max-width: 46ch; }
.banda-botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Zona */

.zona-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.comarcas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.comarca {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: .5em 1.1em;
  font-weight: 600;
  font-size: .93rem;
  color: var(--pizarra);
}
.comarca::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teja-clara);
  flex: none;
}

/* Grupo */

.grupo-caja { max-width: 780px; }
.grupo-caja p { color: var(--tinta-suave); font-size: 1.05rem; }
.grupo-caja .btn { margin-top: .8rem; }

/* Preguntas */

.faq { max-width: 830px; margin-top: 2.2rem; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.07rem;
  color: var(--pizarra);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teja); }
.faq-mas {
  flex: none;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 2px solid var(--teja);
  border-radius: 50%;
  color: var(--teja);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform .25s;
}
.faq details[open] .faq-mas { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.25rem; color: var(--tinta-suave); max-width: 68ch; }

/* Contacto */

.contacto { background: var(--pizarra); color: #fff; padding-bottom: clamp(3.2rem, 7vw, 5.4rem); }
.contacto .kicker { color: var(--teja-clara); }
.contacto h2 { color: #fff; }
.contacto .entradilla { color: #C6CED4; }

.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(30px, 5vw, 54px);
  margin-top: 2.4rem;
  align-items: start;
}

.tel-grande {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin: .2rem 0 1.1rem;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: #fff;
  text-decoration: none;
}
.tel-grande svg { width: .8em; height: .8em; color: var(--teja-clara); }
.tel-grande:hover { color: var(--teja-clara); }

.contacto-nota { color: #A9B4BB; font-size: .95rem; max-width: 44ch; }

.contacto-formulario {
  background: #fff;
  border-radius: 20px;
  padding: clamp(22px, 4vw, 34px);
  color: var(--tinta);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.contacto-formulario h3 { margin: 0 0 1.2rem; font-size: 1.25rem; }

.campo { margin-bottom: 15px; }
.campo label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: .88rem;
  color: var(--pizarra);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  border: 1.5px solid #D9DDE0;
  border-radius: 10px;
  padding: .72em .9em;
  font: inherit;
  font-size: .98rem;
  color: var(--tinta);
  background: #fff;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--teja);
  box-shadow: 0 0 0 3px rgba(180, 83, 42, .18);
}

.btn-enviar { width: 100%; }

.form-nota { margin: 12px 0 0; font-size: .8rem; color: var(--tinta-suave); }

/* ---------- Pie ---------- */

.pie {
  background: var(--pizarra-honda);
  color: #B9C2C8;
  padding: 3.2rem 0 2rem;
}
.pie-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 36px;
}
.pie .logo-nombre { color: #fff; }
.pie .logo-apellido { color: var(--teja-clara); }
.pie-claim { margin: 1rem 0 0; font-size: .95rem; max-width: 34ch; }
.pie h4 {
  margin: 0 0 .9em;
  color: #fff;
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .55em; }
.pie a { color: #B9C2C8; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .84rem;
}
.pie-legal p { margin: 0; }

/* ---------- Barra móvil fija ---------- */

.barra-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .2);
}
.barra-movil a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95em 1em calc(.95em + env(safe-area-inset-bottom));
  font-weight: 700;
  font-size: .98rem;
  color: #fff;
  text-decoration: none;
}
.barra-movil svg { width: 1.15em; height: 1.15em; }
.barra-llamar { background: var(--teja); }
.barra-wa { background: var(--wa); }

/* ---------- Páginas legales y error ---------- */

.prosa { max-width: 780px; margin-inline: auto; padding: clamp(2.4rem, 6vw, 4rem) clamp(20px, 4vw, 32px) 4rem; }
.prosa h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 800; }
.prosa h2 { font-size: 1.32rem; margin-top: 2.2em; }
.prosa p, .prosa li { color: var(--tinta); }
.prosa .aviso-pendiente { background: var(--arena); border-left: 4px solid var(--teja); padding: .8em 1.1em; border-radius: 0 10px 10px 0; }

.pagina-error {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 20px;
}
.pagina-error .num {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: clamp(4.5rem, 14vw, 8rem);
  line-height: 1;
  color: var(--teja);
}
.pagina-error h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: .3em 0 .4em; }
.pagina-error p { color: var(--tinta-suave); margin: 0 0 1.6rem; }

/* ---------- Responsive ---------- */

@media (max-width: 899px) {
  .nav-escritorio { display: none; }
  .menu-btn { display: flex; }
  .barra-movil { display: grid; }
  body { padding-bottom: 58px; }
  .zona-grid, .contacto-grid { grid-template-columns: 1fr; }
  .banda-inner { flex-direction: column; align-items: flex-start; }
  .pie-grid { grid-template-columns: 1fr; gap: 28px; }
}

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