@layer componentes {
  /* Tarjeta: el enlace del título se extiende a toda la tarjeta (un solo enlace, un solo tabulador) */
  .tarjeta {
    position: relative; display: grid; gap: var(--space-md); align-content: start;
    :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
    &:hover img { transform: scale(1.012); }
    &:has(a:focus-visible) { outline: 2px solid var(--color-texto); outline-offset: 6px; }
    a:focus-visible { outline: none; }
  }
  .tarjeta__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-sm) var(--space-lg); }
}

@layer componentes {
  /* Carrusel de tarjetas: fila con scroll horizontal y ajuste por tarjeta. Funciona sin JS (se desliza con el dedo);
     js/sitio.js muestra los controles, actualiza el contador y lo hace avanzar solo hasta que la persona lo toca.
     Pistas de que hay más: la siguiente tarjeta asoma, flechas, línea de progreso y contador "01 / 07". */
  .carrusel { display: grid; gap: var(--space-lg); timeline-scope: --carrusel; }
  .carrusel__pista {
    list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 48rem); gap: var(--space-md);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    scroll-timeline: --carrusel x;
    padding-block-end: var(--space-sm); /* deja ver el contorno de foco de la tarjeta */
    &::-webkit-scrollbar { display: none; }
    > li { scroll-snap-align: start; }
    @media (min-width: 64rem) { gap: var(--space-lg); }
    /* Foto alta en móvil; en escritorio más apaisada para que el nombre del proyecto quepa en la misma pantalla */
    .figura { --proporcion: 4 / 3; @media (min-width: 64rem) { --proporcion: 16 / 10; } }
  }
  /* Flechas a la izquierda (.boton-flecha, primitiva): la esquina derecha la ocupa el botón flotante de WhatsApp */
  .carrusel__controles { display: flex; align-items: center; gap: var(--space-sm); }
  /* Línea fina que se llena al deslizar (línea de tiempo del scroll; sin soporte queda solo la línea gris) */
  .carrusel__progreso {
    flex: 1; position: relative; block-size: 1px; margin-inline: var(--space-md); background: var(--color-linea);
    @supports (animation-timeline: scroll()) {
      &::after {
        content: ""; position: absolute; inset: 0; background: var(--color-texto); transform-origin: left;
        animation: llenar linear both; animation-timeline: --carrusel;
      }
    }
  }
  @keyframes llenar { from { transform: scaleX(0.15); } to { transform: scaleX(1); } }
  /* Variante para fotos de tipos: diapositiva más estrecha y foto vertical */
  .carrusel--vertical .carrusel__pista { grid-auto-columns: min(70%, 20rem); }
  .carrusel--vertical .carrusel__pista .figura { --proporcion: 4 / 5; }
}

@layer componentes {
  /* Acordeón de <details>: abre y cierra sin JS */
  .acordeon {
    border-block-start: 1px solid var(--color-linea);
    details { border-block-end: 1px solid var(--color-linea); }
    summary {
      display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg);
      padding-block: var(--space-lg); cursor: pointer; list-style: none;
      &::-webkit-details-marker { display: none; }
      &::after { content: "+"; flex: none; font-family: var(--fuente-titulos); font-size: var(--text-menor); line-height: 1; transition: transform var(--transicion); }
    }
    details[open] summary::after { transform: rotate(45deg); }
    details > :not(summary) { max-width: var(--ancho-texto); padding-block-end: var(--space-lg); color: var(--color-texto-suave); }
  }
}

@layer componentes {
  /* Filtro de proyectos: radios nativos + :has(), sin JS. Cada tarjeta lleva data-servicios y data-tipo */
  .filtro {
    display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl); margin-block-end: var(--space-xl);
    label {
      font-size: var(--text-etiqueta); font-weight: 500; letter-spacing: var(--tracking-ancho); text-transform: uppercase;
      padding: 0.625rem 1rem; border: 1px solid var(--color-linea); cursor: pointer;
      transition: border-color var(--transicion), background-color var(--transicion), color var(--transicion);
      &:hover { border-color: var(--color-texto); }
    }
    input:checked + label { background: var(--color-texto); border-color: var(--color-texto); color: var(--color-fondo); }
    input:focus-visible + label { outline: 2px solid var(--color-texto); outline-offset: 3px; }
  }
  .filtrable {
    &:has(#servicio-mobiliario:checked) .tarjeta:not([data-servicios~="mobiliario"]),
    &:has(#servicio-diseno:checked) .tarjeta:not([data-servicios~="diseno"]),
    &:has(#servicio-obra:checked) .tarjeta:not([data-servicios~="obra"]),
    &:has(#servicio-automatizacion:checked) .tarjeta:not([data-servicios~="automatizacion"]),
    &:has(#tipo-casa:checked) .tarjeta:not([data-tipo="casa"]),
    &:has(#tipo-apartamento:checked) .tarjeta:not([data-tipo="apartamento"]),
    &:has(#tipo-comercial:checked) .tarjeta:not([data-tipo="comercial"]) { display: none; }
  }
}

@layer componentes {
  /* Tabla comparativa: en pantallas estrechas cada fila se apila y cada celda muestra su encabezado (data-etiqueta) */
  .tabla {
    width: 100%; border-collapse: collapse;
    th, td { padding: var(--space-md) var(--space-lg); text-align: start; vertical-align: top; border-block-end: 1px solid var(--color-linea); font-weight: 300; }
    thead th { font-size: var(--text-etiqueta); font-weight: 500; letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--color-texto-suave); border-block-end-color: var(--color-texto); }
    tbody th { font-family: var(--fuente-titulos); font-size: var(--text-menor); font-weight: 400; line-height: 1.2; }
    td { color: var(--color-texto-suave); }
    td:nth-of-type(1) { color: var(--color-texto); }
    @media (max-width: 47.99rem) {
      thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
      tr, th, td { display: block; }
      th, td { padding-inline: 0; border: 0; }
      tr { padding-block: var(--space-lg); border-block-end: 1px solid var(--color-linea); }
      td { padding-block: var(--space-sm) 0; }
      td::before { content: attr(data-etiqueta); display: block; font-size: var(--text-etiqueta); font-weight: 500; letter-spacing: var(--tracking-ancho); text-transform: uppercase; color: var(--color-texto-suave); }
    }
  }
}

@layer componentes {
  /* Texto corrido de artículos (Markdown): ritmo vertical, títulos de apoyo y listas */
  .prosa {
    > * + * { margin-block-start: var(--space-md); }
    p, li { font-size: var(--text-lg); line-height: 1.7; color: var(--color-texto-suave); }
    h2 { font-size: var(--text-item); line-height: 1.15; margin-block-start: var(--space-xl); }
    h3 { font-size: var(--text-menor); line-height: 1.2; margin-block-start: var(--space-lg); }
    :is(h2, h3) + * { margin-block-start: var(--space-sm); }
    :is(ul, ol) { padding-inline-start: 1.5rem; }
    ul { list-style: "— "; }
    li + li { margin-block-start: var(--space-sm); }
    strong { color: var(--color-texto); }
  }
}

@layer componentes {
  .pie-sitio {
    border-block-start: 1px solid var(--color-linea); padding-block: var(--space-2xl) var(--space-xl);
    img { width: 8rem; }
    ul { list-style: none; display: grid; gap: 0.875rem; }
    ul a {
      text-decoration: none; font-size: var(--text-etiqueta); letter-spacing: var(--tracking-ancho); text-transform: uppercase;
      color: var(--color-texto-suave); transition: color var(--transicion);
      &:hover { color: var(--color-texto); }
    }
    address { font-style: normal; }
  }
  .pie-sitio__rejilla { padding-block-end: var(--space-2xl); border-block-end: 1px solid var(--color-linea); }
  .pie-sitio__legal {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md) var(--space-lg);
    padding-block-start: var(--space-lg);
    font-size: var(--text-etiqueta); letter-spacing: var(--tracking-ancho); text-transform: uppercase; color: var(--color-texto-suave);
    a { text-decoration: none; &:hover { color: var(--color-texto); } }
  }
}

@layer componentes {
  /* Botón flotante de WhatsApp: redondo, con el logo que la gente reconoce, en el naranja de marca (el mismo de cada botón sólido del sitio).
     En móvil queda solo el círculo con el logo, sin texto. */
  .whatsapp-flotante {
    position: fixed; inset: auto clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) auto; z-index: 30;
    display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; border-radius: 999px;
    background: var(--color-acento); color: #fff; text-decoration: none;
    font-size: var(--text-etiqueta); font-weight: 500; letter-spacing: var(--tracking-ancho); text-transform: uppercase;
    box-shadow: 0 16px 40px -12px rgb(18 19 20 / 0.35);
    transition: opacity var(--transicion), transform var(--transicion), background-color var(--transicion);
    svg { inline-size: 1.5rem; block-size: 1.5rem; flex: none; }
    &:hover { background: var(--color-marca-hover); transform: scale(1.03); }
    &.es-oculto { opacity: 0; transform: translateY(1rem); pointer-events: none; }
    @media (max-width: 40rem) {
      padding: 1rem; aspect-ratio: 1;
      span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    }
  }
}

@layer componentes {
  /* Dos fotos del mismo espacio lado a lado (_includes/par.html): una sobre otra en móvil, en dos columnas desde 40rem */
  .par {
    display: grid; gap: var(--space-sm);
    @media (min-width: 40rem) { grid-template-columns: 1fr 1fr; }
  }
  .par__lado { position: relative; }
  .par__etiqueta {
    position: absolute; inset-block-start: var(--space-md); inset-inline-start: var(--space-md);
    padding: 0.35em 0.75em; background: var(--color-fondo); color: var(--color-texto);
    font-size: var(--text-etiqueta); letter-spacing: var(--tracking-ancho); text-transform: uppercase;
    &.par__etiqueta--oscura { background: var(--color-texto); color: var(--color-fondo); }
  }
}

@layer componentes {
  /* Deslizador de antes y después (_includes/comparador.html). --posicion (0-100 %) la actualiza js/sitio.js; sin JS queda al 50 % */
  .comparador {
    --posicion: 50%;
    position: relative; overflow: clip; touch-action: pan-y; user-select: none; cursor: ew-resize;
    .figura:hover img { transform: none; }
    img { -webkit-user-drag: none; }
    /* La foto "antes" va en blanco y negro: así no compite en ruido visual con la foto "después" */
    > .figura img { filter: grayscale(1); }
    &:has(.comparador__control:focus-visible) { outline: 2px solid var(--color-texto); outline-offset: 3px; }
  }
  .comparador__encima {
    position: absolute; inset: 0; clip-path: inset(0 0 0 var(--posicion));
    .figura { block-size: 100%; }
  }
  .comparador__asa {
    position: absolute; inset-block: 0; inset-inline-start: var(--posicion); inline-size: 2px; translate: -50% 0;
    background: var(--color-fondo); pointer-events: none;
    &::after {
      content: "‹ ›"; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%;
      display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
      background: var(--color-fondo); color: var(--color-texto); font-size: var(--text-etiqueta); letter-spacing: 0.15em;
      box-shadow: 0 1px 8px rgb(0 0 0 / 0.25);
    }
  }
  .comparador__etiqueta {
    position: absolute; inset-block-start: var(--space-md); inset-inline-start: var(--space-md);
    padding: 0.35em 0.75em; background: var(--color-fondo); color: var(--color-texto);
    font-size: var(--text-etiqueta); letter-spacing: var(--tracking-ancho); text-transform: uppercase; pointer-events: none;
    &.comparador__etiqueta--oscura { inset-inline-start: auto; inset-inline-end: var(--space-md); background: var(--color-texto); color: var(--color-fondo); }
  }
  /* Control nativo, invisible, para teclado y lector de pantalla; el puntero lo maneja js/sitio.js y la línea y el círculo los dibuja .comparador__asa */
  .comparador__control { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; pointer-events: none; }
}

@layer componentes {
  /* Video propio (_includes/video.html): marco 9/16 (video--vertical: 4/5, como las fotos). Los de ambiente llevan botón de pausa (js/sitio.js) */
  .video {
    position: relative; overflow: hidden; background: var(--color-piedra); max-inline-size: 24rem;
    video { display: block; inline-size: 100%; block-size: 100%; aspect-ratio: var(--proporcion, 9 / 16); object-fit: cover; }
    &.video--vertical { --proporcion: 4 / 5; max-inline-size: none; }
  }
  .video__control {
    position: absolute; inset-block-end: var(--space-md); inset-inline-end: var(--space-md);
    display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
    background: var(--color-fondo); color: var(--color-texto); font-size: var(--text-etiqueta); box-shadow: 0 1px 8px rgb(0 0 0 / 0.25);
    &::before { content: "❚❚"; letter-spacing: -0.15em; }
    &[aria-pressed="true"]::before { content: "▶"; letter-spacing: 0; }
  }
}

@layer componentes {
  /* Fila de fotos o videos de ancho limitado que se reparten el espacio y saltan de línea (_includes/en-obra.html). Para fotos pequeñas: no se estiran más de lo que dan */
  .tira {
    display: flex; flex-wrap: wrap; align-items: start; gap: var(--space-lg) var(--space-md);
    > li { flex: 1 1 10rem; max-inline-size: 15rem; }
    &.tira--ancha > li { flex-basis: 16rem; max-inline-size: 26rem; }
  }
}