/* ═══════════════════════════════════════════════════════════
   COMPONENTES POR TEMA
   Hasta aquí los cuatro temas cambiaban color y tipografía,
   pero la silueta de la página era idéntica: secciones
   apiladas al mismo ancho, funciones en lista, todo simétrico.
   Esto cambia la composición de cada pieza por dentro.
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   OFICIO — pliego impreso
   Números romanos, capitular, márgenes anchos, y el texto
   corriendo a un ancho de lectura como en un libro.
   ─────────────────────────────────────────────────────────── */

[data-tema="oficio"] .sec{padding:104px 0}
[data-tema="oficio"] .enca{max-width:none;margin-bottom:52px;position:relative}
[data-tema="oficio"] .enca .folio{
  position:absolute;left:0;top:6px;width:120px;text-align:right;
  padding-right:22px;border-right:1px solid var(--regla);margin:0;
}
[data-tema="oficio"] .enca h2,[data-tema="oficio"] .enca p{margin-left:152px;max-width:34ch}
[data-tema="oficio"] .enca p{max-width:52ch}

/* el párrafo de apertura, como entradilla de periódico */
[data-tema="oficio"] .sec > .env > .grande{
  margin-left:152px;max-width:46ch;font-size:1.28rem;line-height:1.56;
  column-count:1;
}
[data-tema="oficio"] .sec > .env > .grande::first-letter{
  float:left;font-family:var(--display);font-size:4.6rem;line-height:.78;
  padding:6px 12px 0 0;color:var(--acento);
}

/* funciones numeradas en romano, con regla que las separa */
[data-tema="oficio"] .lista-func{counter-reset:art}
[data-tema="oficio"] .lista-func li{
  counter-increment:art;display:grid;grid-template-columns:62px 1fr;gap:24px;
  padding:28px 0;border-top:1px solid var(--regla);
}
[data-tema="oficio"] .lista-func li::before{
  content:counter(art,upper-roman);
  font-family:var(--display);font-size:1.5rem;color:var(--acento);
  line-height:1;padding-top:2px;grid-column:1;grid-row:1 / span 2;
}
/* el título y el texto van los dos en la segunda columna */
[data-tema="oficio"] .lista-func li > h3,
[data-tema="oficio"] .lista-func li > p{grid-column:2}
[data-tema="oficio"] .lista-func h3{font-size:1.14rem}

/* la ficha lateral, como pie de imprenta */
[data-tema="oficio"] .datos{
  background:none;border:0;border-top:3px solid var(--tinta);
  border-radius:0;box-shadow:none;padding:24px 0 0;
}
@media (min-width:1001px){
  [data-tema="oficio"] .dos-col{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);gap:78px}
}

@media (max-width:900px){
  [data-tema="oficio"] .enca .folio{position:static;width:auto;text-align:left;
    border-right:0;padding-right:0;margin-bottom:12px}
  [data-tema="oficio"] .enca h2,[data-tema="oficio"] .enca p,
  [data-tema="oficio"] .sec > .env > .grande{margin-left:0}
}


/* ───────────────────────────────────────────────────────────
   CASA — bloques de color y tarjetas
   Nada de listas: las funciones son fichas en rejilla, las
   secciones se alternan en bloques de color pleno y el texto
   respira.
   ─────────────────────────────────────────────────────────── */

[data-tema="casa"] .sec{padding:96px 0}

/* la sección del problema, en bloque de color */
[data-tema="casa"] .sec:has(> .env > .grande){
  background:color-mix(in srgb,var(--acento) 10%,var(--papel));
}
/* el titular de esa sección se lee sobre el bloque de color */
[data-tema="casa"] .sec:has(> .env > .grande) h2,
[data-tema="casa"] .sec:has(> .env > .grande) .grande{color:var(--tinta)}
[data-tema="casa"] .sec > .env > .grande{
  font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.36;max-width:24ch;
  font-family:var(--display);font-weight:400;letter-spacing:-.025em;color:var(--tinta);
}

/* funciones como fichas, no como lista */
[data-tema="casa"] .lista-func{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;
}
/* la primera ficha ocupa el ancho: es la que más pesa */
[data-tema="casa"] .lista-func li:first-child{grid-column:1 / -1;padding:32px}
[data-tema="casa"] .lista-func li:first-child h3{font-size:1.3rem}
[data-tema="casa"] .lista-func li:first-child p{font-size:1.04rem;max-width:62ch}
[data-tema="casa"] .lista-func li{
  border:0;padding:26px;background:var(--blanco);border-radius:22px;
  box-shadow:0 1px 2px rgba(11,18,32,.04),0 16px 36px -26px rgba(11,18,32,.3);
}
[data-tema="casa"] .lista-func li:first-child{padding:26px}
[data-tema="casa"] .lista-func h3{font-size:1.06rem;margin-bottom:8px}
[data-tema="casa"] .lista-func p{font-size:.95rem}
[data-tema="casa"] .dos-col{grid-template-columns:1fr;gap:44px}
[data-tema="casa"] .dos-col > div{min-width:0}
[data-tema="casa"] .dos-col aside{max-width:520px}
[data-tema="casa"] .datos{position:static}


/* ───────────────────────────────────────────────────────────
   CANCHA — tablero de resultados
   Números enormes de fondo, secciones a sangre, y las
   funciones como filas de una tabla de posiciones.
   ─────────────────────────────────────────────────────────── */

[data-tema="cancha"] .sec{padding:92px 0;position:relative;overflow:hidden}

/* marca de agua con el número de sección */
[data-tema="cancha"] .sec .enca{position:relative;z-index:2}
[data-tema="cancha"] .sec > .env{position:relative}
[data-tema="cancha"] .sec > .env::before{
  content:"";position:absolute;right:-10px;top:-56px;width:220px;height:220px;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb,var(--acento) 30%,transparent), transparent 62%);
  pointer-events:none;
}

/* funciones como tabla de posiciones */
[data-tema="cancha"] .lista-func{counter-reset:pos;border-top:2px solid var(--acento)}
[data-tema="cancha"] .lista-func li{
  counter-increment:pos;display:grid;grid-template-columns:58px minmax(0,1fr) minmax(0,1.5fr);
  gap:20px;align-items:baseline;padding:22px 0;border-top:1px solid var(--regla);
}
[data-tema="cancha"] .lista-func li:first-child{border-top:0}
[data-tema="cancha"] .lista-func li::before{
  content:counter(pos,decimal-leading-zero);
  font-family:var(--mono);font-size:.9rem;color:var(--acento2);
}
[data-tema="cancha"] .lista-func h3{
  font-size:.98rem;text-transform:uppercase;letter-spacing:.02em;margin:0;
}
[data-tema="cancha"] .lista-func p{font-size:.94rem}
@media (min-width:1001px){
  [data-tema="cancha"] .dos-col{grid-template-columns:minmax(0,2fr) minmax(0,.75fr);gap:56px}
}
[data-tema="cancha"] .datos{border-radius:6px}
[data-tema="cancha"] .sec > .env > .grande{
  font-size:1.24rem;max-width:56ch;border-left:3px solid var(--acento);padding-left:26px;
}

@media (max-width:820px){
  [data-tema="cancha"] .lista-func li{grid-template-columns:44px 1fr}
  [data-tema="cancha"] .lista-func li p{grid-column:2}
}


/* ───────────────────────────────────────────────────────────
   TALLER — hoja de especificación
   Retícula visible, funciones en dos columnas con numeración
   técnica, y las secciones separadas por línea punteada.
   ─────────────────────────────────────────────────────────── */

[data-tema="taller"] .sec{padding:88px 0}
[data-tema="taller"] .sec + .sec{border-top:1px dashed var(--regla)}
[data-tema="taller"] .enca{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px;align-items:end;max-width:none;
}
[data-tema="taller"] .enca .folio{grid-column:1;margin-bottom:8px}
[data-tema="taller"] .enca h2{grid-column:1;max-width:16ch}
[data-tema="taller"] .enca p{grid-column:2;grid-row:1 / span 2;margin:0;align-self:end;max-width:46ch}

[data-tema="taller"] .lista-func{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:0 46px;counter-reset:esp;
}
[data-tema="taller"] .lista-func li{
  counter-increment:esp;padding:22px 0;border-top:1px solid var(--regla);
  position:relative;padding-left:44px;
}
[data-tema="taller"] .lista-func li:first-child{border-top:1px solid var(--regla);padding-top:22px}
[data-tema="taller"] .lista-func li::before{
  content:"0" counter(esp);position:absolute;left:0;top:24px;
  font-family:var(--mono);font-size:.74rem;color:var(--acento);letter-spacing:.06em;
}
[data-tema="taller"] .lista-func h3{font-size:1.02rem}
[data-tema="taller"] .dos-col{grid-template-columns:1fr;gap:46px}
[data-tema="taller"] .dos-col aside{max-width:560px}
[data-tema="taller"] .datos{position:static;border-style:dashed}
[data-tema="taller"] .sec > .env > .grande{
  max-width:62ch;font-size:1.18rem;
  border-top:2px solid var(--acento);padding-top:24px;
}

@media (max-width:820px){
  [data-tema="taller"] .enca{grid-template-columns:1fr;gap:16px}
  [data-tema="taller"] .enca p{grid-column:1;grid-row:auto}
}


/* ───────────────────────────────────────────────────────────
   ACCESO EN LÍNEA — deja de ser cinco tarjetas iguales
   Era el bloque más largo y más repetido de todo el sitio.
   Ahora es una franja de tres pasos numerados más dos notas.
   ─────────────────────────────────────────────────────────── */

.sec-tinta#acceso .rej-3{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid rgba(255,255,255,.2);
}
.sec-tinta#acceso .rej-3 .tarj{
  background:none;border:0;border-left:1px solid rgba(255,255,255,.2);
  border-radius:0;padding:30px 26px 8px;box-shadow:none;color:#fff;
}
.sec-tinta#acceso .rej-3 .tarj:first-child{border-left:0;padding-left:0}
.sec-tinta#acceso .rej-3 .tarj::before{display:none}
.sec-tinta#acceso .rej-3 .tarj:hover{transform:none;box-shadow:none}
.sec-tinta#acceso .rej-3 .tarj .folio{
  font-size:2.4rem;font-family:var(--display);color:var(--acento2);
  letter-spacing:-.04em;margin-bottom:10px;
}
.sec-tinta#acceso .rej-3 .tarj h3{color:#fff;font-size:1.04rem}
.sec-tinta#acceso .rej-3 .tarj p{color:rgba(255,255,255,.72);font-size:.94rem}

.sec-tinta#acceso .rej-2{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;margin-top:44px;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.2);
}
.sec-tinta#acceso .rej-2 .tarj{
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;
}
.sec-tinta#acceso .rej-2 .tarj::before{display:none}
.sec-tinta#acceso .rej-2 .tarj:hover{transform:none;box-shadow:none}
.sec-tinta#acceso .rej-2 .tarj h3{
  color:var(--acento2);font-size:.86rem;text-transform:uppercase;
  letter-spacing:.1em;font-family:var(--mono);font-weight:400;margin-bottom:10px;
}
.sec-tinta#acceso .rej-2 .tarj p{color:rgba(255,255,255,.8);font-size:1.02rem}

@media (max-width:820px){
  .sec-tinta#acceso .rej-3{grid-template-columns:1fr;border-top:0}
  .sec-tinta#acceso .rej-3 .tarj{border-left:0;border-top:1px solid rgba(255,255,255,.2);padding-left:0}
  .sec-tinta#acceso .rej-2{grid-template-columns:1fr;gap:28px}
}


/* ───────────────────────────────────────────────────────────
   CIERRE — la última sección deja de ser un párrafo suelto
   ─────────────────────────────────────────────────────────── */

.sec-tono#quien{position:relative;overflow:hidden}
.sec-tono#quien .env{position:relative;z-index:2}
.sec-tono#quien::after{
  content:"";position:absolute;right:-90px;bottom:-90px;width:340px;height:340px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--acento) 22%,transparent),transparent 68%);
  pointer-events:none;
}
.sec-tono#quien .grande{
  font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.38;max-width:22ch;
  font-family:var(--display);font-weight:400;letter-spacing:-.02em;
}
[data-tema="cancha"] .sec-tono#quien .grande{
  text-transform:none;font-weight:600;border-left:0;padding-left:0;
}


/* la galería se desplaza dentro de su caja, nunca empuja la página */
.galeria,.galeria-mac{max-width:100vw}
.sec,.sec > .env{min-width:0}


/* ═══════════════════════════════════════════════════════════
   PIEZA GRÁFICA
   Un dibujo por app. No es decoración: explica el mismo
   argumento que el texto de al lado, y se pinta con el color
   del tema, así que cambia de sitio en sitio sin editarlo.
   ═══════════════════════════════════════════════════════════ */

.pieza{margin:44px 0 0;max-width:760px}
.pieza svg{width:100%;height:auto;display:block;color:var(--tinta)}
.pieza .et{
  font-family:var(--mono);font-size:11px;fill:currentColor;
  letter-spacing:.05em;
}
.pieza .reja line{stroke:currentColor;stroke-width:1;opacity:.14}
.pieza figcaption{
  margin-top:16px;font-size:.9rem;color:var(--gris);max-width:60ch;line-height:1.5;
}

/* sobre fondo oscuro el trazo se aclara */
[data-tema="cancha"] .pieza svg{color:#C6D2E6}
[data-tema="cancha"] .pieza figcaption{color:var(--gris)}
.sec-tinta .pieza svg{color:rgba(255,255,255,.8)}
.sec-tinta .pieza figcaption{color:rgba(255,255,255,.7)}

@media (max-width:720px){
  .pieza{margin-top:32px}
  .pieza .et{font-size:13px}
}


/* ═══════════════════════════════════════════════════════════
   PÁGINAS DE SERVICIO
   Soporte y los legales eran idénticos en los 18 sitios. No
   necesitan ser espectaculares, pero sí pertenecer al sitio
   donde están: heredan la forma de su tema.
   ═══════════════════════════════════════════════════════════ */

/* preguntas frecuentes: numeradas y con la respuesta indentada */
.lista-func{counter-reset:pregunta}

[data-tema="oficio"] .legal h2{
  font-family:var(--display);font-weight:400;border-top-width:2px;
}
[data-tema="oficio"] .legal p,[data-tema="oficio"] .legal li{max-width:64ch}

[data-tema="casa"] .legal h2{
  border-top:0;background:color-mix(in srgb,var(--acento) 12%,transparent);
  padding:10px 18px;border-radius:14px;font-size:1.24rem;
}
[data-tema="casa"] .contactos .tarj{border-radius:22px}

[data-tema="cancha"] .legal h2{
  border-top:0;border-left:4px solid var(--acento);padding:2px 0 2px 18px;
  text-transform:uppercase;font-size:1.16rem;
}
[data-tema="taller"] .legal h2{
  border-top:0;border-bottom:1px dashed var(--regla);padding:0 0 10px;
  font-size:1.2rem;display:block;
}
[data-tema="taller"] .legal h2::before{
  content:"§ ";font-family:var(--mono);color:var(--acento);font-size:.8em;
}

/* la fecha del documento, como sello */
.legal .fecha{
  display:inline-block;padding:6px 14px;border:1px solid var(--regla);
  border-radius:3px;margin-bottom:8px;
}
[data-tema="casa"] .legal .fecha{border-radius:999px}


/* en el arquetipo de dato el lema es el h1: cada página necesita uno,
   y el nombre de la app ya está arriba en la marca */
.portada[data-arq="dato"] h1.frase{
  font-size:clamp(1.3rem,2.5vw,1.9rem);color:#fff;max-width:26ch;
  margin:46px 0 0;line-height:1.32;font-family:var(--display);font-weight:400;
  letter-spacing:normal;text-transform:none;
}


/* los rótulos de columna del pie y del panel: se ven igual, pero ya no
   son encabezados de sección, que rompían la jerarquía de títulos */
.pie .tcol,.lateral .tcol{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;margin:0 0 16px;
}
.pie .tcol{color:rgba(255,255,255,.5)}
.lateral .tcol{color:var(--gris-claro);margin:0 0 12px 12px}
/* el folio convertido en h2 conserva su tamaño de rótulo: es un título
   para la jerarquía y para los lectores de pantalla, no un titular */
h2.folio{
  font-family:var(--mono)!important;font-weight:400!important;
  font-size:.72rem!important;letter-spacing:.16em!important;
  text-transform:uppercase!important;color:var(--gris-claro)!important;
  line-height:1.4!important;margin:0 0 14px!important;max-width:none!important;
}
h2.folio .num{color:var(--acento)}
[data-tema="oficio"] .enca h2.folio,
[data-tema="taller"] .enca h2.folio{margin-left:0!important}


/* un título que solo leen los lectores de pantalla: mantiene la jerarquía
   sin añadir ruido visual donde la página no lo necesita */
.oculto-visual{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}