/* =============================================================================
   La Torre Iberdrola  ·  estático de iberdrola.com  ·  scope #torreib · clases tib_
   Dos tamaños de diseño, 565 y 375, y UN solo corte de composición: @container tib (min-width: 565px), y sólo con
   JS (`data-js`, lo pone main.js). Por debajo, y sin JS a cualquier ancho, la composición de móvil (RF-09, RD-10).
   Medidas: specs/torre-iberdrola/design/ (Figma es la única fuente). Bases: tipos-carga-slider (slider),
   tipos-inteligencia-artificial (desplegables sobre dibujo), como-funciona-edge-computing (blindaje).
   ============================================================================= */

/* ===== IberPangea + IberPangea Text (self-contained) ======================= */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/torre-iberdrola/fonts/IberPangea-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/torre-iberdrola/fonts/IberPangea-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/torre-iberdrola/fonts/IberPangeaText-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/torre-iberdrola/fonts/IberPangeaText-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/torre-iberdrola/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* ===== Tokens (design/tokens.json) ========================================= */
#torreib{
  --tib-green1:#007F33;   /* Green 1: títulos, cifras, número, píldora abierta */
  --tib-forest:#00402A;   /* Iberdrola Forest: textos, bordes de la píldora y del icono */
  --tib-sand:#FFF5EC;     /* Iberdrola Sand: cajas de datos y sostenibilidad */
  --tib-sand1:#FFFEFF;    /* Sand 1: etiqueta de la píldora abierta, botón × */
  --tib-sand3:#D8CFC7;    /* Sand 3: trazos */
  --tib-sky:#F0FBFF;      /* Opacidad/Sky 4 10 %: panel de Singularidades */
  --tib-blanco:#FFFFFF;
}

/* ===== Marco de la pieza ===================================================
   Como mucho 980, centrada (P4); `margin:0 auto` SIN margen vertical: se incrusta y el sitio pone su espaciado. La
   raíz es el ÚNICO contenedor de la composición (`tib`); la tarjeta va en `.tib_in`, porque @container no reestila el
   propio contenedor. */
#torreib{
  container:tib / inline-size;
  width:100%; max-width:980px; margin:0 auto; padding:0; box-sizing:border-box; position:relative;
}

/* ===== Blindaje frente al theme de Liferay (F4, P4) ======================== */
#torreib *{color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit;
  text-transform:inherit; white-space:inherit; text-indent:0; text-decoration:none;
  margin:0; padding:0; box-sizing:border-box; border:0; background:transparent;
  float:none; min-width:0; max-width:none; box-shadow:none; opacity:1;}
#torreib ul,#torreib ol,#torreib li{list-style:none;}
#torreib li::marker{content:none;}
#torreib li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#torreib *` no alcanza a los pseudo-elementos: se blindan aparte y SIN `content`. */
#torreib *::before,#torreib *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#torreib button{cursor:pointer; appearance:none; -webkit-appearance:none; border-radius:0;
  width:auto; height:auto; min-height:0; line-height:inherit; outline:none; text-align:left;}
#torreib img{border:0; max-width:none;}
#torreib svg{overflow:visible;}
#torreib strong{font-weight:600;}
#torreib em{font-style:italic;}
#torreib sup{font-size:.645em; line-height:0; vertical-align:super;}
/* La RAÍZ declara todo lo heredable: si no, hereda del portal y el `inherit` de arriba lo propaga hacia dentro. */
#torreib{
  font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--tib-forest);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none; word-break:normal; overflow-wrap:break-word;
}

/* `display` NO se hereda: elemento a elemento, con `!important` y el juego completo de cada flex o grid. */
#torreib{display:block !important;}
#torreib .tib_in,#torreib .tib_cab,#torreib .tib_dim,#torreib .tib_sg,#torreib .tib_sos{
  display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;}
#torreib .tib_titulo,#torreib .tib_entradilla,#torreib .tib_h3,#torreib .tib_nota,#torreib .tib_sg_cab,
#torreib .tib_sg_texto,#torreib .tib_sg_texto p,#torreib .tib_sos_txt,#torreib .tib_slider,
#torreib .tib_sg_escena,#torreib .tib_sg_dibujo,#torreib .tib_inaug{display:block !important;}
/* Lo de cada composición: `tib_solo-g` (grande) y `tib_solo-m` (móvil), con más peso que cualquier `display` de
   arriba. Por defecto, la de móvil. */
#torreib .tib_solo-m.tib_solo-m{display:block !important;}
#torreib .tib_solo-g.tib_solo-g{display:none !important;}
#torreib .tib_datos{display:grid !important; grid-template-columns:minmax(0,1fr); align-items:start; justify-items:stretch;}
#torreib .tib_datos_lista{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;}
#torreib .tib_dato{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start;}
#torreib .tib_dato_ico{display:block !important;}
#torreib .tib_dato_ico img{display:block !important;}
#torreib .tib_dato_txt{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start;}
#torreib .tib_dato_et,#torreib .tib_dato_val{display:block !important;}
#torreib .tib_dato_txt em,#torreib .tib_dato_fuerte,#torreib sup,#torreib .tib_nota em{display:inline !important;}
#torreib .tib_cajas{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;}
#torreib .tib_caja{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start;}
#torreib .tib_cifra{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; justify-content:flex-end;}
#torreib .tib_num,#torreib .tib_unidad{display:block !important;}
#torreib .tib_nav{display:none !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between;}
#torreib .tib_cont{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center;}
#torreib .tib_cont_v,#torreib .tib_cont_n{display:inline !important;}
#torreib .tib_flechas{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-end;}
#torreib .tib_flecha{display:block !important;}
#torreib .tib_sg_panel{display:grid !important; grid-template-columns:minmax(0,1fr); align-items:start; justify-items:center;}
#torreib .tib_sg_lista{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;}
#torreib .tib_sg_item{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;}
#torreib .tib_sg_btn{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between;}
#torreib .tib_sg_et,#torreib .tib_sg_boton{display:block !important;}
#torreib .tib_sg_num{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center;}
#torreib .tib_sg_mas{display:block !important;}
#torreib .tib_sos_lista{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;}
#torreib .tib_sos_caja{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start;}
#torreib .tib_sos_ico,#torreib .tib_sos_ico img{display:block !important;}
#torreib .tib_sr,#torreib .tib_oculto{display:block !important;}
/* Un solo mecanismo para ocultar un panel: `hidden`. Sin esto, el `display … !important` de arriba lo anula. */
#torreib .tib_sg_texto[hidden]{display:none !important;}

/* ===== Tarjeta (RD-02) =====================================================
   El trazo, `inset`: en Figma no ocupa (565 de tarjeta, 24 de lado, 517 de contenido). */
#torreib .tib_in{
  --tib-modo:m;
  background:var(--tib-blanco); border-radius:15px; box-shadow:inset 0 0 0 1px var(--tib-sand3);
  padding:32px 24px; gap:40px;
}

/* ===== Cabecera (RD-03) ====================================================
   El theme pinta h1/h2/h3 de #427314 !important en móvil: el color de los títulos, con !important. */
#torreib .tib_cab{gap:8px;}
#torreib .tib_titulo{font-family:'IberPangea',sans-serif; font-weight:600; font-size:32px; line-height:36px;
  color:var(--tib-green1) !important;}
#torreib .tib_entradilla{font-family:'IberPangea',sans-serif; font-weight:400; font-size:24px; line-height:28px;
  color:var(--tib-green1);}
#torreib .tib_h3{font-family:'IberPangea',sans-serif; font-weight:400; font-size:24px; line-height:28px;
  color:var(--tib-forest) !important;}

/* ===== Datos (RD-04, RD-05) ================================================
   Móvil (375): la ilustración encima, la caja debajo (hueco 24); filas 8/16, icono 47. D-09: las cinco filas con el
   icono a 16 (en Figma la primera estaba a 8). */
#torreib .tib_datos{gap:24px;}
/* Una sola ilustración (ronda 2, D-15): el skyline con la torre, a su tamaño y recortado por la caja (radio 15).
   Móvil: la caja, de todo el ancho y 357 de alto; la torre a 13 de la derecha y 18 de arriba, y el skyline crece por la
   izquierda.
   Por debajo de 327 de contenido, todo encoge junto (`--tib-u`, el píxel del diseño de 375). */
#torreib .tib_inaug{--tib-u:calc(min(100cqi - 48px, 327px) / 327);
  grid-row:1; position:relative; overflow:hidden; border-radius:15px; width:100%; height:calc(var(--tib-u) * 357);}
#torreib .tib_inaug img{position:absolute; top:calc(var(--tib-u) * 4); left:calc(100% - var(--tib-u) * 934);
  width:calc(var(--tib-u) * 1831); height:auto;}
#torreib .tib_datos_lista{grid-row:2; background:var(--tib-sand); border-radius:16px; padding:8px 0; gap:0;}
#torreib .tib_dato{gap:10px; padding:8px 16px; border-radius:16px;}
#torreib .tib_dato_ico{flex:none; position:relative; width:47px; height:47px; overflow:hidden;}
#torreib .tib_dato_ico img{position:absolute;}
/* Cada glifo con el «inset» de su nodo (el mismo a 43 y a 47: va en %). */
#torreib [data-ico="conferencia"] img{top:15.65%; right:15.67%; bottom:16.95%; left:15.58%; width:68.75%; height:67.4%;}
#torreib [data-ico="compas"] img{top:15.66%; right:15.43%; bottom:15.59%; left:15.84%; width:68.73%; height:68.75%;}
#torreib [data-ico="grua"] img{top:17.49%; right:15.64%; bottom:16.89%; left:15.61%; width:68.75%; height:65.62%;}
#torreib [data-ico="iberdrola"] img{top:18.35%; right:15.11%; bottom:18.1%; left:15.09%; width:69.8%; height:63.55%;}
#torreib [data-ico="edificios-ciudad"] img{top:16.21%; right:21.83%; bottom:15.03%; left:21.81%; width:56.36%; height:68.76%;}
#torreib .tib_dato_txt{flex:1 1 auto; min-width:0; color:var(--tib-forest);}
#torreib .tib_dato_et{font-family:'IberPangea Text',sans-serif; font-weight:400; font-size:16px; line-height:20px;}
#torreib .tib_dato_val,#torreib .tib_dato_fuerte{font-family:'IberPangea Text',sans-serif; font-weight:600; font-size:19px; line-height:24px;}

/* ===== Dimensiones: slider (RD-06, RF-01, RF-03) ===========================
   Sin JS: las 6 cajas apiladas (hueco 16) y sin navegación. Con JS, las 6 en una celda: el alto es el de la más alta,
   y los botones no saltan. Mínimo, el del diseño (136 a 565, 155 a 375). */
#torreib .tib_dim{gap:16px;}
#torreib .tib_cajas{gap:16px;}
#torreib .tib_caja{min-height:155px; padding:16px; gap:11px; background:var(--tib-blanco); border:1px solid var(--tib-sand3);
  border-radius:15px;}
#torreib .tib_caja[data-c="3"]{gap:12px;}
#torreib .tib_caja[data-c="6"]{gap:14px;}
#torreib .tib_cifra{width:100%; font-family:'IberPangea',sans-serif; font-weight:600; color:var(--tib-green1);}
#torreib .tib_num{font-size:28px; line-height:35px; white-space:nowrap;}
#torreib .tib_unidad{font-size:16px; line-height:normal;}
/* La 6.ª, cifra y unidad en la misma línea, abajo alineadas, hueco 8, unidad a 18 (variante 6 de slider-dimensiones). */
#torreib .tib_caja[data-c="6"] .tib_cifra{display:flex !important; flex-direction:row; flex-wrap:wrap; align-items:flex-end;
  justify-content:flex-start; column-gap:8px; row-gap:0;}
#torreib .tib_caja[data-c="6"] .tib_unidad{font-size:18px;}
#torreib .tib_nota{width:100%; font-family:'IberPangea',sans-serif; font-weight:400; font-size:14px; line-height:normal;
  color:var(--tib-forest);}

#torreib .tib_nav{margin-top:24px; min-height:32px; padding:0 8px; gap:16px;}
#torreib .tib_cont{position:relative; min-height:32px; padding:5px 16px; border:1px solid var(--tib-forest); border-radius:24px;
  font-family:'IberPangea Text',sans-serif; font-style:italic; font-weight:400; font-size:14px; line-height:18px;
  color:var(--tib-forest); white-space:nowrap;}
#torreib .tib_cont_n{color:var(--tib-green1);}
#torreib .tib_sr,#torreib .tib_oculto{position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; margin:-1px !important;
  padding:0 !important; border:0 !important;}
#torreib .tib_flechas{gap:16px;}
#torreib .tib_flecha{flex:0 0 auto; position:relative; width:32px; height:32px; border-radius:50%;
  background-repeat:no-repeat; background-position:0 0; background-size:100% 100%;
  background-image:url('/wcorp/gc/prod/es_ES/estaticos/torre-iberdrola/images/boton-flecha.svg?t=010');}
/* Área táctil de 44 sin mover la caja de 32. */
#torreib .tib_flecha::after{content:''; display:block; position:absolute; top:-6px; right:-6px; bottom:-6px; left:-6px;}
/* La anterior es la misma en espejo (Figma: rotate-180 + -scale-y-100). */
#torreib .tib_prev{transform:scaleX(-1);}
/* Al pasar, como tipos-carga-slider (el diseño no lo dibuja). */
@media (hover:hover){
  #torreib .tib_flecha:not([aria-disabled="true"]):hover{
    background-image:url('/wcorp/gc/prod/es_ES/estaticos/torre-iberdrola/images/boton-flecha-hover.svg?t=010');}
}
#torreib .tib_flecha:not([aria-disabled="true"]):active{
  background-image:url('/wcorp/gc/prod/es_ES/estaticos/torre-iberdrola/images/boton-flecha-hover.svg?t=010');}
/* En los extremos, la apagada del diseño (ya trae su 50 %: no se le añade otra opacidad). */
#torreib .tib_flecha[aria-disabled="true"]{cursor:default;
  background-image:url('/wcorp/gc/prod/es_ES/estaticos/torre-iberdrola/images/boton-flecha-apagada.svg?t=010');}

/* Modo slider: sólo con JS. */
#torreib[data-js] .tib_cajas{display:grid !important; grid-template-columns:minmax(0,1fr); grid-template-rows:auto;
  align-items:stretch; justify-items:stretch; touch-action:pan-y pinch-zoom;}
#torreib[data-js] .tib_caja{grid-area:1 / 1; opacity:0; visibility:hidden;}
#torreib[data-js] .tib_caja.is-on{opacity:1; visibility:visible;}
#torreib[data-js] .tib_nav{display:flex !important;}
/* A-001: sale en 100 ms; después, entra en 300 ms. Nunca dos textos a la vez. Tras el primer fotograma. */
#torreib[data-anim] .tib_caja{transition:opacity 100ms linear, visibility 0s linear 100ms;}
#torreib[data-anim] .tib_caja.is-on{transition:opacity 300ms cubic-bezier(0.2, 0.9, 0.3, 1) 100ms, visibility 0s linear 100ms;}

/* ===== Singularidades (RD-07, RD-08) =======================================
   Móvil: el dibujo (327 × 844, no crece; por debajo encoge entero) con 5 marcadores y, debajo, la lista.
   Una sola torre (ronda 3, D-16): `torre-iberdrola.svg`, y el fragmento dice qué parte se enciende (#parte; #parte-m,
   con el helicóptero de móvil). La escena, de todo el ancho, recorta y pone el fondo; el marco (`.tib_sg_dibujo`),
   el de siempre, lleva los marcadores y los conectores, y la torre se sale de él por los lados. */
#torreib .tib_sg{gap:16px;}
#torreib .tib_sg_panel{row-gap:16px;}
#torreib .tib_sg_escena{position:relative; width:100%; background:var(--tib-sky); border-radius:15px; overflow:hidden;}
#torreib .tib_sg_dibujo{container-type:inline-size; position:relative; width:min(100%, 327px); aspect-ratio:327 / 844;
  margin:0 auto;}
#torreib .tib_conectores{position:absolute; top:0; left:0; width:100%; height:100%;}
/* Móvil: el dibujo ×1,413 (el mismo alto que la torre de antes), con el cristal de los ascensores donde estaba. */
#torreib .tib_torre{position:absolute; left:calc(-596.14 / 327 * 100cqi); top:calc(-602.91 / 327 * 100cqi);
  width:calc(1386.05 / 327 * 100cqi); height:auto;}
/* Las dos capas de la torre van a z 0-2 (main.js): conectores y marcadores, siempre encima. */
#torreib .tib_conectores{z-index:3; pointer-events:none;}
/* A-002: la de detrás sube y se funde encima (main.js). */
#torreib[data-anim] .tib_torre{transition:opacity 250ms ease-out;}
/* Marcadores: círculo 46, número SmBold 26 blanco; el del abierto, Forest. En % de la caja del dibujo (RD-11). */
#torreib .tib_marca{position:absolute; z-index:4; width:calc(46 / 327 * 100cqi); aspect-ratio:1; border-radius:50%;
  background:var(--tib-green1); color:var(--tib-blanco);
  font-family:'IberPangea',sans-serif; font-weight:600; font-size:calc(26 / 327 * 100cqi); line-height:1.071;
  text-align:center; transform:translateZ(0);}
#torreib .tib_marca{text-indent:0; padding-top:calc((23 - 14) / 327 * 100cqi);}
#torreib .tib_marca.is-on{background:var(--tib-forest);}
#torreib[data-js] .tib_marca{cursor:pointer;}
#torreib .tib_marca[data-n="1"]{left:calc(232 / 327 * 100%); top:calc(360 / 844 * 100%);}
#torreib .tib_marca[data-n="2"]{left:calc(113 / 327 * 100%); top:calc(27 / 844 * 100%);}
#torreib .tib_marca[data-n="3"]{left:calc(213 / 327 * 100%); top:calc(250 / 844 * 100%);}
#torreib .tib_marca[data-n="4"]{left:calc(33 / 327 * 100%); top:calc(747 / 844 * 100%);}
#torreib .tib_marca[data-n="5"]{left:calc(240 / 327 * 100%); top:calc(127 / 844 * 100%);}

/* Desplegable (desplegables-singularidades). Cerrado: blanco, trazo Sand 3; número Green 1; botón + Green 1.
   Abierto: cabecera Green 1 montada 9 sobre su panel; número blanco con cifra Forest; etiqueta Sand 1; botón ×.
   Cada estado es un juego de variables en el `li`; los hijos las leen. */
#torreib .tib_sg_lista{width:100%; gap:12px;}
#torreib .tib_sg_item{
  --tib-cab:var(--tib-blanco); --tib-tinta:var(--tib-forest); --tib-num-f:var(--tib-green1); --tib-num-t:var(--tib-blanco);
  --tib-bot-f:var(--tib-green1); --tib-bot-t:var(--tib-blanco); --tib-bot-b:transparent; --tib-borde:var(--tib-sand3);
  position:relative; background:var(--tib-blanco); border-radius:16px;}
#torreib .tib_sg_cab{font-family:'IberPangea Text',sans-serif; font-weight:400; font-size:16px; line-height:19px;
  color:var(--tib-tinta) !important;}
/* SIN SALTOS AL ABRIR (4 nov 2026, D-13): el trazo del cerrado va por dentro (`inset`, como el de Figma) y no ocupa sitio;
   el relleno, el del cerrado del diseño (11: el 1 del trazo y los 10 de dentro), también abierto. Antes, al abrir, el
   trazo desaparecía y la cabecera crecía 2 px y movía todo 1 px. */
#torreib .tib_sg_btn{position:relative; z-index:1; width:100%; gap:0; padding:11px; border-radius:16px;
  background:var(--tib-cab); color:var(--tib-tinta) !important; box-shadow:inset 0 0 0 1px var(--tib-borde);}
/* El número, centrado de verdad en su círculo (D-18): en Figma, y aquí hasta la ronda 4, iba 2-3 px por encima. */
#torreib .tib_sg_num{flex:none; position:relative; width:28px; height:28px; border-radius:53px; background:var(--tib-num-f);
  color:var(--tib-num-t) !important; font-family:'IberPangea',sans-serif; font-weight:600; font-size:15px;
  line-height:1; text-align:center;}
/* Al menos 8 hasta el botón, a cualquier ancho (D-14, 4 nov 2026): la etiqueta corta antes de tocarlo. En la grande el
   diseño lo pegaba (27215:52029: el grupo invade el botón 2,4); ahí ensanchan las píldoras que no caben. */
#torreib .tib_sg_et{flex:1 1 auto; min-width:0; margin-left:10px; margin-right:8px; color:var(--tib-tinta) !important;}
#torreib .tib_sg_boton{flex:none; position:relative; width:32px; height:32px; border-radius:20px;
  background:var(--tib-bot-f); color:var(--tib-bot-t); box-shadow:inset 0 0 0 1px var(--tib-bot-b);}
#torreib .tib_sg_mas{position:absolute; top:28.91%; left:28.91%; width:13.5px; height:13.5px;}
/* Las etiquetas con los saltos del diseño (ES) no cortan más: sus líneas son las de Figma. */
@container tib (max-width: 564.98px){ #torreib .tib_cortes-m{white-space:nowrap;} }
#torreib:not([data-js]) .tib_cortes-m{white-space:nowrap;}
#torreib .tib_sg_texto{margin-top:0; padding:19px 16px 15px; font-family:'IberPangea Text',sans-serif; font-weight:400;
  font-size:16px; line-height:20px; color:var(--tib-forest);}

/* Abierto (JS: `is-open`) y sin JS (el botón aún no tiene `aria-expanded`: todo abierto, sin botón). */
#torreib .tib_sg_item.is-open,#torreib:not([data-js]) .tib_sg_item{
  --tib-cab:var(--tib-green1); --tib-tinta:var(--tib-sand1); --tib-num-f:var(--tib-blanco); --tib-num-t:var(--tib-forest);
  --tib-bot-f:var(--tib-sand1); --tib-bot-t:var(--tib-green1); --tib-bot-b:var(--tib-green1); --tib-borde:transparent;
  z-index:2;}
#torreib .tib_sg_item.is-open .tib_sg_btn,#torreib:not([data-js]) .tib_sg_btn{margin-bottom:-9px;}
#torreib .tib_sg_item.is-open .tib_sg_texto,#torreib:not([data-js]) .tib_sg_texto{
  border:1px solid var(--tib-sand3); border-top:0; border-radius:0 0 15px 15px; background:var(--tib-blanco);}
/* La × es el + girado 45°, a su mismo tamaño (D-13: Figma la dibuja algo mayor, 14,35, y saltaba al abrir). */
#torreib .tib_sg_item.is-open .tib_sg_mas{transform:rotate(45deg);}
#torreib:not([data-js]) .tib_sg_boton{visibility:hidden;}
#torreib:not([data-js]) .tib_sg_btn{cursor:default;}
/* Al pasar o con foco, el cerrado se pone verde (el «hover» del componente), DE GOLPE (RF-08): el trazo también,
   para que la caja no cambie de tamaño. */
@media (hover:hover){
  #torreib[data-js] .tib_sg_item:not(.is-open):hover{
    --tib-cab:var(--tib-green1); --tib-tinta:var(--tib-sand1); --tib-num-f:var(--tib-blanco); --tib-num-t:var(--tib-forest);
    --tib-bot-f:var(--tib-blanco); --tib-bot-t:var(--tib-green1); --tib-borde:var(--tib-green1);}
}
#torreib[data-js] .tib_sg_item:not(.is-open):focus-within{
  --tib-cab:var(--tib-green1); --tib-tinta:var(--tib-sand1); --tib-num-f:var(--tib-blanco); --tib-num-t:var(--tib-forest);
  --tib-bot-f:var(--tib-blanco); --tib-bot-t:var(--tib-green1); --tib-borde:var(--tib-green1);}
#torreib[data-js] .tib_sg_item{scroll-margin:16px;}

/* ===== Sostenibilidad (RD-09) ==============================================
   Móvil: apiladas (hueco 8), icono a la izquierda y texto a la derecha (hueco 16). */
#torreib .tib_sos{gap:16px;}
#torreib .tib_sos_lista{gap:8px;}
#torreib .tib_sos_caja{gap:16px; padding:16px; background:var(--tib-sand); border-radius:15px;}
#torreib .tib_sos_ico{flex:none; width:54px; height:54px; border:1px solid var(--tib-forest); border-radius:15px;
  background:var(--tib-blanco); overflow:hidden;}
#torreib .tib_sos_ico img{width:100%; height:100%;}
#torreib .tib_sos_txt{flex:1 1 auto; min-width:0; font-family:'IberPangea',sans-serif; font-weight:400; font-size:14px;
  line-height:normal; color:var(--tib-forest);}

/* ===== Foco (RD-14): sólo con teclado ====================================== */
#torreib button:focus-visible{outline:2px solid var(--tib-green1) !important; outline-offset:2px !important;}
#torreib .tib_sg_btn:focus-visible{border-radius:16px;}

/* ===== Composición de móvil: lo que cambia sólo en ella ==================== */
@container tib (max-width: 564.98px){
  #torreib .tib_brg{display:none !important;}
}
#torreib:not([data-js]) .tib_brg{display:none !important;}
/* El ritmo de Singularidades en móvil: 32 a sus vecinos (375: y 287 y 1617 en 27215:43085). */
#torreib .tib_sg{margin-top:-8px; margin-bottom:-8px;}

/* ===== Composición grande: el ÚNICO corte (RD-10) ==========================
   565 de tarjeta: 517 de contenido, lo que piden el panel de Singularidades (514) y los datos (233 + 16 + 268).
   Sólo con JS: sin JS, las píldoras abiertas se taparían (RF-09). Lo que cambia, reafirmado con `!important` donde el
   blindaje lo fija. */
@container tib (min-width: 565px){
  #torreib[data-js] .tib_in{--tib-modo:g;}
  #torreib[data-js] .tib_solo-g.tib_solo-g{display:block !important;}
  #torreib[data-js] .tib_solo-m.tib_solo-m{display:none !important;}
  #torreib[data-js] .tib_brm{display:none !important;}
  #torreib[data-js] .tib_cortes-g{white-space:nowrap;}

  /* Datos: dos columnas; la caja crece, la ilustración no (268 × 428: la torre a 16 de la derecha y 56 de arriba). */
  #torreib[data-js] .tib_datos{grid-template-columns:minmax(0,1fr) 268px; column-gap:16px; row-gap:0;}
  #torreib[data-js] .tib_inaug{grid-row:1; grid-column:2; width:268px; height:428px;}
  #torreib[data-js] .tib_inaug img{top:42px; left:-669px; width:1831px;}
  #torreib[data-js] .tib_datos_lista{grid-row:1; grid-column:1; padding:8px 4px; gap:8px;}
  #torreib[data-js] .tib_dato{padding:16px 8px;}
  #torreib[data-js] .tib_dato_ico{width:43px; height:43px;}

  #torreib[data-js] .tib_caja{min-height:136px;}

  /* Singularidades: el dibujo (514 × 643) con las píldoras encima, en sus sitios; el marco, 514 de 517 a 565 y
     centrado como si midiera 517 por encima (Figma: x 0, ancho 514). La escena, de todo el ancho (D-16): el dibujo
     crece por los lados, a su tamaño. */
  #torreib[data-js] .tib_sg{gap:32px; margin-top:0; margin-bottom:0;}
  #torreib[data-js] .tib_sg_panel{justify-items:start;}
  #torreib[data-js] .tib_sg_escena,#torreib[data-js] .tib_sg_lista{grid-area:1 / 1;}
  #torreib[data-js] .tib_sg_dibujo,#torreib[data-js] .tib_sg_lista{width:514px; margin-left:max(0px, (100% - 517px) / 2);}
  #torreib[data-js] .tib_sg_dibujo{aspect-ratio:514 / 643;}
  #torreib[data-js] .tib_torre{left:-233px; top:-297px; width:981px;}
  #torreib[data-js] .tib_sg_lista{position:relative; z-index:5; height:643px; gap:0; pointer-events:none;}
  #torreib[data-js] .tib_sg_item{position:absolute; pointer-events:auto;}
  #torreib[data-js] .tib_sg_cab{font-size:14px; line-height:17px;}
  /* El 1 y el 5, más anchos que en Figma (181,59 y 177) para dejar los 8 hasta el botón con las líneas del diseño
     (D-14); el 1 crece hacia la izquierda, y su borde derecho sigue en 506. */
  #torreib[data-js] .tib_sg_item[data-n="1"]{left:315.5px; top:265.87px; width:190.5px;}
  #torreib[data-js] .tib_sg_item[data-n="2"]{left:14px; top:12.87px; width:184px;}
  #torreib[data-js] .tib_sg_item[data-n="3"]{left:253px; top:9.87px; width:252px;}
  #torreib[data-js] .tib_sg_item[data-n="4"]{left:8px; top:483.87px; width:194px;}
  #torreib[data-js] .tib_sg_item[data-n="5"]{left:11px; top:205.87px; width:185px;}
  /* PT: «estacionamento» y los 8 hasta el botón no caben en 194 (D-12): 205, sólo en portugués. `:lang()`, que el
     portal sirve pt-BR. */
  #torreib[data-js]:lang(pt) .tib_sg_item[data-n="4"]{width:205px;}

  /* Sostenibilidad: tres en fila, del mismo alto. */
  #torreib[data-js] .tib_sos_lista{display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr));
    column-gap:8px; row-gap:8px; align-items:stretch;}
  #torreib[data-js] .tib_sos_caja{flex-direction:column;}
  #torreib[data-js] .tib_sos_txt{flex:0 0 auto; width:100%;}
}

/* ===== Movimiento reducido (RF-10) ========================================= */
@media (prefers-reduced-motion: reduce){
  #torreib .tib_caja,#torreib .tib_caja.is-on,#torreib .tib_torre{transition:none !important;}
}