/* zonatejados.com — maquetación propia de la web. Componentes y color: Design System Zona Tejados 1.1.0 (tokens.css + bundle.css + bundle.js).
   Aquí solo van las piezas P2 que aún no están en el sistema (pasos, encaje, preguntas, contacto) y la composición de la página,
   siempre con tokens. Literales de maquetación: anchos 1200px (= breakpoint-1200) y 720px, como en bundle.css. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--color-bg-surface); }
[id] { scroll-margin-top: var(--space-16); }
.saltar { position: absolute; left: var(--space-16); top: calc(-1 * var(--size-48)); z-index: 10; }
.saltar:focus { top: var(--space-8); }

/* Hero: ficha de condiciones en la columna derecha */
.ficha { margin: 0; background: var(--color-bg-surface); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-card); padding: var(--spacing-inset-card); display: flex; flex-direction: column; gap: var(--space-16); }
.ficha__titulo { margin: 0; font-family: var(--font-family-heading); font-size: var(--font-size-12); line-height: var(--line-height-24); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-text-secondary); }
.ficha__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.ficha__lista li { display: flex; gap: var(--space-12); align-items: flex-start; font-size: var(--font-size-16); line-height: var(--line-height-24); color: var(--color-text-primary); }
.ficha__lista .zt-icono { color: var(--color-interactive-indicator); margin-top: var(--space-4); }
.ficha__lista b { font-family: var(--font-family-heading); font-weight: var(--font-weight-semibold); }
.ficha__sello { margin: 0; padding-top: var(--space-16); border-top: var(--border-width-default) solid var(--color-border-subtle); font-size: var(--font-size-16); line-height: var(--line-height-24); color: var(--color-text-secondary); }

/* Pasos (P2 del sistema) */
.pasos { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; counter-reset: paso; display: flex; flex-direction: column; }
.paso { counter-increment: paso; display: grid; grid-template-columns: var(--size-48) 1fr; gap: var(--space-16); padding: var(--space-16) 0; border-bottom: var(--border-width-default) solid var(--color-border-subtle); }
.paso:last-child { border-bottom: 0; }
.paso::before { content: counter(paso); display: flex; align-items: center; justify-content: center; width: var(--size-48); height: var(--size-48); border-radius: var(--radius-full); background: var(--color-interactive-primary); color: var(--color-text-on-primary); font-family: var(--font-family-heading); font-size: var(--font-size-20); line-height: var(--line-height-28); font-weight: var(--font-weight-semibold); }
.paso h3 { margin: 0; font-family: var(--font-family-heading); font-size: var(--font-size-20); line-height: var(--line-height-28); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); }
.paso p { margin: var(--space-4) 0 0; font-size: var(--font-size-16); line-height: var(--line-height-24); color: var(--color-text-secondary); }

/* Encaje: requisitos */
.requisitos { list-style: none; margin: var(--space-32) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-16); }
.requisito { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-16); border-radius: var(--radius-card); background: var(--color-bg-surface); border: var(--border-width-default) solid var(--color-border-subtle); }
.requisito .zt-icono { flex: none; width: var(--space-24); height: var(--space-24); }
.requisito--si .zt-icono { color: var(--color-status-success-text); }
.requisito--no .zt-icono { color: var(--color-status-error-text); }
.requisito h3 { margin: 0; font-family: var(--font-family-heading); font-size: var(--font-size-16); line-height: var(--line-height-24); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); }
.requisito p { margin: 0; font-size: var(--font-size-16); line-height: var(--line-height-24); color: var(--color-text-secondary); }

/* Dónde */
.zonas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.zonas li { padding: var(--space-8) var(--space-16); border-radius: var(--radius-button); background: var(--color-brand-accent); color: var(--color-text-on-accent); font-family: var(--font-family-heading); font-size: var(--font-size-16); line-height: var(--line-height-24); font-weight: var(--font-weight-semibold); }

/* Contacto: formulario + alternativas */
.contacto { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-32); align-items: start; }
.formulario { background: var(--color-bg-surface); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-card); padding: var(--spacing-inset-card); display: flex; flex-direction: column; gap: var(--space-16); }
.formulario .zt-campo { max-width: none; min-width: 0; }
.formulario .zt-campo__input { width: 100%; min-width: 0; }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.formulario__nota { margin: 0; font-size: var(--font-size-16); line-height: var(--line-height-24); color: var(--color-text-secondary); }
.formulario .zt-btn { width: 100%; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alternativas { display: flex; flex-direction: column; gap: var(--space-16); }
.alternativa { background: var(--color-bg-surface); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-card); padding: var(--spacing-inset-card); display: flex; flex-direction: column; gap: var(--space-12); }
.alternativa h3 { margin: 0; font-family: var(--font-family-heading); font-size: var(--font-size-20); line-height: var(--line-height-28); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); }
.alternativa p { margin: 0; font-size: var(--font-size-16); line-height: var(--line-height-24); color: var(--color-text-secondary); }
.alternativa .zt-btn { align-self: flex-start; }

/* Preguntas frecuentes (P2 del sistema) */
.preguntas { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-12); }
.pregunta { background: var(--color-bg-surface); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-card); }
.pregunta summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-24); min-height: var(--size-48); font-family: var(--font-family-heading); font-size: var(--font-size-16); line-height: var(--line-height-24); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); border-radius: var(--radius-card); }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary .zt-icono { flex: none; width: var(--space-24); height: var(--space-24); transition: transform var(--duration-800) ease; }
.pregunta[open] summary .zt-icono { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .pregunta summary .zt-icono { transition: none; } }
.pregunta summary:focus-visible { outline: var(--border-width-focus) solid var(--color-border-focus); outline-offset: var(--border-offset-focus); }
.pregunta p { margin: 0; padding: 0 var(--space-24) var(--space-16); font-size: var(--font-size-16); line-height: var(--line-height-24); color: var(--color-text-primary); }

.alternativa .zt-btn--tertiary { white-space: normal; overflow-wrap: anywhere; text-align: left; }
@media (max-width: 1024px) { .contacto { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .formulario__fila { grid-template-columns: 1fr; } .alternativa .zt-btn { align-self: stretch; } }

/* Primera capa de privacidad junto a la casilla */
.formulario__capa { font-size: var(--font-size-12); line-height: var(--line-height-20); }
.formulario__capa a { color: var(--color-text-link); }
.zt-casilla input[aria-invalid="true"] { outline: var(--border-width-strong) solid var(--color-border-error); outline-offset: var(--border-offset-2); }
#resultado:focus { outline: none; }
#resultado:focus-visible { outline: var(--border-width-focus) solid var(--color-border-focus); outline-offset: var(--border-offset-focus); border-radius: var(--radius-control); }

/* Páginas legales (plantilla «Página legal» del sistema) */
.legal { max-width: 720px; }
.legal h1 { margin: 0 0 var(--space-8); font-family: var(--font-family-heading); font-size: var(--font-size-40); line-height: var(--line-height-48); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); }
.legal h2 { margin: var(--space-48) 0 var(--space-12); font-family: var(--font-family-heading); font-size: var(--font-size-24); line-height: var(--line-height-32); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); }
.legal p, .legal li, .legal dd, .legal dt { font-size: var(--font-size-16); line-height: var(--line-height-24); color: var(--color-text-primary); }
.legal p { margin: 0 0 var(--space-16); }
.legal ul { margin: 0 0 var(--space-16); padding-left: var(--space-24); }
.legal a { color: var(--color-text-link); }
.legal__fecha { color: var(--color-text-secondary); }
.legal__datos { margin: 0 0 var(--space-16); display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-8) var(--space-24); }
.legal__datos dt { font-family: var(--font-family-heading); font-weight: var(--font-weight-semibold); }
.legal__datos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) { .legal h1 { font-size: var(--font-size-32); line-height: var(--line-height-40); } .legal__datos { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .legal__datos dd { margin-bottom: var(--space-8); } }

/* Landings por polígono (plantilla «Landing por polígono»): cabecera sin menú y teléfono bajo la acción del hero oscuro */
.zt-cabecera--landing .zt-cabecera__accion { margin-left: auto; }
@media (max-width: 1024px) { .zt-cabecera--landing .zt-cabecera__barra { flex-wrap: nowrap; } .zt-cabecera--landing .zt-cabecera__accion { flex: none; } }
@media (max-width: 767px) { .zt-cabecera--landing .zt-cabecera__accion .zt-btn { width: auto; } }
.hero__tel { margin: var(--space-16) 0 0; font-size: var(--font-size-16); line-height: var(--line-height-24); }
.zt-hero--oscuro .hero__tel, .zt-hero--oscuro .hero__tel a { color: var(--color-text-on-inverse); }
.zt-hero--oscuro .hero__tel a:focus-visible { outline: var(--border-width-focus) solid var(--color-border-focus-inverse); outline-offset: var(--border-offset-focus); border-radius: var(--radius-control); }
/* Landings en móviles estrechos (320–399 px): logo y botón de la cabecera más compactos para que quepan sin desplazamiento horizontal. */
@media (max-width: 399px) {
  .zt-cabecera--landing .zt-cabecera__barra { gap: var(--space-12); }
  .zt-cabecera--landing .zt-cabecera__logo img { height: var(--size-32); }
  .zt-cabecera--landing .zt-cabecera__accion .zt-btn { padding-left: var(--space-16); padding-right: var(--space-16); }
}