/* =============================================================================
   Nomofobia · infografía 1 («¿Eres adicto al móvil?»)  ·  estático de iberdrola.com
   Tres anchos de diseño (980, 565 y 290) y tres composiciones, con DOS cortes para toda
   la pieza: @container nf (min-width: C1) la media y (min-width: C2) la ancha (GUIDE.md).
   Entre 290 y 565 lo que cambia se interpola con `cqi`. Hermana: nomofobia-estadisticas.
   Medidas: specs/nomofobia/design/  ·  Base: tipos-carga-slider
   ============================================================================= */

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

/* Tokens (design/tokens.json) */
#nomofobia{
  --nf-green1:#007F33;  --nf-green2:#008C39;  --nf-green:#00A443;  --nf-forest:#00402A;
  --nf-sand:#FFF5EC;    --nf-sand1:#FFFEFF;   --nf-sand3:#D8CFC7;  --nf-sand7:#3A3735;
  --nf-sunset:#FF9C1A;  --nf-foco:#0792E5;
  --nf-n:1;
}

/* ===== Marco de la pieza (RD-02) ============================================
   Trazo como `box-shadow: inset` (en Figma no ocupa). Fluida hasta 980 y centrada,
   sin margen vertical. ÚNICO contenedor: ningún descendiente lleva `container-type`. */
#nomofobia{
  container:nf / 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(--nf-sand3);
  position:relative;
}

/* ===== Blindaje frente al theme de Liferay (F4) =============================
   La herencia PIERDE contra cualquier declaración del theme, por débil que sea.
   `inherit` sí es una declaración: gana al theme y conserva el valor del padre. */
#nomofobia *{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;}
#nomofobia ul,#nomofobia ol,#nomofobia li{list-style:none;}
#nomofobia li::marker{content:none;}
#nomofobia li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#nomofobia *` no alcanza a los pseudo-elementos: aparte y SIN `content`. */
#nomofobia *::before,#nomofobia *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#nomofobia img{border:0;}
#nomofobia button{font:inherit; cursor:pointer; border:0; background-color:transparent;
  color:inherit; appearance:none; -webkit-appearance:none; border-radius:0; box-shadow:none;
  min-width:0; min-height:0;}
/* La RAÍZ declara todo lo heredable: si no, hereda del portal y el `inherit` de
   arriba propaga fielmente el valor del theme hacia dentro. */
#nomofobia{
  font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--nf-forest);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none;
}
#nomofobia strong{font-weight:600;}

/* `display` NO se hereda: elemento a elemento y con `!important`. En cada caja flex o
   grid, el juego COMPLETO; lo que cambia en un corte se reafirma dentro del @container. */
#nomofobia{display:block !important;}
#nomofobia .nf_title,#nomofobia .nf_sub,#nomofobia .nf_pill_t,#nomofobia .nf_label_t,
#nomofobia .nf_slide_t,#nomofobia .nf_src,#nomofobia .nf_viewport{display:block !important;}
#nomofobia .nf_art img,#nomofobia .nf_ico img,#nomofobia .nf_ill img,#nomofobia .nf_ill svg{display:block !important;}
#nomofobia .nf_count_v,#nomofobia .nf_num,#nomofobia .nf_nw-a,#nomofobia .nf_nw-m,#nomofobia .nf_nw-e{display:inline !important;}
#nomofobia .nf_arrow{display:block !important;}
#nomofobia .nf_in,#nomofobia .nf_signs,#nomofobia .nf_tips,#nomofobia .nf_car,#nomofobia .nf_slider{
  display:flex !important; flex-direction:column !important; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#nomofobia .nf_pills{display:flex !important; flex-direction:column !important; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#nomofobia .nf_col{display:contents !important;}
#nomofobia .nf_art{display:block !important;}
#nomofobia .nf_pill{display:flex !important; flex-direction:row !important; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start;}
#nomofobia .nf_tiplist{display:flex !important; flex-direction:column !important; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#nomofobia .nf_tip{display:flex !important; flex-direction:row !important; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start;}
#nomofobia .nf_ill{display:block !important;}
#nomofobia .nf_label{display:flex !important; flex-direction:column !important; flex-wrap:nowrap;
  align-items:center; justify-content:center;}
/* Sin JS (RF-06): las 4 diapositivas apiladas, separadas 16, sin navegación. */
#nomofobia .nf_track{display:flex !important; flex-direction:column !important; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:16px;}
#nomofobia .nf_slide{display:flex !important; flex-direction:row !important; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start;}
#nomofobia .nf_ico{display:block !important;}
#nomofobia .nf_nav{display:none !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:space-between; gap:16px;}
#nomofobia .nf_count{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start;}
#nomofobia .nf_arrows{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-end; gap:16px;}

/* ===== Ritmo (RD-10, plan §2.2) ==============================================
   290 → 565 interpolado sobre el ancho de la pieza (100cqi; la raíz no tiene padding),
   exacto en los dos anchos de diseño, sin saltos y constante por encima de 565. La
   diferencia va SIN unidad: px × px no es CSS válido. */
#nomofobia .nf_in{
  padding:24px clamp(16px, calc(16px + 8 * (100cqi - 290px) / 275), 24px);
  gap:clamp(16px, calc(16px + 8 * (100cqi - 290px) / 275), 24px);
}

/* ===== Títulos (RD-03, RD-15) ================================================
   !important en el color: en móvil el theme pinta h1/h2/h3 de #427314 !important.
   Los tres subtítulos, 21/24 a 290 → 24/28 a 565 (D07). */
#nomofobia .nf_title{font-family:'IberPangea',sans-serif; font-weight:600;
  font-size:32px; line-height:36px; color:var(--nf-green1) !important;}
#nomofobia .nf_sub{font-family:'IberPangea',sans-serif; font-weight:400;
  font-size:clamp(21px, calc(21px + 3 * (100cqi - 290px) / 275), 24px);
  line-height:clamp(24px, calc(24px + 4 * (100cqi - 290px) / 275), 28px);
  color:var(--nf-green1) !important;}

/* ===== Signos de alerta (RD-11) — composición ESTRECHA por defecto ===========
   Columna: 1, 2, 3, el dibujo, 5, 6, 4 (el orden del DOM es siempre 1…6: la 4 baja con
   `order`; las dos columnas genéricas son `display: contents`). */
#nomofobia .nf_signs{background:var(--nf-sand); border-radius:15px; gap:16px;
  padding:clamp(8px, calc(8px + 8 * (100cqi - 290px) / 275), 16px);}
#nomofobia .nf_pills{gap:8px;}
/* El relleno derecho, igual que el izquierdo en todos los tamaños (D25): 22 · 28 (media) · 22 (ancha). */
#nomofobia .nf_pill{order:0; background:#FFFFFF; border-radius:50px;
  box-shadow:inset 0 0 0 1px var(--nf-sand3); padding:12px 22px;
  color:var(--nf-sand7);}
#nomofobia .nf_pill[data-n="4"]{order:1;}
/* En estrecha, el texto a todo el ancho de su píldora, a la izquierda, y parte sólo cuando no cabe (D23). */
#nomofobia .nf_pill_t{flex:0 1 auto; min-width:0;}
#nomofobia .nf_art{order:0; align-self:center; width:238px; height:222px; position:relative; z-index:1;}
#nomofobia .nf_art img{width:100%; height:100%; max-width:none !important;}

/* ===== ¿Cómo superar la nomofobia? (RD-12, RD-13) — ESTRECHA por defecto =====
   Una columna sin gap; cada fila con el alto de su caja de dibujo de Figma. El dibujo de
   escritorio, escalado a círculo de 86 (D12) y centrado en esa caja de 88. */
#nomofobia .nf_tips{border-radius:15px; box-shadow:inset 0 0 0 1px var(--nf-sand3);
  padding:16px 8px; gap:32px;}
#nomofobia .nf_tips .nf_sub{padding-left:8px;}
#nomofobia .nf_tiplist{gap:0;}
#nomofobia .nf_tip{gap:8px;}
#nomofobia .nf_tip[data-n="1"]{min-height:101px;}
#nomofobia .nf_tip[data-n="2"]{min-height:93px;}
#nomofobia .nf_tip[data-n="3"]{min-height:103px;}
#nomofobia .nf_tip[data-n="4"]{min-height:89px;}
#nomofobia .nf_label{flex:1 1 0; min-width:0; align-self:center; min-height:76px;
  padding:8px 16px; border-radius:15px; background:#FFFFFF;
  box-shadow:inset 0 0 0 1px var(--nf-green);
  font-family:'IberPangea',sans-serif; font-weight:500; font-size:16px; line-height:20px;
  color:var(--nf-forest); text-align:center;}
#nomofobia .nf_tip[data-n="2"] .nf_label,#nomofobia .nf_tip[data-n="4"] .nf_label{
  box-shadow:inset 0 0 0 1px var(--nf-sunset);}

/* Ilustración animada (A-003). `.nf_ill` mide el CÍRCULO (104 × --s) y el dibujo completo cuelga de él,
   desplazado lo que su círculo se aparta del de la caja (RD-13). Nada empuja la etiqueta. */
#nomofobia .nf_ill{--s:.826923; flex:0 0 auto; position:relative;
  width:calc(104px * var(--s)); height:calc(104px * var(--s)); margin:0 1px;}
#nomofobia .nf_ill_img,#nomofobia .nf_ill_svg{position:absolute; max-width:none !important;
  left:calc(var(--dx) * var(--s)); top:calc(var(--dy) * var(--s));
  width:calc(var(--bw) * var(--s)); height:calc(var(--bh) * var(--s));}
/* Lo AÑADIDO de cada dibujo (rayos, puerta, reloj, avisos…; `nf_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. */
#nomofobia[data-js] .nf_ill.is-carga .nf_ill_img{visibility:hidden;}
#nomofobia .nf_ill_svg .nf_add{transform-box:view-box;}
#nomofobia .nf_ill:not(.is-on) .nf_add{transform:scale(0);}
#nomofobia .nf_ill.is-on .nf_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);}

/* ===== Carrusel (RD-14) ====================================================== */
#nomofobia .nf_car{gap:16px;}
#nomofobia .nf_slider{gap:16px;}
#nomofobia .nf_slide{min-width:0; gap:16px; padding:11px 16px 11px 18px;
  background:var(--nf-sand); border-radius:16px;}
#nomofobia .nf_ico{flex:0 0 49px; width:49px; height:49px; border-radius:50%;
  background:var(--nf-green2);}
#nomofobia .nf_ico img{width:49px; height:49px; max-width:none !important;}
#nomofobia .nf_slide_t{flex:1 1 0; min-width:0; color:var(--nf-forest);}

/* Cortes de línea de Figma (RD-07): tramos que van juntos sólo en la composición donde
   Figma corta ahí (`nf_nw-e` estrecha, `-m` media, `-a` ancha); nunca `<br>`. */
#nomofobia .nf_nw-e{white-space:nowrap;}

/* Navegación (de tipos-carga-slider: los mismos componentes de Figma). */
#nomofobia .nf_nav{min-height:32px; padding:0 8px;}
#nomofobia .nf_count{position:relative; min-height:32px; padding:0 16px; border-radius:24px;
  box-shadow:inset 0 0 0 1px var(--nf-forest);
  font-style:italic; font-size:14px; line-height:18px; color:var(--nf-forest); white-space:nowrap;}
#nomofobia .nf_num{color:var(--nf-green1);}
#nomofobia .nf_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;}
#nomofobia .nf_arrow{flex:0 0 auto; 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/nomofobia/images/flecha.svg?t=002');}
/* La anterior es la misma en espejo (Figma: rotate-180 + -scale-y-100). */
#nomofobia .nf_prev{transform:scaleX(-1);}
@media (hover:hover){
  #nomofobia .nf_arrow:not([aria-disabled="true"]):hover{
    background-image:url('/wcorp/gc/prod/es_ES/estaticos/nomofobia/images/flecha-hover.svg?t=002');}
}
#nomofobia .nf_arrow:not([aria-disabled="true"]):active{
  background-image:url('/wcorp/gc/prod/es_ES/estaticos/nomofobia/images/flecha-hover.svg?t=002');}
#nomofobia .nf_arrow[aria-disabled="true"]{opacity:.5; cursor:default;}
#nomofobia .nf_arrow:focus{outline:none;}
#nomofobia .nf_arrow:focus-visible{outline:3px solid var(--nf-foco) !important; outline-offset:3px !important;}

/* ===== Fuentes (RD-16) ======================================================= */
#nomofobia .nf_src{font-style:italic; font-size:14px; line-height:18px; color:var(--nf-forest);}

/* ===== Modo carrusel: sólo con JS (RF-06) ====================================
   El JS pone `data-js` en su primera línea. Sin él, diapositivas apiladas y sin nav. */
#nomofobia[data-js] .nf_viewport{overflow:hidden; touch-action:pan-y pinch-zoom;}
#nomofobia[data-js] .nf_track{flex-direction:row !important; gap:20px;
  transform:translateX(calc((-100% - 20px) * (var(--nf-n) - 1)));}
#nomofobia[data-js] .nf_slide{flex:0 0 100%;}
#nomofobia[data-js] .nf_nav{display:flex !important;}
/* La transición se enciende tras el primer fotograma. Sin `will-change` permanente. */
#nomofobia[data-anim] .nf_track{transition:transform 500ms ease-in-out;}

@media (prefers-reduced-motion: reduce){
  #nomofobia .nf_track{transition:none !important;}
  #nomofobia .nf_add{transform:none !important; transition:none !important;}
}

/* ===== Diapositiva activa (lo escribe gen-idiomas-nomofobia.js) ============= */
/* @gen:inicio */
#nomofobia[data-active="1"]{--nf-n:1;}
#nomofobia[data-active="2"]{--nf-n:2;}
#nomofobia[data-active="3"]{--nf-n:3;}
#nomofobia[data-active="4"]{--nf-n:4;}
/* @gen:fin */

/* Simetría por idioma (RD-06): en la estrecha, las cuatro etiquetas con el alto común de su idioma
   (EN: «Try to leave your home without your mobile phone» ocupa cuatro líneas a 290). */
@container nf (max-width: 537px){
  #nomofobia:lang(en) .nf_label{min-height:96px;}
}

/* ===== Composición MEDIA: el corte C1 ========================================
   Signos: 1-3 a todo el ancho; 5 y 6 en columna con el dibujo de 227 a su derecha y la 4
   a todo el ancho. El dibujo sube 12 sobre la franja de la 3, en todo el tramo: lo que
   mide su relleno de abajo, así que nunca pisa su texto (D26; en Figma, 20 a 565, y en
   inglés la cabeza del chico tapaba «to spend»). Dos filas vacías (1fr), encima y debajo de la 5 y la 6, se reparten lo
   que el dibujo mida de más: quedan centradas en vertical junto a él, como las columnas
   de la ancha, sin estirarse; a 565 miden 0 (Figma).
   Consejos: rejilla 2 × 2, dibujo de 104 a la izquierda y etiqueta estirada. */
@container nf (min-width: 538px){
  #nomofobia .nf_signs{gap:12px;}
  #nomofobia .nf_pills{display:grid !important; grid-template-columns:minmax(0, 1fr) 227px;
    grid-template-rows:auto auto auto minmax(0, 1fr) auto auto minmax(0, 1fr) auto;
    grid-template-areas:"p1 p1" "p2 p2" "p3 p3" ". art" "p5 art" "p6 art" ". art" "p4 p4"; gap:0 16px;}
  #nomofobia .nf_pill{padding-left:28px; padding-right:28px; margin-top:12px;}
  #nomofobia .nf_pill[data-n="1"]{margin-top:0;}
  #nomofobia .nf_pill[data-n="1"]{grid-area:p1;}
  #nomofobia .nf_pill[data-n="2"]{grid-area:p2;}
  #nomofobia .nf_pill[data-n="3"]{grid-area:p3;}
  #nomofobia .nf_pill[data-n="4"]{grid-area:p4;}
  #nomofobia .nf_pill[data-n="5"]{grid-area:p5;}
  #nomofobia .nf_pill[data-n="6"]{grid-area:p6;}
  #nomofobia .nf_art{grid-area:art; align-self:start; width:227px; height:212px;
    margin-top:-12px;}

  #nomofobia .nf_tips{gap:16px;}
  #nomofobia .nf_tiplist{display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:17px 8px;}
  #nomofobia .nf_tip{align-items:stretch;}
  #nomofobia .nf_tip[data-n]{min-height:0;}
  #nomofobia .nf_ill{--s:1; margin:0; align-self:flex-start;}
  #nomofobia .nf_label{align-self:stretch; min-height:0;}
  #nomofobia .nf_tip[data-n="2"] .nf_label{padding:8px;}
  #nomofobia .nf_nw-e{white-space:normal;}
  #nomofobia .nf_nw-m{white-space:nowrap;}
}

/* ===== Composición ANCHA: el corte C2 ========================================
   Signos: tres columnas (299 · dibujo de 300 · resto), cada columna centrada en vertical
   con su ritmo. Consejos: cuatro columnas iguales (D13), dibujo arriba y etiquetas del
   mismo alto, alineadas abajo (subgrid). */
@container nf (min-width: 940px){
  #nomofobia .nf_signs{gap:16px;}
  #nomofobia .nf_pills{display:grid !important; grid-template-columns:minmax(0, 299px) 300px minmax(0, 1fr);
    grid-template-rows:none; grid-template-areas:none; gap:16px; align-items:stretch;}
  #nomofobia .nf_col{display:flex !important; flex-direction:column !important; flex-wrap:nowrap;
    align-items:stretch; justify-content:center; gap:16px; min-width:0;}
  #nomofobia .nf_pill{padding-left:22px; padding-right:22px;}
  #nomofobia .nf_pill[data-n]{grid-area:auto; order:0; margin-top:0;}
  #nomofobia .nf_pill[data-n="1"] .nf_pill_t{max-width:204px;}   /* el ancho de texto de Figma a 980 */
  #nomofobia .nf_art{grid-area:auto; align-self:end; width:300px; height:280px; margin-top:0;}

  #nomofobia .nf_tips{padding:16px; gap:8px;}
  #nomofobia .nf_tips .nf_sub{padding-left:0;}
  #nomofobia .nf_tiplist{display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-template-rows:auto auto; gap:8px;}
  #nomofobia .nf_tip{display:grid !important; grid-template-rows:subgrid; grid-row:span 2;
    grid-template-columns:minmax(0, 1fr);
    justify-items:center; align-items:end; row-gap:8px;}
  #nomofobia .nf_label{align-self:stretch; justify-self:stretch;}
  #nomofobia .nf_tip[data-n="2"] .nf_label{padding:8px 16px;}
  #nomofobia .nf_nw-m{white-space:normal;}
  #nomofobia .nf_nw-a{white-space:nowrap;}
  /* «Reconoce que / tienes una adicción» y «Silencia las / notificaciones»: Figma corta a mano
     a 980; con el ancho de texto justo, el corte natural cae ahí. */
  #nomofobia:lang(es) .nf_tip[data-n="1"] .nf_label_t,
  #nomofobia:lang(es) .nf_tip[data-n="4"] .nf_label_t{max-width:140px;}
}