@font-face{font-family:'Cormorant';src:url('../fonts/Cormorant-VariableFont_wght.ttf') format('truetype');font-weight:300 700;font-style:normal;}
@font-face{font-family:'Cormorant';src:url('../fonts/Cormorant-Italic-VariableFont_wght.ttf') format('truetype');font-weight:300 700;font-style:italic;}
@font-face{font-family:'Tenor Sans';src:url('../fonts/TenorSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;}

:root{
  /* hueso enfriado: el original #EFEDE7 tenia el rojo como canal dominante
     (239,237,231) y se leia rosado contra las fotos. Ahora manda el verde,
     igual que salvia y selva. */
  --hueso:#ECEEE8;
  --tinta:#303030;
  --salvia:#B6B9AF;
  --selva:#6E7A73;
  --agua:#6EA7A3;
}

*{margin:0;padding:0;box-sizing:border-box;}
@page{size:280mm 210mm;margin:0;}
html,body{background:#8a8a86;}
body{font-family:'Cormorant',Georgia,serif;color:var(--tinta);-webkit-font-smoothing:antialiased;counter-reset:pag 0;}

.page{
  counter-increment:pag;
  position:relative;width:280mm;height:210mm;overflow:hidden;
  background:var(--hueso);page-break-after:always;break-after:page;
  margin:0 auto 8mm;
}
.page:last-child{page-break-after:auto;}

/* ---------- utilidades ---------- */
.eyebrow{
  font-family:'Tenor Sans',sans-serif;font-size:7.2pt;letter-spacing:.34em;
  text-transform:uppercase;color:var(--selva);
}
.folio{
  position:absolute;bottom:11mm;font-family:'Tenor Sans',sans-serif;
  font-size:7pt;letter-spacing:.26em;color:var(--salvia);text-transform:uppercase;
}
.folio.izq{left:20mm;}
.folio::before{content:counter(pag);}
.folio.der{right:20mm;}

/* firma de la revista: pie de foto vertical al filo exterior */
.pie-vertical{
  position:absolute;writing-mode:vertical-rl;
  font-family:'Tenor Sans',sans-serif;font-size:6.6pt;letter-spacing:.3em;
  text-transform:uppercase;
}

/* rombo de fin de articulo, del monograma */
.rombo{display:inline-block;width:6.6pt;height:6.6pt;border:.6pt solid var(--selva);
  transform:rotate(45deg);margin-left:5pt;vertical-align:middle;position:relative;top:-1pt;}

/* Sin `hyphens:auto`. Victoria, 8-ago: "las palabras por no caber completas se
   dividen... de un brochure si es mejor que este la palabra completa". Ademas
   Chromium partia mal en espanol —"ca-rretera"— porque la rr no se separa. */
.cuerpo{font-size:10.6pt;line-height:1.76;font-weight:400;text-align:justify;}
.cuerpo p+p{text-indent:5mm;}
.capitular::first-letter{
  font-size:46pt;line-height:.8;float:left;font-weight:300;
  margin:1.5pt 4pt 0 -1pt;color:var(--selva);
}

/* ============ 1 · PORTADA ============ */
.portada img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Victoria, 8-ago: "en la portada tener un poquito mas grande el logo de
   Elementos". De 31 a 50 mm; el destino baja otro tanto para no encimarse. */
.portada .logo{position:absolute;top:14mm;left:50%;transform:translateX(-50%);width:50mm;}
.portada .destino{position:absolute;top:58mm;left:0;right:0;text-align:center;
  font-family:'Tenor Sans',sans-serif;font-size:7pt;letter-spacing:.44em;
  color:#39403A;text-transform:uppercase;}
.portada .eslogan{position:absolute;bottom:34mm;left:20mm;color:#2C322E;
  font-size:29pt;font-weight:300;line-height:1.18;}
.portada .eslogan em{font-style:italic;}
.portada .coverline{position:absolute;bottom:16mm;left:20mm;right:20mm;
  font-family:'Tenor Sans',sans-serif;font-size:7pt;letter-spacing:.28em;
  color:#3B423D;text-transform:uppercase;
  border-top:.5pt solid rgba(48,54,49,.4);padding-top:3.5mm;}

/* ============ paginas partidas: texto + imagen a sangre ============ */
.partida .lado-img{position:absolute;top:0;right:0;width:96mm;height:210mm;}
.partida .lado-img img{width:100%;height:100%;object-fit:cover;display:block;}
.partida .lado-txt{position:absolute;top:18mm;left:20mm;width:148mm;}

/* ============ 2 · SUMARIO ============ */
.sumario h1{font-size:58pt;font-weight:300;font-style:italic;line-height:.95;margin:2mm 0 3mm;}
.sumario .sub{font-size:10.6pt;line-height:1.65;color:var(--selva);max-width:120mm;margin-bottom:8mm;}
.sumario .lista{border-top:.5pt solid var(--salvia);}
.sumario .item{display:flex;gap:7mm;align-items:baseline;
  padding:4.6mm 0;border-bottom:.5pt solid var(--salvia);}
.sumario .num{font-family:'Tenor Sans',sans-serif;font-size:9pt;
  color:var(--agua);width:10mm;flex:none;}
.sumario .tit{font-size:17pt;font-weight:300;width:48mm;flex:none;line-height:1.15;}
.sumario .des{font-size:9.8pt;line-height:1.5;color:var(--selva);flex:1;}
.sumario .marca{position:absolute;bottom:16mm;left:20mm;
  font-family:'Tenor Sans',sans-serif;font-size:7pt;letter-spacing:.26em;
  text-transform:uppercase;color:var(--salvia);line-height:2;}

/* ============ 3 · EDITORIAL ============ */
.editorial h1{font-size:44pt;font-weight:300;line-height:1.02;margin:4mm 0 7mm;}
.editorial .cuerpo{column-count:2;column-gap:8mm;font-size:10.2pt;line-height:1.72;}
.editorial .firma{margin-top:6mm;font-family:'Tenor Sans',sans-serif;font-size:7.2pt;
  letter-spacing:.18em;text-transform:uppercase;color:var(--selva);text-indent:0;}

/* ============ aperturas de seccion a sangre ============ */
.apertura img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.apertura .bloque{position:absolute;left:20mm;right:20mm;bottom:20mm;color:#fff;}
.apertura .romano{font-family:'Tenor Sans',sans-serif;font-size:7.4pt;letter-spacing:.4em;
  text-transform:uppercase;color:rgba(255,255,255,.85);}
.apertura h1{font-size:52pt;font-weight:300;line-height:1.02;margin:3mm 0 3mm;}
.apertura .bajada{font-size:12pt;font-style:italic;font-weight:300;
  color:rgba(255,255,255,.93);max-width:150mm;line-height:1.5;}

/* ============ 5 · REPORTAJE a 3 columnas ============ */
.reportaje{padding:18mm 20mm 0;}
.reportaje h2{font-size:31pt;font-weight:300;line-height:1.08;margin:3mm 0 6mm;max-width:190mm;}
.reportaje .cols{display:flex;gap:9mm;}
.reportaje .txt{flex:1;column-count:2;column-gap:9mm;}
.reportaje .lateral{width:58mm;flex:none;border-top:.5pt solid var(--salvia);padding-top:3.5mm;}
/* 3.6 mm y no 5: al entrar "La fauna" los datos pasaron de cuatro a cinco y el
   de deporte se salia de la columna, contra la banda de foto */
.reportaje .dato{margin-bottom:3.6mm;}
.reportaje .dato dt{font-family:'Tenor Sans',sans-serif;font-size:6.6pt;letter-spacing:.26em;
  text-transform:uppercase;color:var(--agua);margin-bottom:1.2mm;}
.reportaje .dato dd{font-size:9.4pt;line-height:1.46;}
.reportaje .banda{position:absolute;left:0;right:0;bottom:0;height:72mm;}
.reportaje .banda img{width:100%;height:100%;object-fit:cover;display:block;}

/* ============ EL PROYECTO · masterplan completo, sin recorte ============ */
.plano-maestro .lienzo{position:absolute;top:5mm;left:0;width:280mm;}
.plano-maestro .lienzo img{width:100%;display:block;}
.plano-maestro .eyebrow{position:absolute;left:20mm;top:168mm;}
.plano-maestro .txt{position:absolute;left:20mm;right:20mm;bottom:15mm;
  display:flex;gap:12mm;align-items:flex-end;}
.plano-maestro h2{font-size:23pt;font-weight:300;line-height:1.12;flex:none;width:132mm;}
.plano-maestro .lead{font-size:10.4pt;font-style:italic;font-weight:300;line-height:1.5;
  color:var(--selva);flex:1;padding-bottom:1mm;}

/* ============ FICHA ============ */
.fichapag{padding:18mm 20mm 0;}
.fichapag h2{font-size:31pt;font-weight:300;line-height:1.08;margin:3mm 0 6mm;max-width:180mm;}
.fichapag .arriba{display:flex;gap:11mm;margin-bottom:7mm;}
.fichapag .arriba .txt{flex:1;column-count:2;column-gap:9mm;}
.fichapag .arriba figure{width:104mm;flex:none;}
.fichapag .arriba figure img{width:100%;height:52mm;object-fit:cover;display:block;}
.fichapag figcaption{font-family:'Tenor Sans',sans-serif;font-size:6.6pt;letter-spacing:.24em;
  text-transform:uppercase;color:var(--salvia);margin-top:2.2mm;}
.ficha .fila{display:flex;border-top:.5pt solid var(--salvia);padding:2.7mm 0;gap:6mm;}
.ficha .fila:last-child{border-bottom:.5pt solid var(--salvia);}
.ficha .k{font-family:'Tenor Sans',sans-serif;font-size:6.6pt;letter-spacing:.22em;line-height:1.5;
  text-transform:uppercase;color:var(--agua);width:44mm;flex:none;padding-top:1mm;}
.ficha .v{font-size:10.2pt;line-height:1.4;flex:1;}

/* ============ UBICACION · los tres acercamientos ============ */
.ubicacion{padding:12mm 20mm 0;}
.ubicacion h2{font-size:27pt;font-weight:300;line-height:1.1;margin:2.5mm 0 6mm;max-width:200mm;}
/* Los tres acercamientos —pais, isla, zona— son una pantalla cada uno en
   vertical, asi que los tres `figure` cuelgan directo de la `section` y ya no
   existen los envoltorios `.zooms` (flex) ni `.chicos` (la columna angosta).
   En papel la maqueta se rehace con floats, sin cambiar el `display` de la
   pagina: los dos chicos flotan a la izquierda en la misma columna de 66mm y
   el grande se queda en flujo normal, corrido a la derecha por los 66mm de la
   columna mas los 6mm de calle, de modo que su ancho automatico da los mismos
   168mm que le daba el `flex:1`.

   Los 72mm de corrimiento van como `margin-left:66mm` + `padding-left:6mm` y
   no como un solo `margin-left:72mm`, que seria lo obvio: Chromium redondea
   cada longitud a 1/64 de pixel por separado, y 72mm de golpe cae en un
   sesentaycuatroavo distinto del que caen 66mm y 6mm redondeados aparte —que
   es como los redondeaba el flex, uno en el ancho de `.chicos` y otro en el
   `gap`. Ese 0.0156px de diferencia bastaba para remuestrear el mapa y mover
   el 0.013% de los pixeles de la pagina. Compuesto en dos valores, la pagina
   sale identica bit a bit.

   Se usan floats y no grid a proposito. Con grid, el mapa grande tendria que
   abarcar las dos filas de los chicos, y mide 135.0mm contra los 131.1mm que
   suma la columna: el algoritmo de grid reparte esos 3.9mm sobrantes entre las
   dos filas que abarca y baja el mapa de Cozumel unos 2mm. El float no reparte
   nada, y por eso el papel sale identico.

   Como los dos chicos ya no son hermanos —cada uno vive en su pantalla—, los
   selectores `.chicos figure:first-child` y `.chicos figure+figure` que antes
   distinguian sus dos alturas dejaron de casar; ahora las distingue su clase:
   `.pais` es el mapa de Mexico a 42mm y `.isla` el de Cozumel a 74mm. */
.ubicacion .chico{float:left;clear:left;width:66mm;}
.ubicacion .chico img{width:100%;display:block;object-fit:cover;}
.ubicacion .chico.pais img{height:42mm;}
.ubicacion .chico.isla{margin-top:5mm;}
.ubicacion .chico.isla img{height:74mm;}
/* el `.pie` es absoluto y no se toca: se sigue midiendo contra la pagina */
.ubicacion .grande{margin-left:66mm;padding-left:6mm;position:relative;}
.ubicacion .grande img{width:100%;height:130mm;object-fit:cover;display:block;}
.ubicacion figcaption{font-family:'Tenor Sans',sans-serif;font-size:6.6pt;letter-spacing:.3em;
  text-transform:uppercase;color:var(--selva);margin-top:2.4mm;}
/* rotulo del desarrollo, sobre su poligono: reemplaza al que traia quemado Canva */
.ubicacion .rotulo{position:absolute;left:72%;top:58%;
  font-family:'Tenor Sans',sans-serif;font-size:7pt;letter-spacing:.3em;
  text-transform:uppercase;color:#fff;}
.ubicacion .pie{position:absolute;left:20mm;right:20mm;bottom:15mm;
  display:flex;gap:9mm;border-top:.5pt solid var(--salvia);padding-top:3.4mm;}
.ubicacion .pie .b{flex:1;}
.ubicacion .pie dt{font-family:'Tenor Sans',sans-serif;font-size:6.4pt;letter-spacing:.24em;
  text-transform:uppercase;color:var(--agua);margin-bottom:1.5mm;}
.ubicacion .pie dd{font-size:9.8pt;line-height:1.5;}

/* ============ EL LOTE ============ */
.lote{padding:14mm 20mm 0;}
.lote h2{font-size:27pt;font-weight:300;line-height:1.1;margin:2.5mm 0 6mm;}
.lote .caja{display:flex;gap:11mm;align-items:flex-start;}
.lote figure{flex:1;position:relative;}
/* 98 mm y no 128: el mapa se reencuadro para dejar fuera el ovalo de la primera
   etapa (ver `prep_ubicacion.py`) y quedo mas apaisado. El espacio que se libera
   se lo lleva la nota, que a ancho completo se lee mejor que en la columna. */
.lote figure img{width:100%;height:98mm;object-fit:cover;display:block;}
.lote figcaption{font-family:'Tenor Sans',sans-serif;font-size:6.6pt;letter-spacing:.24em;
  text-transform:uppercase;color:var(--salvia);margin-top:2.4mm;}
.lote .marca{position:absolute;font-family:'Tenor Sans',sans-serif;font-size:6.8pt;
  letter-spacing:.28em;text-transform:uppercase;color:#fff;}
.lote .datos{width:76mm;flex:none;}
.lote .fichab .fila{border-top:.5pt solid var(--salvia);padding:2.8mm 0;}
.lote .fichab .fila:last-child{border-bottom:.5pt solid var(--salvia);}
.lote .fichab .k{font-family:'Tenor Sans',sans-serif;font-size:6.4pt;letter-spacing:.22em;
  text-transform:uppercase;color:var(--agua);margin-bottom:1.4mm;}
.lote .fichab .v{font-size:10pt;line-height:1.45;}
.lote .nota{font-size:10.4pt;line-height:1.7;margin-top:7mm;max-width:232mm;}
.lote .cerca{position:absolute;left:20mm;right:20mm;bottom:16mm;
  display:flex;gap:9mm;border-top:.5pt solid var(--salvia);padding-top:3.4mm;}
.lote .cerca .b{flex:1;}
.lote .cerca dt{font-family:'Tenor Sans',sans-serif;font-size:6.4pt;letter-spacing:.24em;
  text-transform:uppercase;color:var(--agua);margin-bottom:1.5mm;}
.lote .cerca dd{font-size:9.8pt;line-height:1.5;}

/* ============ MAPA DE ESPACIOS COMUNES ============ */
.mapa{padding:14mm 20mm 0;}
.mapa h2{font-size:26pt;font-weight:300;line-height:1.1;margin:2.5mm 0 4mm;}
.mapa .lienzo{width:240mm;margin:0 auto 5mm;}
.mapa .lienzo img{width:100%;display:block;}
.mapa .leyenda{display:flex;gap:7mm;border-top:.5pt solid var(--salvia);padding-top:3.5mm;}
.mapa .col{flex:1;}
.mapa .grupo{margin-bottom:3.4mm;break-inside:avoid;}
.mapa .grupo h3{font-family:'Tenor Sans',sans-serif;font-size:6.2pt;letter-spacing:.24em;
  text-transform:uppercase;color:var(--agua);margin-bottom:1.2mm;font-weight:400;}
.mapa .grupo li{list-style:none;font-size:8.6pt;line-height:1.42;}
.mapa .grupo li b{font-weight:400;color:var(--selva);}
.mapa .grupo .adicional{font-style:italic;color:var(--selva);font-size:8.6pt;line-height:1.42;}

/* ============ ETAPAS ============ */
.etapas{padding:16mm 20mm 0;}
.etapas h2{font-size:29pt;font-weight:300;line-height:1.08;margin:3mm 0 5mm;max-width:170mm;}
.etapas .banda{width:240mm;height:74mm;margin-bottom:7mm;overflow:hidden;}
.etapas .banda img{width:100%;display:block;margin-top:-8mm;}
.etapas .cuatro{display:flex;gap:8mm;}
.etapas .et{flex:1;border-top:.5pt solid var(--salvia);padding-top:3.5mm;}
.etapas .et .n{font-size:30pt;font-weight:300;line-height:1;color:var(--agua);}
.etapas .et h3{font-family:'Tenor Sans',sans-serif;font-size:6.6pt;letter-spacing:.26em;
  text-transform:uppercase;color:var(--selva);margin:2mm 0 2.5mm;font-weight:400;}
.etapas .et p{font-size:9.4pt;line-height:1.5;}

/* ============ ESPACIO COMUN a sangre ============ */
.espacio img.foto{position:absolute;top:0;left:0;width:280mm;height:142mm;object-fit:cover;}
.espacio .cont{position:absolute;left:20mm;right:20mm;top:156mm;
  display:flex;gap:12mm;align-items:flex-start;}
.espacio h2{font-size:26pt;font-weight:300;line-height:1.12;width:106mm;flex:none;}
.espacio .cuerpo{flex:1;column-count:2;column-gap:9mm;font-size:10pt;line-height:1.7;}

/* ============ DUPLA · dos espacios en una pagina ============ */
.dupla{padding:16mm 20mm 0;}
.dupla h2{font-size:27pt;font-weight:300;line-height:1.1;margin:3mm 0 6mm;max-width:180mm;}
/* Aqui vivian `.dupla .par{display:flex;gap:11mm}` y `.dupla .mitad{flex:1}`.
   Las dos murieron cuando el `.par` salio del markup al partir la pagina en
   dos pantallas: ya no existe ningun `.par` en revista.html y la `.mitad` dejo
   de ser item de un flex —ahora es item del grid de `.page.dupla`, al final de
   esta hoja—, asi que el `flex:1` tampoco hacia nada. Quien quiera tocar el
   ancho de las mitades o la calle entre ellas va a `.page.dupla`. */
.dupla .mitad img{width:100%;height:94mm;object-fit:cover;display:block;}
.dupla .mitad h3{font-size:16pt;font-weight:300;margin:4mm 0 2.5mm;line-height:1.15;}
.dupla .mitad p{font-size:9.8pt;line-height:1.62;text-align:justify;}
.dupla img.ancha{width:240mm;height:88mm;object-fit:cover;object-position:center 62%;display:block;margin-bottom:6mm;}
.dupla .cierre{position:absolute;left:20mm;right:20mm;bottom:16mm;
  border-top:.5pt solid var(--salvia);padding-top:3.2mm;
  font-size:9.6pt;font-style:italic;color:var(--selva);line-height:1.5;}

/* ============ TRIO · tres espacios en una pagina ============ */
.trio{padding:16mm 20mm 0;}
.trio h2{font-size:27pt;font-weight:300;line-height:1.1;margin:3mm 0 6mm;max-width:180mm;}
.trio .fila{display:flex;gap:9mm;}
.trio .tercio{flex:1;}
.trio .tercio img{width:100%;height:62mm;object-fit:cover;display:block;}
.trio .tercio h3{font-size:14.5pt;font-weight:300;margin:3.5mm 0 2mm;line-height:1.15;}
.trio .tercio p{font-size:9.4pt;line-height:1.58;text-align:justify;}
.trio .pieblanco{position:absolute;left:20mm;right:20mm;bottom:16mm;
  border-top:.5pt solid var(--salvia);padding-top:3.2mm;
  font-size:9.6pt;font-style:italic;color:var(--selva);line-height:1.5;}

/* ============ SERVICIOS ============ */
.servicios{padding:16mm 20mm 0;}
.servicios h2{font-size:29pt;font-weight:300;line-height:1.08;margin:3mm 0 5mm;max-width:160mm;}
.servicios .arriba{display:flex;gap:11mm;align-items:flex-start;margin-bottom:7mm;}
.servicios .arriba .cuerpo{flex:1;}
.servicios .arriba figure{width:112mm;flex:none;}
.servicios .arriba figure img{width:100%;height:66mm;object-fit:cover;display:block;}
.servicios .rejilla{display:flex;gap:8mm;border-top:.5pt solid var(--salvia);padding-top:4mm;}
.servicios .celda{flex:1;}
.servicios .celda dt{font-family:'Tenor Sans',sans-serif;font-size:6.4pt;letter-spacing:.24em;
  text-transform:uppercase;color:var(--agua);margin-bottom:1.6mm;}
.servicios .celda dd{font-size:9.6pt;line-height:1.5;}

/* ============ EDIFICIO · presentacion ============ */
.edificio{padding:0;}
.edificio .banda{width:280mm;height:78mm;overflow:hidden;}
.edificio .banda img{width:100%;height:100%;object-fit:cover;display:block;}
.edificio .cont{padding:10mm 20mm 0;display:flex;gap:12mm;}
.edificio .izquierda{width:110mm;flex:none;}
.edificio h2{font-size:31pt;font-weight:300;line-height:1.05;margin:2.5mm 0 4mm;}
.edificio .lead{font-size:10.4pt;line-height:1.7;text-align:justify;}
.edificio .derecha{flex:1;}
.tipos{width:100%;border-collapse:collapse;}
.tipos caption{font-family:'Tenor Sans',sans-serif;font-size:6.4pt;letter-spacing:.24em;
  text-transform:uppercase;color:var(--agua);text-align:left;padding-bottom:2mm;}
.tipos th{font-family:'Tenor Sans',sans-serif;font-size:6pt;letter-spacing:.2em;
  text-transform:uppercase;color:var(--selva);font-weight:400;text-align:left;
  border-bottom:.5pt solid var(--salvia);padding:0 3mm 1.6mm 0;}
.tipos td{font-size:9.2pt;line-height:1.3;padding:1.45mm 3mm 1.45mm 0;
  border-bottom:.4pt solid rgba(182,185,175,.55);vertical-align:top;}
.tipos td.uni{font-family:'Tenor Sans',sans-serif;font-size:7.4pt;letter-spacing:.08em;
  color:var(--selva);white-space:nowrap;}
.tipos td.m2{white-space:nowrap;}
.tipos tr.nivel td{border-bottom:none;padding-top:2.8mm;padding-bottom:.7mm;
  font-family:'Tenor Sans',sans-serif;font-size:6.2pt;letter-spacing:.24em;
  text-transform:uppercase;color:var(--agua);}
.tipos tr.nivel:first-child td{padding-top:0;}
.edificio .nota{font-size:9.2pt;line-height:1.5;margin-top:4mm;color:var(--selva);font-style:italic;}

/* ============ LAMINA · planta arquitectonica ============ */
.lamina{padding:15mm 20mm 0;}
.lamina .cab{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:.5pt solid var(--salvia);padding-bottom:3.5mm;}
.lamina h2{font-size:27pt;font-weight:300;line-height:1;}
.lamina .sub{font-size:10.8pt;font-style:italic;color:var(--selva);}
.lamina .dibujo{margin-top:5mm;height:130mm;}
.lamina .dibujo img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;}
.lamina .pie{position:absolute;left:20mm;right:20mm;bottom:15mm;
  display:flex;gap:9mm;border-top:.5pt solid var(--salvia);padding-top:3mm;}
.lamina .pie .b{flex:1;}
.lamina .pie dt{font-family:'Tenor Sans',sans-serif;font-size:6.2pt;letter-spacing:.24em;
  text-transform:uppercase;color:var(--agua);margin-bottom:1.2mm;}
.lamina .pie dd{font-size:9.2pt;line-height:1.45;}

/* tres plantas verticales en una sola pagina */
.lamina .tres{display:flex;gap:5mm;margin-top:7mm;align-items:flex-start;}
.lamina .tres figure{flex:1;}
.lamina .tres img{width:100%;height:auto;display:block;}
.lamina .tres figcaption{font-family:'Tenor Sans',sans-serif;font-size:6.2pt;letter-spacing:.24em;
  text-transform:uppercase;color:var(--salvia);text-align:center;padding-top:2.5mm;}

/* las tres plantas del Edificio B ocupan menos alto del que hay: el interior
   del edificio cierra la pagina a sangre en vez de dejar el hueco */
.lamina .bandapie{position:absolute;left:0;right:0;bottom:0;height:50mm;}
.lamina .bandapie img{width:100%;height:100%;object-fit:cover;object-position:center 58%;display:block;}
.lamina.conbanda .pie{bottom:58mm;}

/* ============ UNIDAD · plano + datos ============ */
.unidad{padding:16mm 20mm 0;}
.unidad .cab{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:.5pt solid var(--salvia);padding-bottom:4mm;}
.unidad h2{font-size:34pt;font-weight:300;line-height:1;}
.unidad .sub{font-size:11.6pt;font-style:italic;color:var(--selva);}
.unidad .caja{display:flex;gap:12mm;margin-top:7mm;}
.unidad .dibujo{flex:1;}
.unidad .dibujo img{width:100%;height:134mm;object-fit:contain;object-position:center;display:block;}
.unidad .datos{width:52mm;flex:none;}
.unidad .datos dt{font-family:'Tenor Sans',sans-serif;font-size:6.6pt;letter-spacing:.26em;
  text-transform:uppercase;color:var(--agua);margin-bottom:1.8mm;}
.unidad .datos dd{font-size:10.4pt;line-height:1.6;margin-bottom:6mm;}
.unidad .nota{font-size:9.6pt;font-style:italic;color:var(--selva);line-height:1.55;
  border-top:.5pt solid var(--salvia);padding-top:3.5mm;}

/* villa: render en banda + plano debajo */
.villa{padding:0;}
.villa .banda{width:280mm;height:86mm;overflow:hidden;}
.villa .banda img{width:100%;height:100%;object-fit:cover;display:block;}
.villa .cont{padding:8mm 20mm 0;display:flex;gap:12mm;}
.villa .dibujo{flex:1;height:104mm;}
.villa .dibujo img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;}
.villa .datos{width:66mm;flex:none;}
.villa h2{font-size:30pt;font-weight:300;line-height:1;margin-bottom:1.5mm;}
.villa .sub{font-size:10.6pt;font-style:italic;color:var(--selva);line-height:1.45;
  margin-bottom:5mm;padding-bottom:4mm;border-bottom:.5pt solid var(--salvia);}
.villa .datos dt{font-family:'Tenor Sans',sans-serif;font-size:6.4pt;letter-spacing:.26em;
  text-transform:uppercase;color:var(--agua);margin-bottom:1.5mm;}
.villa .datos dd{font-size:9.8pt;line-height:1.55;margin-bottom:4.5mm;}

/* ============ CIERRE ============ */
.cierre-pag{padding:18mm 20mm 0;}
.cierre-pag h2{font-size:31pt;font-weight:300;line-height:1.08;margin:3mm 0 6mm;max-width:180mm;}
.cierre-pag .arriba{display:flex;gap:11mm;margin-bottom:8mm;}
.cierre-pag .arriba .txt{flex:1;column-count:2;column-gap:9mm;}
.cierre-pag .arriba figure{width:104mm;flex:none;}
.cierre-pag .arriba figure img{width:100%;height:58mm;object-fit:cover;display:block;}
.cierre-pag .contacto{position:absolute;left:20mm;right:20mm;bottom:18mm;
  display:flex;gap:9mm;border-top:.5pt solid var(--salvia);padding-top:4mm;}
.cierre-pag .contacto .b{flex:1;}
.cierre-pag .contacto dt{font-family:'Tenor Sans',sans-serif;font-size:6.4pt;letter-spacing:.24em;
  text-transform:uppercase;color:var(--agua);margin-bottom:1.6mm;}
.cierre-pag .contacto dd{font-size:9.8pt;line-height:1.5;}

/* ============ pantallas verticales: en papel no existen ============
   Los divs .pantalla son contenedores de agrupacion de la version vertical.
   `display:contents` los borra del arbol de cajas, de modo que el papel se
   maqueta exactamente igual que antes de partir las paginas. */
.pantalla{display:contents;}

/* La unica pagina que si nota el corte es la dupla: sus dos .mitad vivian
   dentro de un `.par` flex que quedaba a caballo entre las dos pantallas
   —HTML invalido—, asi que el .par se elimino del markup y aqui la propia
   .page vuelve a poner las mitades lado a lado.
   El padding no se redeclara porque ya lo pone `.dupla{padding:16mm 20mm 0}`,
   mas arriba. El `column-gap:11mm` de aqui es el UNICO sitio donde vive la
   calle entre las dos mitades: heredaba el valor del viejo `.dupla .par`, que
   ya no existe —se borro con su regla—, asi que se cambia aqui y en ningun
   otro lado. `align-content:start` es obligatorio: la .page tiene alto fijo
   de 210mm y sin el las filas se estirarian a llenarlo.
   El `.cierre` y el `.folio` son absolutos, o sea que no son items del grid
   y no llevan grid-column a proposito: al dárselo, su bloque contenedor
   pasaria a ser el area de grid y se recorrerian los 20mm del padding.
   AVISO para quien agregue algo a una pagina .dupla: todo hijo nuevo que no
   sea absoluto entra al grid como una COLUMNA de la fila siguiente, no como
   una banda a lo ancho. Si tiene que ocupar el ancho completo —un pie, otra
   foto ancha— hay que sumarlo a la lista de `grid-column:1 / -1` de abajo. */
.page.dupla{display:grid;grid-template-columns:1fr 1fr;column-gap:11mm;
  align-content:start;}
.page.dupla .eyebrow,
.page.dupla h2,
.page.dupla img.ancha{grid-column:1 / -1;}

/* ============ interfaz de pantalla: en papel no existe ============
   Tres elementos que no son editoriales sino interfaz: el "Toca para
   ampliar" de los planos y los mapas, el boton de WhatsApp del cierre, y el
   parrafo .atribucion-interfaz que Mexico y Cozumel (pantallas 3 y 4)
   agregan para llevar "© OpenStreetMap · © CARTO" con su propio mapa. Este
   ultimo NO es el credito de la pantalla 5 (el de "Zona hotelera norte"),
   que vive dentro del figcaption original y SI se imprime porque siempre se
   imprimio: en papel los tres mapas comparten pagina y ese es el pie que los
   cubre a los tres. Se escriben en revista.html porque el visor de la
   Task 10 los necesita en el DOM (o, en el caso de la atribucion, porque la
   licencia de CARTO exige que cada mapa la lleve tambien en pantalla), y
   aqui se borran para que el PDF salga exactamente igual que antes de que
   existieran. Si alguien anade otro elemento de interfaz, va a esta lista. */
.pie-zoom,.whatsapp,.atribucion-interfaz{display:none;}
/* El folio de pantalla y el visor de planos de la Task 10 son los mismos dos
   casos: revista.js los inyecta al final de <body>, fuera de cualquier
   .page, y vertical.css (media="screen") no llega aqui para ocultarlos. El
   visor es un <dialog> sin [open], que el navegador ya esconde solo; el
   folio es un <div> de texto plano ("12 / 48") sin esa proteccion, y sin
   esta regla aparece como una pagina 33 suelta al final del PDF. */
.folio-pantalla,.visor{display:none;}