@charset "UTF-8";

/* ============================================================================
   03-layout.css — sysnetia.com
   ----------------------------------------------------------------------------
   FASE 1. Contenedores, rejillas y los TRES breakpoints.

   REGLA DEL PROYECTO QUE ESTE ARCHIVO IMPLEMENTA (contrato §4.3):
   Las distancias las manda el PADRE. Un hijo nunca se separa a sí mismo
   del bloque anterior. Por eso aquí solo hay `.contenedor` y `.pila`.

   MÓVIL PRIMERO: la base es el teléfono y se amplía con min-width.
   Nunca al revés.
   ========================================================================== */


/* ============================================================================
   1. BREAKPOINTS — declarados UNA vez
   ----------------------------------------------------------------------------
   No son variables CSS (no existen en media queries). Son las tres franjas
   del contrato §3.6, y ningún archivo posterior inventa otra:
     movil       ≤ 767px
     tablet      768 – 1023px
     escritorio  ≥ 1024px
   ========================================================================== */


/* ============================================================================
   2. CONTENEDOR
   ----------------------------------------------------------------------------
   Un solo contenedor centrado con techo de ancho. El aire lateral es un
   token (--margen-borde) que escala con la pantalla, así que no hay un
   breakpoint por cada tamaño: la medida se adapta sola.
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho-sitio);
  margin-inline: auto;
  padding-inline: var(--margen-borde);
}

/* Variante a sangre (fondo completo) con el contenido centrado.
   Se usa para las secciones que pintan fondo entero. */
.contenedor--sangre {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.contenedor--texto {
  max-width: calc(var(--ancho-texto) + var(--margen-borde) * 2);
}

/* Alineación horizontal del contenido de una sección */
.contenedor--centro {
  text-align: center;
}

.contenedor--centro p {
  margin-inline: auto;   /* el párrafo tiene --ancho-texto: se centra solo si es corto */
}


/* ============================================================================
   3. PILA VERTICAL — el padre manda el aire
   ----------------------------------------------------------------------------
   El único sitio donde se usa `* + *` para separar. Un hijo NO lleva margen
   propio. Con esto se acaban los `margin-top:130px` de ds-v2.
   ========================================================================== */

.pila > * + * {
  margin-block-start: var(--margen-seccion);
}

.pila--junta > * + * {
  margin-block-start: var(--e-3);
}

.pila--justa > * + * {
  margin-block-start: var(--e-4);   /* el hueco texto→tarjetas, 28px */
}

.pila--abierta > * + * {
  margin-block-start: var(--e-6);
}


/* ============================================================================
   4. SECCIÓN
   ----------------------------------------------------------------------------
   Una sección a sangre, con aire arriba y abajo. No hay una clase por
   sección: el `id` la identifica (contrato §9) y la clase da el comportamiento.
   ========================================================================== */

.seccion {
  position: relative;
  padding-block: var(--margen-seccion);
}

/* Sección que ocupa exactamente una pantalla (la portada).
   dvh con fallback: en iOS la barra del navegador rompe 100vh. */
.seccion--pantalla {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding-block: 0;
}

/* Sección con fondo propio: crea el contexto de las capas */
.seccion--fondo {
  background-color: var(--fondo);
}

.seccion--superficie {
  background-color: var(--superficie);
}

/* La sección lee el tema, pero NO lo elige: el contrato lo resuelve en
   --fondo/--fg. Aquí solo se usa. */


/* ============================================================================
   5. REJILLA
   ----------------------------------------------------------------------------
   Móvil: 1 columna. Tablet: 6 columnas (el contrato pide rejillas de 6).
   Escritorio: 12 columnas. Los hijos NO llevan ancho propio para "colocarse":
   la rejilla lo reparte.
   ========================================================================== */

.rejilla {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .rejilla {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--e-4);
  }
}

@media (min-width: 1024px) {
  .rejilla {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--e-5);
  }
}

/* Reparto por rol, no por número de columnas.
   "ancho-total" = toda la fila. "ancho-medio" = mitad en escritorio.

   OJO — ESTOS TRES TOKENS SON LOCALES, NO GLOBALES (y es correcto):
   --reparto-full / --reparto-mitad / --reparto-tercio se declaran DENTRO de
   .rejilla porque solo existen si hay rejilla. Ponerlos en :root sugeriría
   que funcionan en cualquier sitio, y no: fuera de .rejilla no hacen nada.
   Los tres se resuelven por breakpoint, que es justo lo que un :root no puede
   hacer con un solo token. */
.rejilla {
  --reparto-full: span 1;
  --reparto-mitad: span 1;
  --reparto-tercio: span 1;
}

@media (min-width: 768px) {
  .rejilla {
    --reparto-full: span 6;
    --reparto-mitad: span 6;   /* en tablet "mitad" apila: la pantalla no da */
    --reparto-tercio: span 3;
  }
}

@media (min-width: 1024px) {
  .rejilla {
    --reparto-full: span 12;
    --reparto-mitad: span 6;
    --reparto-tercio: span 4;
  }
}

.ancho-total { grid-column: var(--reparto-full); }
.ancho-mitad { grid-column: var(--reparto-mitad); }
.ancho-tercio { grid-column: var(--reparto-tercio); }

/* OJO — BUG MEDIDO Y CORREGIDO AQUÍ (Fase 1, 2026-10-21):
   Con solo `grid-column: span N`, auto-placement NO empaqueta dos "ancho-mitad"
   en la misma fila: mete uno por fila. Medido en 1032px: los dos bloques mitad
   salían en filas distintas en vez de lado a lado.
   Causa: al no caber el segundo span 6 en las columnas 7-12, el algoritmo
   avanza de fila en lugar de buscar hueco.
   Solución: `row dense`, que sí rellena huecos anteriores. Una línea, no un
   layout distinto, y respeta el reparto por breakpoint. */
.rejilla {
  grid-auto-flow: row dense;
}


/* ============================================================================
   6. ÁREAS SEGURAS (teléfonos con notch)
   ========================================================================== */

.contenedor,
.seccion {
  padding-inline-start: max(var(--margen-borde), env(safe-area-inset-left));
  padding-inline-end: max(var(--margen-borde), env(safe-area-inset-right));
}

/* En la sección el aire lateral lo pone el contenedor, no ella:
   se anula aquí para que no se sumen dos paddings. */
.seccion {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.seccion > .contenedor {
  padding-inline-start: max(var(--margen-borde), env(safe-area-inset-left));
  padding-inline-end: max(var(--margen-borde), env(safe-area-inset-right));
}


/* ============================================================================
   7. FLUJO TÁCTIL
   ----------------------------------------------------------------------------
   touch-action explícito solo donde hay gesto propio (la rueda, el carrusel).
   En el resto, el navegador decide: forzarlo rompe el scroll natural.
   ========================================================================== */

/* Nada que hacer en la base. El componente con gesto propio lo declara. */