/* =============================================================================
   El ciclo de vida de una Garantía de Origen  ·  estático de iberdrola.com  ·  scope #garantiasorigen · clases gdo_
   Un tamaño de diseño, 565, y UN solo corte: @container gdo (min-width: 565px), el ancho que pide el ciclo (501 +
   2 × 31 + 2 × 1). Por encima, el ciclo; por debajo, un carrusel de un círculo (D-06). Sin JS, todo a la vista.
   Medidas: specs/garantias-de-origen/design/ (Figma es la única fuente). Bases: torre-iberdrola (blindaje, píldora,
   fundido), vehiculos-tipos-slider (flechas, arrastre), fases-economia-circular-2026 (círculos con velo).
   ============================================================================= */

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

/* ===== Tokens (design/tokens.json) ========================================= */
#garantiasorigen{
  --gdo-green1:#007F33;   /* Green 1: título, franjas, distintivos, cabecera de la tarjeta */
  --gdo-green:#00A443;    /* Iberdrola Green: conector, flecha al pasar */
  --gdo-forest:#00402A;   /* Iberdrola Forest: textos, píldora, flechas */
  --gdo-sand:#FFF5EC;     /* Iberdrola Sand: fondo de los círculos */
  --gdo-sand1:#FFFEFF;    /* Sand 1: nombres de las franjas, título y número de la tarjeta */
  --gdo-sand3:#D8CFC7;    /* Sand 3: trazos */
  --gdo-sand7:#3A3735;    /* Sand 7: notas */
  --gdo-blanco:#FFFFFF;
  --gdo-circulo:183.044px;
}

/* ===== Marco de la pieza ===================================================
   `margin:0 auto` SIN margen vertical: se incrusta y el sitio pone su espaciado. La raíz, limpia, es el ÚNICO
   contenedor (`gdo`); el trazo y el padding van en `.gdo_in`, para que el corte no dependa de ellos (F3). */
#garantiasorigen{
  container:gdo / inline-size;
  width:100%; margin:0 auto; padding:0; box-sizing:border-box; position:relative;
}

/* ===== Blindaje frente al theme de Liferay (F4, P4) ======================== */
#garantiasorigen *{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;}
#garantiasorigen ul,#garantiasorigen ol,#garantiasorigen li{list-style:none;}
#garantiasorigen li::marker{content:none;}
#garantiasorigen li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#garantiasorigen *` no alcanza a los pseudo-elementos: se blindan aparte y SIN `content`. */
#garantiasorigen *::before,#garantiasorigen *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#garantiasorigen button{cursor:default; appearance:none; -webkit-appearance:none; border-radius:0;
  width:auto; height:auto; min-height:0; line-height:inherit; outline:none; text-align:left;}
#garantiasorigen img{border:0; max-width:none;}
#garantiasorigen svg{overflow:visible;}
#garantiasorigen strong{font-weight:600;}
/* La RAÍZ declara todo lo heredable: si no, hereda del portal y el `inherit` de arriba lo propaga hacia dentro. */
#garantiasorigen{
  font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--gdo-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. */
#garantiasorigen{display:block !important;}
#garantiasorigen .gdo_in,#garantiasorigen .gdo_cab,#garantiasorigen .gdo_det,#garantiasorigen .gdo_tarjeta{
  display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;}
#garantiasorigen .gdo_tit,#garantiasorigen .gdo_entr,#garantiasorigen .gdo_nota,#garantiasorigen .gdo_ciclo,
#garantiasorigen .gdo_conector,#garantiasorigen .gdo_diapo,#garantiasorigen .gdo_nodo,#garantiasorigen .gdo_fondo,
#garantiasorigen .gdo_dib,#garantiasorigen .gdo_capa,#garantiasorigen .gdo_franja,#garantiasorigen .gdo_fnom,
#garantiasorigen .gdo_ttit,#garantiasorigen .gdo_tcuerpo,#garantiasorigen .gdo_ttxt,#garantiasorigen .gdo_flecha,
#garantiasorigen .gdo_flecha svg,#garantiasorigen .gdo_sr{display:block !important;}
#garantiasorigen .gdo_pista{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:flex-start;}
#garantiasorigen .gdo_paso{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:flex-start; justify-content:center;}
#garantiasorigen .gdo_badge,#garantiasorigen .gdo_tnum{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center;}
#garantiasorigen .gdo_tarjetas{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;}
#garantiasorigen .gdo_tcab{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start;}
#garantiasorigen .gdo_pag{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between;}
#garantiasorigen .gdo_cont{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center;}
#garantiasorigen .gdo_flechas{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-end;}
#garantiasorigen .gdo_cont_v,#garantiasorigen .gdo_cont_n,#garantiasorigen strong{display:inline !important;}

/* ===== Tarjeta exterior ====================================================
   Trazo 1 Sand 3 y, dentro, 39 arriba y abajo y 31 a los lados (32/40 desde fuera: metadata.xml). Huecos de 24. */
#garantiasorigen .gdo_in{
  --gdo-modo:movil;
  background:var(--gdo-blanco); border:1px solid var(--gdo-sand3); border-radius:15px;
  padding:31px 23px; gap:24px;
}

/* ===== Cabecera ============================================================
   El theme pinta h1/h2/h3 de #427314 !important en móvil: el color de los títulos, con !important (P4). */
#garantiasorigen .gdo_cab{gap:24px;}
#garantiasorigen .gdo_tit{font-family:'IberPangea',sans-serif; font-weight:400; font-size:32px; line-height:36px;
  color:var(--gdo-green1) !important;}
#garantiasorigen .gdo_entr{font-family:'IberPangea Text',sans-serif; font-weight:400; font-size:18px; line-height:24px;
  color:var(--gdo-forest);}

/* ===== Notas (Nota al pie infografía) ====================================== */
#garantiasorigen .gdo_nota{font-family:'IberPangea Text',sans-serif; font-style:italic; font-weight:400; font-size:14px;
  line-height:18px; color:var(--gdo-sand7);}

/* ===== Ciclo: los círculos ==================================================
   183,04 sobre Sand; el dibujo (images/paso-N.svg) y la franja Green 1 con el nombre, recortados por el círculo. Las
   capas, las del diseño: en 1, 4 y 5 fondo · franja · dibujo; en 2 y 3 (fondo + dibujo) · franja (spec §5). */
#garantiasorigen .gdo_ciclo{position:relative;}
#garantiasorigen .gdo_conector{position:absolute; left:99.716px; top:143.301px; width:304.398px; height:297.428px;}
#garantiasorigen .gdo_paso{position:relative;}
#garantiasorigen .gdo_diapo{position:relative; width:var(--gdo-circulo); height:var(--gdo-circulo); flex:none;}
#garantiasorigen .gdo_nodo{position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden;
  -webkit-tap-highlight-color:transparent;}
#garantiasorigen[data-js] .gdo_nodo{cursor:pointer;}
#garantiasorigen .gdo_fondo,#garantiasorigen .gdo_dib,#garantiasorigen .gdo_capa{position:absolute; top:0; left:0;
  width:100%; height:100%;}
#garantiasorigen .gdo_fondo{background:var(--gdo-sand);}
/* La franja: 251 centrada y anclada abajo, 38 a los lados (el nombre, 175). Arriba y abajo, lo medido por paso; el
   alto medido es el mínimo: crece si una traducción lo pide (CA-06). */
#garantiasorigen .gdo_franja{position:absolute; left:50%; bottom:0; width:251px; transform:translateX(-50%);
  padding:8px 38px 16px; min-height:90px; background:var(--gdo-green1);}
#garantiasorigen .gdo_paso[data-n="4"] .gdo_franja{padding-top:16px; padding-bottom:26px; min-height:64px;}
#garantiasorigen .gdo_paso[data-n="5"] .gdo_franja{padding-top:11.5px; padding-bottom:19.5px; min-height:75px;}
#garantiasorigen .gdo_fnom{font-family:'IberPangea',sans-serif; font-weight:500; font-size:18px; line-height:22px;
  color:var(--gdo-sand1); text-align:center;}
/* El distintivo: 32,09, blanco con trazo Green 1; a 75,84 · −15,31 de su círculo en los cinco. Nunca se atenúa. */
#garantiasorigen .gdo_badge{position:absolute; z-index:2; left:75.842px; top:-15.314px; width:32.087px; height:32.087px;
  border-radius:50%; background:var(--gdo-blanco); border:1px solid var(--gdo-green1);
  font-family:'IberPangea',sans-serif; font-weight:500; font-size:18px; line-height:22px; color:var(--gdo-green1);
  text-align:center; pointer-events:none;}

/* Atenuado (D-02): en los no elegidos, el dibujo y su fondo al 0,6; franja, nombre y distintivo, a pleno. */
#garantiasorigen[data-sel] .gdo_nodo[aria-pressed="false"] > :is(.gdo_capa,.gdo_fondo,.gdo_dib){opacity:.6;}
#garantiasorigen[data-sel] .gdo_nodo[aria-pressed="false"]:focus-visible > :is(.gdo_capa,.gdo_fondo,.gdo_dib){opacity:1;}
/* Sin nada elegido (hover-1): el que tiene el foco (o el puntero) a pleno; los demás, atenuados. */
#garantiasorigen:not([data-sel]) .gdo_ciclo:has(.gdo_nodo:focus-visible) .gdo_nodo:not(:focus-visible) > :is(.gdo_capa,.gdo_fondo,.gdo_dib){opacity:.6;}
@media (hover:hover){
  #garantiasorigen[data-js][data-sel] .gdo_nodo[aria-pressed="false"]:hover > :is(.gdo_capa,.gdo_fondo,.gdo_dib){opacity:1;}
  #garantiasorigen[data-js]:not([data-sel]) .gdo_ciclo:has(.gdo_nodo:hover) .gdo_nodo:not(:hover):not(:focus-visible) > :is(.gdo_capa,.gdo_fondo,.gdo_dib){opacity:.6;}
}

/* ===== Tarjeta del paso (Component 12) =====================================
   Cabecera Green 1 que monta 11 sobre el cuerpo; cuerpo con trazo Sand 3 sin el de arriba. El trazo de Figma va por
   dentro: el padding del cuerpo, 34 · 15 · 15 más el trazo (16 desde fuera). */
#garantiasorigen .gdo_det{gap:16px;}
#garantiasorigen .gdo_tarjetas{gap:16px;}
#garantiasorigen .gdo_tcab{position:relative; z-index:1; gap:16px; margin-bottom:-11px; padding:10px 16px;
  border-radius:15px; background:var(--gdo-green1);
  font-family:'IberPangea',sans-serif; font-weight:500; font-size:18px; line-height:22px; color:var(--gdo-sand1) !important;}
#garantiasorigen .gdo_tnum{flex:none; width:42px; height:42px; border-radius:50%; background:var(--gdo-sand1);
  color:var(--gdo-green1); text-align:center;}
#garantiasorigen .gdo_ttit{flex:1 1 auto; min-width:0;}
#garantiasorigen .gdo_tcuerpo{border:1px solid var(--gdo-sand3); border-top:0; border-radius:0 0 15px 15px;
  padding:34px 15px 15px; background:var(--gdo-blanco);
  font-family:'IberPangea Text',sans-serif; font-weight:400; font-size:16px; line-height:20px; color:var(--gdo-forest);}

/* ===== Paginación: «N de 5» y flechas ====================================== */
#garantiasorigen .gdo_pag{min-height:32px; gap:16px;}
#garantiasorigen .gdo_cont{min-height:32px; padding:0 15px; border:1px solid var(--gdo-forest); border-radius:24px;
  font-family:'IberPangea Text',sans-serif; font-style:italic; font-weight:400; font-size:14px; line-height:18px;
  color:var(--gdo-forest); white-space:nowrap;}
#garantiasorigen .gdo_cont_n{color:var(--gdo-green1);}
#garantiasorigen .gdo_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;}
#garantiasorigen .gdo_flechas{gap:16px;}
/* Boton-flecha: reposo, trazo y flecha Forest; al pasar y al pulsar, relleno Iberdrola Green y flecha Sand 1;
   apagada, al 50 % (en lo que se ve, no en el botón: el contorno de foco queda entero). */
#garantiasorigen .gdo_flecha{flex:0 0 auto; position:relative; width:32px; height:32px; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--gdo-forest); color:var(--gdo-forest); cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
#garantiasorigen .gdo_flecha svg{width:32px; height:32px;}
/* La anterior es la misma en espejo (Figma: rotate-180 + -scale-y-100). */
#garantiasorigen .gdo_prev svg{transform:scaleX(-1);}
/* Área táctil de 44 sin mover la caja de 32. */
#garantiasorigen .gdo_flecha::after{content:''; display:block; position:absolute; top:-6px; right:-6px; bottom:-6px; left:-6px;}
@media (hover:hover){
  #garantiasorigen .gdo_flecha:not([aria-disabled="true"]):hover{background:var(--gdo-green); box-shadow:none; color:var(--gdo-sand1);}
}
#garantiasorigen .gdo_flecha:not([aria-disabled="true"]):active{background:var(--gdo-green); box-shadow:none; color:var(--gdo-sand1);}
#garantiasorigen .gdo_flecha[aria-disabled="true"]{box-shadow:inset 0 0 0 1px rgba(0, 64, 42, .5); cursor:default;}
#garantiasorigen .gdo_flecha[aria-disabled="true"] svg{opacity:.5;}

/* ===== Foco: sólo con teclado ============================================== */
#garantiasorigen button:focus-visible{outline:2px solid var(--gdo-green1) !important; outline-offset:2px !important;}

/* ===== Con JS (data-js): un paso elegido, una tarjeta ======================
   Sin paso elegido no están ni la tarjeta ni la paginación (default). Las no elegidas, fuera del árbol (inert, del
   JS) y sin verse; un solo mecanismo en los dos modos, que deja fundir la que sale (A-002). */
#garantiasorigen[data-js]:not([data-sel]) .gdo_det{display:none !important;}
#garantiasorigen[data-js] .gdo_tarjetas{display:grid !important; grid-template-columns:minmax(0,1fr); grid-template-rows:auto;
  align-items:stretch; justify-items:stretch; gap:0;}
#garantiasorigen[data-js] .gdo_tarjeta{grid-area:1 / 1; opacity:0; visibility:hidden;}
#garantiasorigen[data-js] .gdo_tarjeta.is-on{opacity:1; visibility:visible;}
/* En móvil todas miden lo de la más larga (D-09): el cuerpo, con su trazo, llena la celda; el texto, arriba. */
#garantiasorigen[data-js] .gdo_tcuerpo{flex:1 1 auto;}

/* ===== Móvil (por debajo del corte): carrusel de un círculo (D-06) =========
   La pista se desplaza un círculo por paso (`--gdo-i`, del JS) y sigue al dedo (`--gdo-drag`). El distintivo,
   encima, solapa 16,78 (como en el 1). 8 arriba y abajo: el contorno de foco cabe. */
#garantiasorigen .gdo_paso{padding-top:15.314px;}
#garantiasorigen .gdo_pista{gap:16px;}
#garantiasorigen[data-js] .gdo_ciclo{overflow:hidden; padding:8px 0; touch-action:pan-y pinch-zoom;}
#garantiasorigen[data-js] .gdo_conector{display:none !important;}
#garantiasorigen[data-js] .gdo_pista{flex-direction:row; align-items:flex-start; gap:0;
  transform:translateX(calc(-100% * var(--gdo-i, 0) + var(--gdo-drag, 0px)));}
#garantiasorigen[data-js] .gdo_paso{flex:0 0 100%; width:100%;}
#garantiasorigen[data-js] .gdo_nodo{-webkit-user-select:none; user-select:none;}
#garantiasorigen .gdo_dib{-webkit-user-drag:none;}
/* Sin JS, en móvil, el conector no tiene sitio: los cinco en columna (RF-05). */
#garantiasorigen:not([data-js]) .gdo_conector{display:none !important;}

/* Los saltos de línea del diseño en título y entradilla son de la composición grande. */
#garantiasorigen .gdo_brg{display:none !important;}

/* ===== Escritorio: el ÚNICO corte ==========================================
   El ciclo, a su tamaño (501 × 527,25) y centrado: no crece. Lo demás sigue fluido. */
@container gdo (min-width: 565px){
  #garantiasorigen .gdo_in{--gdo-modo:escritorio; padding:39px 31px;}
  #garantiasorigen .gdo_brg{display:inline !important;}
  #garantiasorigen .gdo_ciclo,#garantiasorigen[data-js] .gdo_ciclo{width:501px; height:527.253px; margin:0 auto;
    padding:0; overflow:visible; touch-action:auto;}
  #garantiasorigen .gdo_conector,#garantiasorigen[data-js] .gdo_conector,
  #garantiasorigen:not([data-js]) .gdo_conector{display:block !important;}
  #garantiasorigen .gdo_pista,#garantiasorigen[data-js] .gdo_pista{display:block !important; position:absolute; top:0; left:0;
    width:100%; height:100%; transform:none !important;}
  #garantiasorigen .gdo_paso,#garantiasorigen[data-js] .gdo_paso{display:block !important; position:absolute; padding:0;
    width:var(--gdo-circulo); height:var(--gdo-circulo);}
  #garantiasorigen .gdo_diapo{width:100%; height:100%;}
  #garantiasorigen .gdo_paso[data-n="1"]{left:160.437px; top:15.314px;}
  #garantiasorigen .gdo_paso[data-n="2"]{left:317.956px; top:149.498px;}
  #garantiasorigen .gdo_paso[data-n="3"]{left:266.179px; top:344.21px;}
  #garantiasorigen .gdo_paso[data-n="4"]{left:54.694px; top:344.21px;}
  #garantiasorigen .gdo_paso[data-n="5"]{left:0; top:149.498px;}
  /* Cada tarjeta a su alto (como los frames activos): la no elegida sale del flujo. */
  #garantiasorigen[data-js] .gdo_tarjetas{display:block !important; position:relative;}
  #garantiasorigen[data-js] .gdo_tarjeta{position:absolute; top:0; left:0; right:0;}
  #garantiasorigen[data-js] .gdo_tarjeta.is-on{position:relative;}
}

/* ===== Sin JS (RF-05): ciclo, notas y las cinco tarjetas; sin paginación ==== */
#garantiasorigen:not([data-js]) .gdo_pag{display:none !important;}

/* ===== Animaciones (animations.md), sólo con `data-anim` ===================
   El JS lo pone tras dos fotogramas: la carga no anima nada. */
#garantiasorigen[data-anim] .gdo_nodo > :is(.gdo_capa,.gdo_fondo,.gdo_dib){transition:opacity 200ms ease;}
/* A-002: sale en 100 ms; después, entra en 300 ms. Nunca dos textos a la vez. */
#garantiasorigen[data-anim] .gdo_tarjeta{transition:opacity 100ms linear, visibility 0s linear 100ms;}
#garantiasorigen[data-anim] .gdo_tarjeta.is-on{transition:opacity 300ms cubic-bezier(0.2, 0.9, 0.3, 1) 100ms, visibility 0s linear 100ms;}
/* La primera vez (de ninguno a uno) la tarjeta aparece con la misma entrada. */
@starting-style{
  #garantiasorigen[data-anim] .gdo_tarjeta.is-on{opacity:0;}
}
/* A-003: el carrusel. Mientras se arrastra, la pista sigue al dedo sin transición. */
#garantiasorigen[data-anim] .gdo_pista{transition:transform 400ms cubic-bezier(0.2, 0.9, 0.3, 1);}
#garantiasorigen[data-drag] .gdo_pista{transition:none;}
/* A-004: las flechas. */
#garantiasorigen[data-anim] .gdo_flecha{transition:background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;}

@media (prefers-reduced-motion: reduce){
  #garantiasorigen .gdo_nodo > *,#garantiasorigen .gdo_tarjeta,#garantiasorigen .gdo_tarjeta.is-on,
  #garantiasorigen .gdo_pista,#garantiasorigen .gdo_flecha{transition:none !important;}
}

/* Alto contraste de Windows: las sombras (y con ellas el trazo de las flechas) desaparecen. */
@media (forced-colors: active){
  #garantiasorigen .gdo_flecha{border:1px solid CanvasText;}
}