/* =============================================================================
   Nomofobia · infografía 2 («Estadísticas»)  ·  estático de iberdrola.com
   Figma la dibuja a 932, 517 y 258 de ancho: se mide 1:1 a esos anchos de pieza, se
   interpola entre 258 y 517 con `cqi`, y a 980, 565 y 290 ocupa todo el ancho (D11).
   UN solo corte: @container ns (min-width: 932px), columna → fila.
   Medidas: specs/nomofobia/design/  ·  Hermana: nomofobia (infografía 1)
   ============================================================================= */

/* ===== IberPangea + IberPangea Text (self-contained) ========================= */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/nomofobia-estadisticas/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/nomofobia-estadisticas/fonts/IberPangea-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/nomofobia-estadisticas/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/nomofobia-estadisticas/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/nomofobia-estadisticas/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/nomofobia-estadisticas/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* Tokens (design/tokens.json) */
#nomofobiastats{
  --ns-green1:#007F33;  --ns-green4:#5BD38C;  --ns-forest:#00402A;  --ns-sand:#FFF5EC;
  --ns-sand3:#D8CFC7;   --ns-sand5:#89837E;   --ns-sand7:#3A3735;
  --ns-sunset:#FF9C1A;  --ns-sunset1:#C66D00;
}

/* ===== Marco de la pieza (RD-02, RD-17) =====================================
   Trazo como `box-shadow: inset`. A todo el ancho hasta 980 y centrada (D11). ÚNICO
   contenedor: ningún descendiente lleva `container-type`. */
#nomofobiastats{
  container:ns / inline-size;
  width:100%; max-width:980px; margin:0 auto; box-sizing:border-box;
  background:#FFFFFF; border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--ns-sand3);
  position:relative;
}

/* ===== Blindaje frente al theme de Liferay (F4) ============================= */
#nomofobiastats *{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;}
#nomofobiastats ul,#nomofobiastats ol,#nomofobiastats li{list-style:none;}
#nomofobiastats li::marker{content:none;}
#nomofobiastats li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#nomofobiastats *` no alcanza a los pseudo-elementos: aparte y SIN `content`. */
#nomofobiastats *::before,#nomofobiastats *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#nomofobiastats img{border:0;}
#nomofobiastats table,#nomofobiastats th,#nomofobiastats td{border:0; background:none;}
#nomofobiastats table{border-collapse:collapse;}
/* La RAÍZ declara todo lo heredable. */
#nomofobiastats{
  font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--ns-forest);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none;
}

/* `display`, elemento a elemento y con `!important`; lo que cambia en el corte se
   reafirma dentro del @container. */
#nomofobiastats{display:block !important;}
#nomofobiastats .ns_title,#nomofobiastats .ns_chart,#nomofobiastats .ns_plot,
#nomofobiastats .ns_area,#nomofobiastats .ns_fig,#nomofobiastats .ns_desc{display:block !important;}
#nomofobiastats .ns_unit,#nomofobiastats .ns_head,#nomofobiastats .ns_dot,#nomofobiastats .ns_tick,
#nomofobiastats .ns_year,#nomofobiastats .ns_lbl,#nomofobiastats .ns_hit,#nomofobiastats .ns_axis,
#nomofobiastats .ns_svg,#nomofobiastats .ns_dash,#nomofobiastats .ns_num{display:block !important;}
#nomofobiastats .ns_ill,#nomofobiastats .ns_ill img,#nomofobiastats .ns_ill svg{display:block !important;}
#nomofobiastats .ns_in,#nomofobiastats .ns_body,#nomofobiastats .ns_cards,#nomofobiastats .ns_txt{
  display:flex !important; flex-direction:column !important; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#nomofobiastats .ns_row{display:flex !important; flex-direction:row !important; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start;}
#nomofobiastats .ns_card{display:flex !important; flex-direction:row !important; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start;}
#nomofobiastats .ns_sr{display:block !important;}
#nomofobiastats .ns_sr table{display:table !important;}

/* ===== Ritmo (RD-17, RD-18) ==================================================
   258 → 517 interpolado sobre el ancho de la pieza (100cqi), constante por encima. */
#nomofobiastats .ns_in{gap:16px;
  padding:16px clamp(8px, calc(8px + 8 * (100cqi - 258px) / 259), 16px);}
#nomofobiastats .ns_title{font-family:'IberPangea',sans-serif; font-weight:400;
  font-size:clamp(21px, calc(21px + 3 * (100cqi - 258px) / 259), 24px);
  line-height:clamp(24px, calc(24px + 4 * (100cqi - 258px) / 259), 28px);
  padding-left:clamp(0px, calc(8px - 8 * (100cqi - 258px) / 259), 8px);
  color:var(--ns-green1) !important;}
#nomofobiastats .ns_body{gap:16px;}

/* ===== Gráfico (RD-19, RD-20) ================================================
   Coordenadas de Figma (gráfico de 932): rejilla de 430 de alto, la fila del valor v
   en y = 430 − 44·v, años debajo (56). En horizontal, las posiciones van en proporción
   del eje (`--x`, de 0 a 1), que empieza en x 36 y deja `--mr` a su derecha. Línea,
   áreas, puntos y rótulos salen del mismo juego de puntos (gen-idiomas-nomofobia.js). */
/* En columna, el gráfico a todo el ancho del contenido, como las tarjetas (D24: se estira la línea, no los
   textos ni los puntos); en fila, lo que le toca del reparto (D11). */
#nomofobiastats .ns_chart{min-width:0; position:relative; width:100%;}
#nomofobiastats .ns_plot{position:relative; height:486px;
  --mr:clamp(16px, calc(19px - 3 * (100cqi - 258px) / 259), 19px);
  --nb:clamp(20px, calc(21px - 1 * (100cqi - 258px) / 259), 21px); --gr:var(--mr);
  font-size:clamp(14px, calc(14px + 2 * (100cqi - 258px) / 259), 16px); line-height:20px;}
#nomofobiastats .ns_unit{position:absolute; left:0; top:0; color:var(--ns-sand7); white-space:nowrap;}
/* Líneas discontinuas como `rejilla-desk.svg`: trazos de 6,04 con extremo redondeado,
   ciclo de 12,08, medio trazo al principio. Un trazo de 1 px cubre [y − 0,5, y + 0,5]. */
#nomofobiastats .ns_dash{width:100%; height:1px; overflow:visible;}
#nomofobiastats .ns_dash line{stroke:var(--ns-sand3); stroke-width:1; stroke-linecap:round;
  stroke-dasharray:6.0417 6.0417; stroke-dashoffset:3.0208;}
/* Las líneas de la rejilla acaban en el final del eje (Figma tablet y móvil); en fila, 3 más allá, en el
   borde del gráfico (Figma escritorio). */
#nomofobiastats .ns_head{position:absolute; left:0; right:var(--gr); top:43.5px; height:1px;}
#nomofobiastats .ns_row{position:absolute; left:0; right:var(--gr); top:calc(var(--y) * 1px - 10px);
  height:20px; gap:16px;}
#nomofobiastats .ns_num{flex:0 0 var(--nb); width:var(--nb); text-align:right; color:var(--ns-sand7);}
#nomofobiastats .ns_row .ns_dash{flex:1 1 auto; min-width:0; width:auto;}
/* Ejes en L (`eje-y-desk.svg`): 1 px Sand 5, de y 31 a 430 y de x 36 al final del eje. */
#nomofobiastats .ns_axis{position:absolute; background:var(--ns-sand5); border-radius:.5px;}
#nomofobiastats .ns_axis--y{left:35.5px; top:30.5px; width:1px; height:400px;}
#nomofobiastats .ns_axis--x{left:35.5px; right:calc(var(--mr) - .5px); top:429.5px; height:1px;}
#nomofobiastats .ns_area{position:absolute; left:36px; right:var(--mr); top:0; height:430px;}
#nomofobiastats .ns_svg{position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible;}
#nomofobiastats .ns_fill{opacity:0; transition:opacity 200ms ease-out;}
#nomofobiastats .ns_fill--real{fill:var(--ns-green4);}
#nomofobiastats .ns_fill--prev{fill:var(--ns-sunset);}
#nomofobiastats .ns_ln{fill:none; stroke-width:1; vector-effect:non-scaling-stroke;}
#nomofobiastats .ns_ln--real{stroke:var(--ns-green1);}
#nomofobiastats .ns_ln--prev{stroke:var(--ns-sunset1);}
#nomofobiastats .ns_dot{position:absolute; left:calc(var(--x) * 100%); top:calc(var(--y) * 1px);
  width:6.2px; height:6.2px; border-radius:50%; transform:translate(-50%, -50%);
  background:var(--ns-green1);}
#nomofobiastats .ns_dot--big{width:11px; height:11px;}
#nomofobiastats .ns_dot--prev{background:var(--ns-sunset1);}
#nomofobiastats .ns_tick{position:absolute; left:calc(var(--x) * 100% - .5px); top:430px;
  width:1px; height:16px; background:var(--ns-sand5);}
#nomofobiastats .ns_year{position:absolute; left:calc(var(--x) * 100%); top:454px;
  transform:translateX(-50%); white-space:nowrap; color:var(--ns-forest);}
/* Rótulos anclados a su línea por el centro: con el espaciado de 1.4.12 el centro sigue
   en su sitio y nada se corta. */
#nomofobiastats .ns_lbl{position:absolute; left:calc(var(--x) * 100% + var(--dx) * 1px); top:calc(var(--y) * 1px);
  transform:translateY(-50%); white-space:nowrap; color:var(--ns-forest);}
/* Franjas de cada tramo, de la cima al eje; la frontera, en la x del punto de 2021. */
#nomofobiastats .ns_hit{position:absolute; top:0; height:100%; z-index:2;
  left:calc(var(--x0) * 100%); width:calc((var(--x1) - var(--x0)) * 100%);}

/* Áreas al pasar (A-004): con ratón, CSS (funciona sin JS); en táctil, `data-hl` del JS. */
@media (hover:hover){
  #nomofobiastats .ns_plot:has(.ns_hit[data-t="real"]:hover) .ns_fill--real,
  #nomofobiastats .ns_plot:has(.ns_hit[data-t="prev"]:hover) .ns_fill--prev{opacity:.48;}
}
#nomofobiastats .ns_chart[data-hl="real"] .ns_fill--real,
#nomofobiastats .ns_chart[data-hl="prev"] .ns_fill--prev{opacity:.48;}

/* Tabla con los datos, sólo para lectores (el dibujo y sus textos son aria-hidden). La clase va
   en un contenedor: una tabla no se deja encoger a 1 px y asomaría. */
#nomofobiastats .ns_sr{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;}

/* ===== Tarjetas (RD-21, RD-22) — columna por defecto ========================
   258 → 517 interpolado: padding izquierdo 32/22/32 → 24, derecho 16 → 24, hueco
   16/16/26 → 32/16/26, iconos a su tamaño → 44 × 80 y 53 × 74 (el 3.º no cambia). */
#nomofobiastats .ns_cards{gap:16px;}
#nomofobiastats .ns_card{background:var(--ns-sand); border-radius:15px;
  padding:16px clamp(16px, calc(16px + 8 * (100cqi - 258px) / 259), 24px) 16px
          clamp(24px, calc(32px - 8 * (100cqi - 258px) / 259), 32px);
  gap:clamp(16px, calc(16px + 16 * (100cqi - 258px) / 259), 32px);}
#nomofobiastats .ns_card[data-n="2"]{gap:16px;
  padding-left:clamp(22px, calc(22px + 2 * (100cqi - 258px) / 259), 24px);}
#nomofobiastats .ns_card[data-n="3"]{gap:26px;}
#nomofobiastats .ns_ill{flex:0 0 auto; position:relative; width:var(--iw); height:var(--ih);}
#nomofobiastats .ns_card[data-n="1"] .ns_ill{
  --iw:clamp(44px, calc(51.881px - 7.881 * (100cqi - 258px) / 259), 51.881px);
  --ih:clamp(80px, calc(94.556px - 14.556 * (100cqi - 258px) / 259), 94.556px);}
#nomofobiastats .ns_card[data-n="2"] .ns_ill{
  --iw:clamp(53px, calc(64.645px - 11.645 * (100cqi - 258px) / 259), 64.645px);
  --ih:clamp(74px, calc(89.013px - 15.013 * (100cqi - 258px) / 259), 89.013px);}
#nomofobiastats .ns_card[data-n="3"] .ns_ill{--iw:41.233px; --ih:93px;}
#nomofobiastats .ns_ill_img,#nomofobiastats .ns_ill_svg{position:absolute; left:0; top:0; width:100%; height:100%; max-width:none !important;}
#nomofobiastats .ns_txt{flex:1 1 0; min-width:0; gap:8px;}
#nomofobiastats .ns_fig{font-family:'IberPangea',sans-serif; font-weight:500; font-size:25px;
  line-height:22px; color:var(--ns-green1);}
#nomofobiastats .ns_desc{color:var(--ns-sand7);}
/* Cortes de línea de Figma (RD-07): tramos que van juntos, nunca `<br>`. En caja en línea:
   juntos mientras caben y, si el tramo solo no cabe, se parte por dentro (no desborda). */
#nomofobiastats .ns_nw{display:inline-block !important;}
/* `ns_nw-w`: sólo desde 517 (a 258 Figma corta natural). */
#nomofobiastats .ns_nw-w{display:inline !important;}
@container ns (min-width: 517px){
  #nomofobiastats .ns_nw-w{display:inline-block !important;}
}

/* Lo AÑADIDO de cada dibujo (rayos, puerta, reloj, avisos…; `ns_add`, lo marca svg-dibujos-nomofobia.js) crece
   desde su punto con el muelle «Gentle» de Figma, el del bocadillo de pensamiento-critico, estirado a 1,2 s; lo
   común, una sola capa y quieto (D22). Empieza 400 ms después de verse el dibujo entero y 300 ms después del
   anterior. Sin JS o con reduced-motion, la imagen completa, quieta. */
#nomofobiastats[data-js] .ns_ill.is-carga .ns_ill_img{visibility:hidden;}
#nomofobiastats .ns_ill_svg .ns_add{transform-box:view-box;}
#nomofobiastats .ns_ill:not(.is-on) .ns_add{transform:scale(0);}
#nomofobiastats .ns_ill.is-on .ns_add{transform:none; transition-property:transform; transition-duration:1200ms;
  transition-delay:calc(400ms + var(--i, 0) * 300ms); transition-timing-function:cubic-bezier(.34, 1.3, .64, 1);
  transition-timing-function:linear(0, .0181, .0653, .1325, .2121, .2982, .3862, .4726, .5547, .6308,
      .7, .7615, .8153, .8616, .9006, .9329, .9592, .98, .9962, 1.0083, 1.0169, 1.0228, 1.0263, 1.028,
      1.0283, 1.0276, 1.0261, 1.0241, 1.0218, 1.0193, 1.0168, 1.0144, 1.0121, 1.01, 1.0081, 1.0064,
      1.0049, 1.0036, 1.0026, 1.0017, 1);}

@media (prefers-reduced-motion: reduce){
  #nomofobiastats .ns_fill{transition:none !important;}
  #nomofobiastats .ns_add{transform:none !important; transition:none !important;}
}

/* ===== Fila: el ÚNICO corte (932) ============================================
   Gráfico y tarjetas en la proporción de Figma (471 : 397, hueco 32): a 932, exactos;
   por encima, se reparten lo que gana la pieza (D11). Las tarjetas, en columna estirada
   al alto del gráfico, iguales; el eje deja 3 a su derecha (432 de eje a 932). */
@container ns (min-width: 932px){
  #nomofobiastats .ns_body{display:grid !important;
    grid-template-columns:minmax(0, 471fr) minmax(0, 397fr); gap:32px; align-items:stretch;}
  #nomofobiastats .ns_plot{--mr:3px; --gr:0px;}
  #nomofobiastats .ns_cards{padding-top:16px;}
  #nomofobiastats .ns_card{flex:1 1 0; padding:16px 16px 16px 32px; gap:16px;}
  #nomofobiastats .ns_card[data-n="2"]{padding-left:22px; gap:16px;}
  #nomofobiastats .ns_card[data-n="3"]{gap:26px;}
  #nomofobiastats .ns_card[data-n="1"] .ns_ill{--iw:51.881px; --ih:94.556px;}
  #nomofobiastats .ns_card[data-n="2"] .ns_ill{--iw:64.645px; --ih:89.013px;}
}