/* ========================================================================== Petroleum — capa compartida de los bloques de sección Antes esto vivía dentro de cada bloque HTML. Se movió aquí porque Rank Math analiza el contenido de la página: con el CSS y el JS incrustados, el 90% de la portada era código y sólo quedaban 74 palabras reales que analizar. Ahora los bloques que se pegan en Gutenberg son marcado y nada más. Vocabulario: .pg-sec una sección de página (hero, servicios, pie…) .pg-bleed la saca del contenedor de Gutenberg, a ancho completo .pg-geo geometría dorada del fondo .pg-up entra escalonado al asomar la sección .pg-card tarjeta con "pop" al pasar el puntero .pg-letras texto que se parte en letras y se aparta del cursor .pg-imanta contenedor cuyos hijos .pg-huye se apartan del cursor ========================================================================== */ /* Todos los iconos son Material Symbols (Apache 2.0): son SÓLIDOS, así que se pintan con fill y no con stroke. */ /* -------------------------------------------------------------------------- 1. BASE DE SECCIÓN -------------------------------------------------------------------------- */ .pg-sec{ position:relative; /* `overflow:hidden` convierte al elemento en contenedor de scroll y anula cualquier position:sticky que tenga dentro. `clip` recorta igual pero no crea contenedor. La primera línea es el respaldo para navegadores sin `clip`. La geometría además se recorta sola, así que aquí sobra casi. */ overflow:hidden; overflow:clip; background:var(--pg-bg);color:var(--pg-fg); font-family:var(--pg-font); padding:clamp(56px,7vw,104px) clamp(20px,4vw,40px); } /* Blocksy mete relleno vertical en el contenedor del contenido (`data-vertical-spacing`). Cuando la página arranca con una sección nuestra sobra: la sección ya trae el suyo, y se acumulaban dos separaciones entre la cabecera y el hero. Se usa :has() para no tocar las páginas que no empiezan con un bloque nuestro, como las entradas del blog. */ .ct-container-full:has(> article > .entry-content > .pg-sec:first-child), .ct-container:has(> article > .entry-content > .pg-sec:first-child){ padding-top:0; } /* Y la primera sección respira menos por arriba: pega con la cabecera */ .entry-content > .pg-sec:first-child{padding-top:clamp(28px,3.2vw,50px);} .pg-sec,.pg-sec *{box-sizing:border-box;} .pg-sec *{min-width:0;} .pg-sec__in{max-width:var(--pg-max);margin:0 auto;position:relative;z-index:1;} /* Banda alterna. Dos secciones seguidas con el mismo fondo se leen como una sola cosa larga; con la banda, la página tiene ritmo sin cambiar de lenguaje. Alternar: hero (bg) → servicios (alt) → siguiente (bg) → … */ .pg-sec--alt{ background:var(--pg-surface); border-top:1px solid var(--pg-line); border-bottom:1px solid var(--pg-line); } /* Sobre la banda, la tarjeta invierte el degradado para seguir despegando. Se excluye la que gira: su cuerpo vive en las caras, y si el contenedor pintara fondo asomarían sus esquinas rectas por detrás de las redondeadas — que es justo lo que se veía como "una tarjeta dentro de otra". */ .pg-sec--alt .pg-card:not(.pg-card--flip){ background:var(--pg-bg); background: linear-gradient(158deg, color-mix(in srgb,var(--pg-gold) 5%, var(--pg-bg)) 0%, var(--pg-bg) 82%); } .pg-sec--alt .pg-chips li, .pg-sec--alt .pg-card__cod{background:var(--pg-surface);} /* Cabecera de sección: mismo bloque en todas, mismo aire debajo */ .pg-sec__cab{max-width:64ch;margin:0 0 clamp(34px,4vw,50px);} .pg-sec__cab .pg-lead{margin-bottom:0;} /* Variante pareada: titular a la izquierda, entradilla a la derecha. La cabecera normal se acota a 64ch para que el texto se lea; con un titular largo y una entradilla larga apilados, eso deja media pantalla vacía a la derecha. Aquí el par llena las dos columnas. No es el modo por omisión a propósito: sólo funciona cuando los dos textos dan para llenar su columna. Con una entradilla corta, la derecha se queda coja y se ve peor que apilada. Por eso va sección por sección. Las dos columnas se alinean por la BASE (`align-items:end`): así cierran a la misma altura sin importar en cuántas líneas parta cada una, que es lo que hace que se lean como una pieza y no como dos textos sueltos. La especificidad de `.pg-sec .pg-sec__cab--par h2.pg-t` (0-3-1) no es capricho: el margen inferior del titular lo pone `.pg-sec h2.pg-t` (0-2-1), que además vive MÁS ABAJO en este archivo. A igual peso ganaría aquélla por orden. Es el cuarto incidente del mismo tipo en el proyecto. */ .pg-sec__cab--par{ max-width:none; display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:clamp(22px,3.2vw,58px);align-items:end; } .pg-sec__cab--par>*{min-width:0;} .pg-sec .pg-sec__cab--par h2.pg-t{margin-bottom:0;} .pg-sec__cab--par .pg-lead{max-width:54ch;} /* Por debajo de 900px la entradilla no cabe al lado del titular: se apila y recupera el margen y el ancho de lectura de la cabecera normal. */ @media (max-width:900px){ .pg-sec__cab--par{grid-template-columns:1fr;gap:0;align-items:start;} .pg-sec .pg-sec__cab--par h2.pg-t{margin-bottom:20px;} .pg-sec__cab--par .pg-lead{max-width:64ch;} } /* Cierre de sección: la fila que remata y empuja al siguiente paso */ .pg-cierre{ display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px; margin-top:clamp(34px,4vw,48px);padding-top:28px; border-top:1px solid var(--pg-line); } .pg-cierre p{margin:0;max-width:52ch;font-size:15.5px;line-height:1.65;color:var(--pg-muted);} .pg-cierre .pg-btn{margin-left:auto;} @media (max-width:700px){ .pg-cierre .pg-btn{margin-left:0;width:100%;} } /* Ancho completo aunque el bloque viva dentro del contenedor de Gutenberg o en un área de widgets, donde `alignfull` ni siquiera existe. --pg-sbw descuenta la barra de desplazamiento: sin eso, 100vw es más ancho que la página y aparece scroll horizontal. */ .pg-bleed{ width:calc(100vw - var(--pg-sbw,0px)); max-width:calc(100vw - var(--pg-sbw,0px)); margin-left:calc(50% - (100vw - var(--pg-sbw,0px)) / 2); margin-right:calc(50% - (100vw - var(--pg-sbw,0px)) / 2); } /* -------------------------------------------------------------------------- 2. GEOMETRÍA DE FONDO Difuminado dorado + cuarto de círculo del icono + dos arcos de trazo fino. En reposo está en su estado final: sin JS se ve, sólo que quieta. -------------------------------------------------------------------------- */ .pg-geo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;} .pg-geo > *{position:absolute;display:block;} .pg-geo__glow{ right:-8%;top:-30%;width:62%;padding-top:62%; background:radial-gradient(circle at 50% 50%,var(--pg-gold) 0%,transparent 68%); opacity:var(--pg-geo-glow); } .pg-geo__quad{ right:-140px;top:-140px;width:420px;height:420px; border-radius:0 0 0 100%;background:var(--pg-gold); opacity:var(--pg-geo-fill); } .pg-geo__arc{ left:-300px;bottom:-340px;width:660px;height:660px; border:1px solid var(--pg-gold);border-radius:50%; opacity:var(--pg-geo-arc); } .pg-geo__arc--2{left:auto;right:-220px;bottom:-260px;width:480px;height:480px;} /* El hero es el único que lleva la geometría a plena intensidad. En las secciones de contenido baja, o dos difuminados seguidos compiten y el fondo se enturbia. */ .pg-geo--suave{opacity:.5;} /* Variante izquierda: el cuarto de círculo pasa a la esquina superior IZQUIERDA para quedar detrás del titular. El difuminado se queda a la derecha, detrás de las tarjetas: así el peso visual no se acumula en un solo lado. */ .pg-geo--izq .pg-geo__quad{ right:auto;left:-140px;top:-140px; border-radius:0 0 100% 0; } .pg-sec.is-armed .pg-geo--izq .pg-geo__quad{transform:scale(.7) translate(-26px,-26px);} /* Variante espejo, para el pie: el difuminado entra por abajo a la izquierda */ .pg-geo--abajo .pg-geo__glow{right:auto;top:auto;left:-10%;bottom:-40%;width:70%;padding-top:70%;} .pg-geo--abajo .pg-geo__quad{right:auto;top:auto;left:-160px;bottom:-160px;border-radius:0 100% 0 0;} .pg-geo--abajo .pg-geo__arc{left:auto;bottom:auto;right:-280px;top:-220px;width:620px;height:620px;} .pg-geo--abajo .pg-geo__arc--2{right:-190px;top:-130px;width:440px;height:440px;} /* Escondida mientras el JS la va a animar */ .pg-sec.is-armed .pg-geo__glow{opacity:0;transform:scale(.84);} .pg-sec.is-armed .pg-geo__quad{opacity:0;transform:scale(.7) translate(26px,-26px);} .pg-sec.is-armed .pg-geo__arc{opacity:0;transform:translateX(-80px);} .pg-sec.is-armed .pg-geo__arc--2{transform:translateX(80px);} /* Y entra por los lados cuando la sección asoma */ .pg-sec.is-armed.is-live .pg-geo__glow{ opacity:var(--pg-geo-glow);transform:scale(1); transition:opacity 900ms var(--pg-ease-out) 60ms,transform 1100ms var(--pg-ease) 60ms; } .pg-sec.is-armed.is-live .pg-geo__quad{ opacity:var(--pg-geo-fill);transform:none; /* rebote corto al asentar: el "pop" */ transition:opacity 520ms var(--pg-ease-out) 180ms, transform 700ms cubic-bezier(.34,1.4,.64,1) 180ms; } .pg-sec.is-armed.is-live .pg-geo__arc{ opacity:var(--pg-geo-arc);transform:none; transition:opacity 760ms var(--pg-ease-out) 260ms,transform 900ms var(--pg-ease) 260ms; } .pg-sec.is-armed.is-live .pg-geo__arc--2{transition-delay:360ms;} /* -------------------------------------------------------------------------- 3. ENTRADA ESCALONADA Arranca visible. Sólo se esconde si el JS está vivo para volver a mostrarla: sin JS no se pierde una sola palabra. -------------------------------------------------------------------------- */ .pg-sec .pg-up{transition:opacity 700ms var(--pg-ease-out),transform 700ms var(--pg-ease);} .pg-sec.is-armed .pg-up{opacity:0;transform:translateY(16px);} .pg-sec.is-armed .pg-up.is-in{opacity:1;transform:none;} /* -------------------------------------------------------------------------- 4. TIPOGRAFÍA DE SECCIÓN -------------------------------------------------------------------------- */ /* Antetítulo. Llevaba delante el cuarto de círculo del icono, repetido en las siete secciones y en el mismo sitio: a fuerza de repetirse dejó de leerse como marca y empezó a leerse como adorno de plantilla. Se retiró (2026-08-18). En su lugar, el propio texto es de metal: una franja de luz lo cruza cada pocos segundos, como cuando se gira una moneda bajo una lámpara. El color base sigue siendo --pg-accent; lo que se mueve es el destello. Cuidados: · `background-clip:text` necesita `color:transparent`, así que el color real se declara ANTES y sólo se anula donde la propiedad existe. Sin soporte, el antetítulo se ve dorado y quieto, que es el estado correcto. · `inline-flex` pasa a `inline-block`: un contenedor flex sin hijos de texto directo no recorta el fondo contra las letras. · El bucle se detiene con `prefers-reduced-motion` (más abajo). */ .pg-eyebrow{ display:inline-block;margin:0 0 18px; font-size:13px;font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:var(--pg-accent); } /* El destello NO se mueve con `background-position` (2026-08-18). Se intentó primero así, con un fondo del 280% del ancho, y el brillo se veía cortado a media palabra. La razón: cuando la imagen de fondo es MÁS ANCHA que la caja, los porcentajes de `background-position` se calculan sobre (ancho de caja − ancho de imagen), que es negativo. El resultado deja de ser intuitivo y depende del largo de cada antetítulo, así que cada uno brillaba en un punto distinto. Lo que se mueve ahora es la POSICIÓN DE LA PARADA dentro del degradado, con una custom property animada vía @property. El fondo mide exactamente lo que la caja, así que --pg-x va de 130% (fuera por la derecha) a -30% (fuera por la izquierda) y el barrido es idéntico mida lo que mida el texto. Sin @property —Firefox anterior al 128— la propiedad no se puede animar: el antetítulo se queda con el valor inicial, 130%, que es todo color de acento. Es decir, se ve exactamente como antes de este efecto. */ @property --pg-x{ syntax:''; inherits:false; initial-value:130%; } @supports (background-clip:text) or (-webkit-background-clip:text){ .pg-eyebrow{ background-image:linear-gradient( 100deg, var(--pg-accent) calc(var(--pg-x) - 26%), var(--pg-brillo) var(--pg-x), var(--pg-accent) calc(var(--pg-x) + 26%) ); background-size:100% 100%; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; color:transparent; animation:pg-moneda 5.2s var(--pg-ease-out) infinite; } } /* El destello cruza en el primer tercio del ciclo y el resto es reposo: un brillo cada 5 s se percibe como material, uno continuo como banner. */ @keyframes pg-moneda{ 0% { --pg-x:130%; } 34% { --pg-x:-30%; } 100% { --pg-x:-30%; } } .pg-sec h1,.pg-sec h2.pg-t{ margin:0 0 20px;color:var(--pg-head);font-weight:800; line-height:1.14;letter-spacing:-.02em;text-wrap:balance; } .pg-sec h1{font-size:clamp(34px,5.2vw,60px);line-height:1.12;} /* Un escalón por debajo del H1: la portada tiene un solo titular principal */ .pg-sec h2.pg-t{font-size:clamp(26px,3.3vw,40px);} .pg-lead{ margin:0 0 32px;font-size:clamp(16px,1.5vw,18px);line-height:1.7; color:var(--pg-fg);max-width:62ch; } .pg-lead strong{color:var(--pg-head);font-weight:700;} .pg-cta{display:flex;flex-wrap:wrap;gap:14px;} /* -------------------------------------------------------------------------- 5. TARJETAS -------------------------------------------------------------------------- */ .pg-card{ position:relative;z-index:1;overflow:hidden;isolation:isolate; background:var(--pg-surface); /* respaldo si no hay color-mix */ background: linear-gradient(158deg, color-mix(in srgb,var(--pg-gold) 7%, var(--pg-surface)) 0%, var(--pg-bg) 78%); border:1px solid var(--pg-line);border-radius:16px; padding:28px 26px; transition: transform 420ms var(--pg-ease), box-shadow 420ms var(--pg-ease), border-color 300ms var(--pg-ease); } .pg-card--wide{grid-column:1 / -1;} /* Filete dorado superior, se dibuja de izquierda a derecha */ .pg-card::before{ content:"";position:absolute;left:0;top:0;height:2px;width:100%; background:linear-gradient(90deg,transparent,var(--pg-gold),transparent); transform:scaleX(0);transform-origin:left; transition:transform var(--pg-slow) var(--pg-ease); } /* Foco de luz: el JS le pasa la posición del cursor en --pg-sx / --pg-sy */ .pg-card::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(260px circle at var(--pg-sx,50%) var(--pg-sy,50%), var(--pg-gold) 0%,transparent 60%); opacity:0;transition:opacity 300ms linear; } /* La esquina: el cuarto de círculo del icono, otra vez */ .pg-card__esq{ position:absolute;right:-1px;top:-1px;width:56px;height:56px; border-radius:0 16px 0 100%; background:var(--pg-gold);opacity:calc(var(--pg-ico) * .72); transform-origin:top right; transition:transform 560ms var(--pg-ease),opacity 300ms linear; } /* -------------------------------------------------------------------------- 5c. TARJETA DE SERVICIO La tarjeta NO es un . Antes lo era, y como dentro llevaba los enlaces a ASEA/CRE/SAT quedaban anclas anidadas: el parser de HTML no las admite y partía la tarjeta en trozos —el título en una caja y el párrafo en otra—. Ahora el enlace vive en el título y se estira sobre toda la tarjeta con un pseudo-elemento, así que se puede pulsar entera con un solo dentro. -------------------------------------------------------------------------- */ .pg-card--srv{display:flex;flex-direction:column;} /* Fila superior: icono + código de norma. Es lo que hace que la tarjeta se lea como UNA pieza y no como elementos sueltos apilados. */ .pg-card__top{ display:flex;align-items:center;justify-content:space-between; gap:12px;margin:0 0 20px; } .pg-card__ib{ flex:none;display:grid;place-items:center; width:46px;height:46px;border-radius:13px; background:var(--pg-bg);border:1px solid var(--pg-line); color:var(--pg-accent); transition:background-color 320ms var(--pg-ease), border-color 320ms var(--pg-ease), color 320ms var(--pg-ease); } .pg-sec--alt .pg-card__ib{background:var(--pg-surface);} .pg-card__ib svg{width:23px;height:23px;fill:currentColor;stroke:none;} .pg-card--srv .pg-card__ttl{margin:0 0 10px;font-size:20px;line-height:1.28;} .pg-card--srv .pg-card__ttl a{color:inherit;text-decoration:none;} /* El enlace se estira sobre la tarjeta entera */ .pg-card__enl::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;} .pg-card__enl:focus-visible::after{outline:2px solid var(--pg-accent);outline-offset:-3px;} /* Remate: separado por un filete y pegado abajo, para que quede a la misma altura en todas las tarjetas por larga o corta que sea la descripción. */ .pg-card--srv .pg-card__mas{ margin:auto 0 0;padding-top:18px;width:100%; display:flex;align-items:center;justify-content:space-between;gap:12px; border-top:1px solid var(--pg-line); font-size:14px;font-weight:800;color:var(--pg-accent); } .pg-card__flecha{ flex:none;display:grid;place-items:center; width:34px;height:34px;border-radius:50%; border:1px solid var(--pg-line);color:var(--pg-accent); transition:background-color 300ms var(--pg-ease), border-color 300ms var(--pg-ease), color 300ms var(--pg-ease), transform 300ms var(--pg-ease); } .pg-card__flecha svg{width:16px;height:16px;fill:currentColor;stroke:none;} @media (hover:hover) and (pointer:fine){ .pg-card--srv:not(.pg-card--ico):hover .pg-card__ib{ background:var(--pg-gold);border-color:var(--pg-gold);color:var(--pg-on-gold); } .pg-card--srv:hover .pg-card__flecha{ background:var(--pg-gold);border-color:var(--pg-gold);color:var(--pg-on-gold); transform:translateX(4px); } } @media (hover:hover) and (pointer:fine){ .pg-card:hover{ z-index:2; transform:scale(1.035) translateY(-6px); border-color:var(--pg-gold); box-shadow:0 32px 64px -32px var(--pg-shadow), 0 4px 12px -8px var(--pg-glow); } .pg-card:hover::before{transform:scaleX(1);} .pg-card:hover::after{opacity:.13;} .pg-card:hover .pg-card__esq{transform:scale(1.45);opacity:calc(var(--pg-ico) * 1.45);} } /* -------------------------------------------------------------------------- 5d. TARJETA CON EL ICONO DE FONDO (.pg-card--ico) Variante de `.pg-card--srv` para el portal de clientes. El icono deja de ser una insignia de 46px en su propia fila y pasa a MARCA DE AGUA: grande, en dorado tenue, anclado arriba a la izquierda y recortado por el borde de la tarjeta. El texto se queda solo y se centra en el hueco. Tres cosas que conviene saber antes de tocarlo: · **El recorte no lleva codigo nuevo.** `.pg-card` ya trae `overflow:hidden` —estaba por el halo del cursor— y los margenes negativos hacen el resto. Si algun dia se le quitara el `overflow`, el icono se saldria de la caja y pisaria la tarjeta de al lado. · **`.pg-card__top` sale del flujo con `position:absolute`.** En flujo seguiria reservando su alto, y entonces el texto no quedaria centrado en la TARJETA sino en el hueco que sobra por debajo del icono, que es medio centimetro mas abajo y se nota. · **El icono ya no se rellena de dorado al pasar el cursor**, como si hace la insignia: a 150px seria un bloque dorado macizo comiendose la tarjeta. Lo que hace es SUBIR DE OPACIDAD, igual que la marca de agua de las tarjetas de servicio. Por eso las reglas de la insignia llevan `:not(.pg-card--ico)` — es mas claro excluir la variante donde se define el efecto que perseguirla despues con mas especificidad. El tamano y el desplazamiento van en variables propias para poder ajustarlos en un solo sitio; el desplazamiento negativo ES lo que se sale de la caja. -------------------------------------------------------------------------- */ .pg-card--ico{ /* Los seis numeros van SIN UNIDAD, en px, y se multiplican por 1px donde se usan. No es manía: la escala del recogido es `--pg-ib-fin / --pg-ib`, y calc() sólo divide por un NÚMERO — `calc(48px / 150px)` es sintaxis inválida y tumba la declaración entera, en silencio. */ --pg-ib:150; /* lado del icono en reposo */ --pg-ib-x:-40; /* lo que se sale por la izquierda */ --pg-ib-y:-46; /* … y por arriba */ /* Destino al activarse: donde queda la esquina superior izquierda del icono ya recogido, medida desde la misma esquina de la tarjeta. */ --pg-ib-fin:48; --pg-ib-fx:22; --pg-ib-fy:22; /* Aire entre el borde de abajo del icono RECOGIDO y el titular. */ --pg-ib-aire:20px; justify-content:center;text-align:center; min-height:250px; /* El relleno de arriba se mide contra el icono RECOGIDO, no contra la marca de agua. Es la correccion de la v2.48.2, que despejaba los 104px del icono grande y abria un boquete: **la marca de agua es fondo**, esta al 15% de opacidad y su oficio es justamente que el texto pase por encima. El que tiene que respirar es el icono al que se transforma, que es opaco y se lee como una pieza mas de la tarjeta. Asi que la cuenta va con las variables del destino: el icono recogido acaba en `--pg-ib-fy + --pg-ib-fin` —su posicion mas su lado, hoy 22 + 48 = 70px— y a eso se le suma el aire. Moviendo el destino, el texto lo sigue. Va en px fijos y NO en `vw`: el icono recogido mide 48px en todas las pantallas, y un relleno que encogiera con el ancho dejaria de despejarlo justo en el movil, que es donde la tarjeta ocupa el ancho entero. */ padding:calc((var(--pg-ib-fy) + var(--pg-ib-fin)) * 1px + var(--pg-ib-aire)) clamp(24px,2.4vw,30px) clamp(30px,3.2vw,40px); } .pg-card--ico .pg-card__top{ position:absolute;left:0;top:0;z-index:0; display:block;margin:0;pointer-events:none; } .pg-card--ico .pg-card__ib{ width:calc(var(--pg-ib) * 1px);height:calc(var(--pg-ib) * 1px); margin:calc(var(--pg-ib-y) * 1px) 0 0 calc(var(--pg-ib-x) * 1px); border:0;border-radius:0;background:none; transform-origin:top left; /* Las tres cosas que cambian al activarse la tarjeta. El valor de reposo es el de reserva de cada `var()`; encender la tarjeta es reapuntarlas. */ color:var(--pg-ib-col,var(--pg-gold)); opacity:var(--pg-ib-op,var(--pg-ico)); transform:var(--pg-ib-tr,none); transition:opacity 520ms var(--pg-ease), transform 620ms var(--pg-ease-out), color 520ms var(--pg-ease); } /* La banda alterna pinta la insignia de otro color; la marca de agua no lleva caja, asi que no tiene fondo que pintar. */ .pg-sec--alt .pg-card--ico .pg-card__ib{background:none;} .pg-card--ico .pg-card__ib svg{width:100%;height:100%;} /* El texto, por delante de la marca de agua y acotado para que centrado no quede un renglon suelto de borde a borde. */ /* El titular NO reserva renglones de mas. Se intento en la v2.48.1: como «Los documentos, no solo el dictamen» ocupa dos renglones y los otros dos titulares uno, se le puso `min-height` de dos renglones a los tres para que arrancaran a la misma altura. Salio peor por partida doble. En las tarjetas 1 y 3 quedaba un renglon FANTASMA entre el titular y su parrafo —un hueco que no estaba en la del medio—, y como el bloque va centrado en vertical, los 25px de mas empujaban el texto hacia ARRIBA, con lo que se montaba mas sobre la marca de agua en vez de menos. El desnivel de un renglon entre tarjetas no era el problema: el problema era que el texto invadia el icono. Eso se arregla despejando el icono con el relleno de arriba, que es donde se resolvio, y no falseando la altura del titular. `text-wrap:balance` se queda: parte el titular largo en dos lineas parejas en vez de una llena y una coja. */ .pg-card--ico .pg-card__ttl{ position:relative;z-index:1;margin:0 0 7px;font-size:20px; text-wrap:balance; } .pg-card--ico p{position:relative;z-index:1;max-width:36ch;margin-left:auto;margin-right:auto;} /* --- La transformacion --------------------------------------------------- Al activarse la tarjeta la marca de agua se RECOGE: se encoge hasta 48px, se mete dentro de la tarjeta y se enciende en dorado opaco. Al salir el cursor deshace el camino y vuelve a ser fondo. Es UN movimiento, no dos iconos que se cruzan en un fundido. **Por que `transform` y no `width`/`height`/`margin`.** Animar la caja obliga al navegador a rehacer el diseno en cada fotograma, y este icono va dentro de una tarjeta que a la vez se esta escalando en su propio `:hover`. Con `transform` y `opacity` los dos movimientos se resuelven en la capa de composicion y no se pisan. **La cuenta del desplazamiento**, para poder ajustarla sin adivinar: con `transform-origin:top left`, `translate()` mueve la esquina superior izquierda del icono y `scale()` encoge desde esa esquina ya movida. La esquina parte de (--pg-ib-x, --pg-ib-y) —negativos, por eso se sale— y tiene que acabar en (--pg-ib-fx, --pg-ib-fy): el desplazamiento es la resta de las dos. Cambiando cualquiera de los cuatro numeros de arriba, esto se recoloca solo. **Vive en una variable, `--pg-ib-tr-on`, y no repetida en cada disparador.** Son dos —el cursor en escritorio y `.is-activa` en movil— y estan en medias distintas, asi que no pueden compartir regla. Lo que no se puede duplicar es la cuenta: si se escribiera dos veces, el dia que se toque un numero una de las dos se queda vieja y el icono aterriza en distinto sitio segun el dispositivo. Los disparadores solo reapuntan variables. **El color de destino es `--pg-accent`, no `--pg-gold`.** Es el mismo dorado que ya llevaba la insignia, y el unico que se lee en los dos temas: el dorado de marca a plena opacidad da 2.32:1 sobre blanco. ------------------------------------------------------------------------- */ .pg-card--ico{ --pg-ib-tr-on: translate(calc((var(--pg-ib-fx) - var(--pg-ib-x)) * 1px), calc((var(--pg-ib-fy) - var(--pg-ib-y)) * 1px)) scale(calc(var(--pg-ib-fin) / var(--pg-ib))); } @media (hover:hover) and (pointer:fine){ .pg-card--ico:hover{ --pg-ib-tr:var(--pg-ib-tr-on); --pg-ib-op:1; --pg-ib-col:var(--pg-accent); } } .pg-card__num{ display:block;position:relative;font-size:clamp(34px,3.6vw,46px);font-weight:800;line-height:1; color:var(--pg-accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums; } /* La caja NO es cuadrada: toma la proporción de la silueta (1.52) para que no sobre aire arriba y abajo. El viewBox del SVG va recortado al contorno, así que la figura llena la caja entera. */ .pg-card__icobox{ display:block;width:clamp(62px,6.2vw,82px);aspect-ratio:1.52;height:auto; margin-bottom:16px; } .pg-card__ico{ display:block;width:100%;height:100%; fill:var(--pg-accent);stroke:none; } .pg-card__ttl{ display:block;position:relative;margin:0 0 8px; font-size:19px;font-weight:800;color:var(--pg-head);letter-spacing:-.01em;line-height:1.25; } .pg-card__lbl{display:block;margin-top:10px;font-size:14px;line-height:1.6;color:var(--pg-muted);} .pg-card p{margin:0 0 10px;font-size:14.5px;line-height:1.65;color:var(--pg-fg);} .pg-card p:last-child{margin-bottom:0;} .pg-card h2,.pg-card__rot{ position:relative; margin:0 0 14px;font-size:15px;font-weight:800;color:var(--pg-head); letter-spacing:.06em;text-transform:uppercase; } /* Código de norma. Va con el MISMO aspecto que las burbujas de "Alcances acreditados" del hero: es lo que ata visualmente las dos secciones — el lector reconoce la etiqueta que ya vio arriba. */ .pg-card__cod{ display:inline-block;align-self:flex-start;margin:0 0 14px; font-size:12.5px;font-weight:800;letter-spacing:.06em; padding:6px 12px;border-radius:99px; background:var(--pg-bg);border:1px solid var(--pg-line); color:var(--pg-accent); font-variant-numeric:tabular-nums; transition:border-color var(--pg-base) var(--pg-ease); } @media (hover:hover) and (pointer:fine){ .pg-card:hover .pg-card__cod{border-color:var(--pg-gold);} } /* Pie de tarjeta: el "ver más" con su flecha */ .pg-card__mas{ display:inline-flex;align-items:center;gap:8px;margin-top:16px; font-size:14px;font-weight:800;color:var(--pg-accent); } .pg-card__mas svg{ width:16px;height:16px;flex:none; fill:currentColor;stroke:none; transition:transform var(--pg-base) var(--pg-ease); } @media (hover:hover) and (pointer:fine){ .pg-card:hover .pg-card__mas svg{transform:translateX(4px);} } /* Burbujas */ .pg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;} .pg-chips li{ font-size:13px;font-weight:700;padding:7px 12px;border-radius:99px; background:var(--pg-bg);border:1px solid var(--pg-line);color:var(--pg-fg); transition:border-color var(--pg-base) var(--pg-ease), color var(--pg-base) var(--pg-ease); } @media (hover:hover) and (pointer:fine){ .pg-chips li:hover{border-color:var(--pg-gold);color:var(--pg-accent);} } /* Retículas */ .pg-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;} /* grid-auto-rows:1fr iguala TODAS las filas, no sólo las tarjetas de una misma fila. Sin esto, la fila con el texto más largo marca su altura y la otra queda más baja. */ .pg-grid-3{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; grid-auto-rows:1fr; } /* -------------------------------------------------------------------------- 5b. HERO — la única sección con dos columnas asimétricas -------------------------------------------------------------------------- */ .pg-hero__in{ display:grid;grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,64px);align-items:center; } @media (max-width:900px){ .pg-hero__in{grid-template-columns:1fr;} } /* -------------------------------------------------------------------------- 6. ANTI-IMÁN .pg-ch son letras sueltas; .pg-huye es cualquier elemento que deba apartarse (un icono, una burbuja). El contenedor va marcado con .pg-imanta o .pg-letras y debe ser position:relative: los centros se cachean respecto a él para no medir en cada fotograma. -------------------------------------------------------------------------- */ /* `normal` y no `pre-wrap`. Lo era porque los espacios eran `.pg-ch` sueltos; ahora van como texto normalizado entre palabras, y `pre-wrap` sólo traería problemas: conservaría el sangrado de un titular escrito en dos líneas del bloque, y dejaría el espacio que precede a un corte forzado colgando al principio de la línea siguiente. */ .pg-letras{position:relative;white-space:normal;} /* EL TITULAR SE PARTÍA POR LA MITAD DE UNA PALABRA ---------------------------------------------------------------------------- `.pg-ch` es `inline-block`: una caja atómica. El navegador puede cortar la línea entre dos cajas cualesquiera, así que un titular partido en letras no tiene palabras que respetar y envuelve por donde le cabe. En `/contacto/` salía «Cotización en m» arriba y «enos de 24 horas» abajo. `partir()` envuelve cada palabra en `.pg-pal` y este `nowrap` suprime el corte dentro, dejando la oportunidad sólo donde debe estar: en el espacio entre palabras, que va como texto suelto. Va en el envoltorio y no en `.pg-letras`: un `nowrap` en el contenedor impediría TODO corte y el titular se saldría por la derecha. */ .pg-pal{white-space:nowrap;} /* EL CORTE QUE DECIDE EL DISEÑO ---------------------------------------------------------------------------- `
` marca dónde QUERRÍAMOS que parta el titular. Nace apagado y lo enciende `quebrar()` en `bloques.js` —y sólo si lo de arriba entra en una línea—. Apagado por omisión y no al revés, que es lo que lo hace seguro: sin guión, en un teléfono o en una ventana estrecha, el titular envuelve solo y nunca se sale. El corte es una preferencia, no un requisito. */ .pg-quiebre{display:none;} .is-quiebre > .pg-quiebre{display:inline;} /* Texto dorado dentro de un titular. `--pg-accent` y NO `--pg-gold`: el dorado de marca da 2.32:1 sobre blanco y no se puede usar como texto en tema claro. El token vale para los dos temas —#806900 sobre claro, 5.33:1; #cba705 sobre negro, 8.39:1— y por eso no hace falta escribir el color dos veces. */ .pg-oro{color:var(--pg-accent);} .pg-ch{display:inline-block;} .pg-ch,.pg-huye{transition:transform 460ms var(--pg-ease);} .pg-imanta{position:relative;} /* -------------------------------------------------------------------------- 7. RESPONSIVO -------------------------------------------------------------------------- */ @media (max-width:980px){ .pg-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:900px){ .pg-geo__quad{width:260px;height:260px;right:-90px;top:-90px;} .pg-geo--izq .pg-geo__quad{right:auto;left:-90px;top:-90px;} .pg-geo--abajo .pg-geo__quad{right:auto;left:-100px;bottom:-100px;} } /* A una sola columna antes que el resto: con dos, la tarjeta de servicio se queda demasiado estrecha y el nombre de la norma parte mal. */ @media (max-width:760px){ .pg-grid-3{grid-template-columns:1fr;} } @media (max-width:560px){ .pg-grid-2{grid-template-columns:1fr;} .pg-cta .pg-btn{width:100%;} } /* -------------------------------------------------------------------------- Tarjeta de servicio en móvil A una sola columna se ensancha y se queda baja: pierde la proporción vertical del escritorio. Se le devuelve con una altura mínima, el nombre de la norma crece y el icono deja la esquina para ponerse al centro, como marca de agua detrás del nombre. -------------------------------------------------------------------------- */ @media (max-width:760px){ .pg-flip__frente{min-height:min(78vw,340px);} .pg-flip__cod{font-size:clamp(24px,6.4vw,32px);} .pg-flip__icono{ left:50%;right:auto;top:50%;bottom:auto; width:min(58vw,240px);height:min(58vw,240px); transform:translate(-50%,-42%); transform-origin:center; opacity:var(--pg-ico); } /* Iluminación por scroll: el motor de bloques.js marca la tarjeta que cruza el centro de la pantalla. Mismo mecanismo que la baraja del proceso, pero aquí NO se desenfocan las demás: cada tarjeta lleva un enlace y un botón, y desenfocarlas las haría parecer deshabilitadas. Sólo se atenúan. */ .pg-grid-3.is-tocada .pg-card--flip{ opacity:.72; transition:opacity 380ms var(--pg-ease); } .pg-grid-3 .pg-card--flip.is-activa{opacity:1;} .pg-grid-3 .pg-card--flip.is-activa .pg-flip__cara{ border-color:var(--pg-gold); box-shadow:0 26px 46px -26px var(--pg-shadow), 0 6px 18px -10px var(--pg-glow); } .pg-grid-3 .pg-card--flip.is-activa .pg-flip__icono{opacity:var(--pg-ico-on);} .pg-grid-3 .pg-card--flip.is-activa .pg-flip__ojo{ border-color:var(--pg-gold);color:var(--pg-accent); } .pg-grid-3 .pg-card--flip.is-activa .pg-card__flecha{border-color:var(--pg-gold);} /* Y ADEMÁS SE GIRA SOLA. ------------------------------------------------------------------------ En escritorio la tarjeta enseña el reverso al pasar el cursor. En móvil no hay cursor, así que ese contenido —el alcance de cada norma, que es la razón de ser de la tarjeta— dependía de que alguien descubriera el botón del ojo y lo pulsara. En la práctica no lo pulsa nadie: la mitad de la sección era invisible en teléfono. Ahora el scroll hace de cursor y la que cruza el centro se voltea. Se lee como una baraja que se va mostrando, y no hay nada que descubrir. El giro dura 720 ms y la banda activa es el 10% central de la pantalla, así que a velocidad de lectura da tiempo a completarse. Bajando muy rápido las tarjetas se quedan a medio girar y vuelven — que es el comportamiento correcto: nadie está leyendo. Se reutilizan las mismas declaraciones que `.is-flip`, no otras nuevas: si algún día cambia el giro, cambia en un solo sitio. Y el botón del ojo sigue funcionando, porque `.is-flip` y `.is-activa` son alternativas, no rivales: quien quiera fijar una tarjeta fuera de la banda, puede. */ .pg-grid-3 .pg-card--flip.is-activa .pg-flip{transform:rotateY(180deg);} .pg-grid-3 .pg-card--flip.is-activa .pg-flip__frente{opacity:0;} .pg-grid-3 .pg-card--flip.is-activa .pg-flip__tras{opacity:1;} /* Tarjetas SIN giro —las del portal—: el mismo motor, pero aquí sólo se encienden. No tienen reverso que enseñar. */ .pg-grid-3.is-tocada .pg-card--srv{ opacity:.72; transition:opacity 380ms var(--pg-ease), border-color 300ms var(--pg-ease), box-shadow 420ms var(--pg-ease), transform 420ms var(--pg-ease); } .pg-grid-3 .pg-card--srv.is-activa{ opacity:1; transform:translateY(-4px); border-color:var(--pg-gold); box-shadow:0 26px 46px -26px var(--pg-shadow), 0 6px 18px -10px var(--pg-glow); } .pg-grid-3 .pg-card--srv:not(.pg-card--ico).is-activa .pg-card__ib{ background:var(--pg-gold);border-color:var(--pg-gold);color:var(--pg-on-gold); } /* La marca de agua no se rellena de dorado como la insignia: hace la MISMA transformacion que en escritorio, reapuntando las mismas variables. La cuenta esta en `--pg-ib-tr-on`, en la seccion 5d. */ .pg-grid-3 .pg-card--ico.is-activa{ --pg-ib-tr:var(--pg-ib-tr-on); --pg-ib-op:1; --pg-ib-col:var(--pg-accent); } } /* -------------------------------------------------------------------------- 8. MOVIMIENTO REDUCIDO -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .pg-card__ib,.pg-card__flecha,.pg-card__cod, .pg-card,.pg-card::before,.pg-card::after,.pg-card__esq, .pg-chips li,.pg-ch,.pg-huye,.pg-sec .pg-up,.pg-card__mas svg{ transition:none !important; } .pg-card:hover{transform:none;} .pg-card--srv:hover .pg-card__flecha{transform:none;} .pg-sec.is-armed .pg-up{opacity:1;transform:none;} .pg-sec.is-armed .pg-geo__glow, .pg-sec.is-armed .pg-geo__quad, .pg-sec.is-armed .pg-geo__arc{opacity:revert-layer;transform:none;} } /* -------------------------------------------------------------------------- 9. PIE DE PÁGINA Es una .pg-sec más, con su propia retícula. El pie de Blocksy queda oculto desde petroleum.css: éste lo sustituye. -------------------------------------------------------------------------- */ .pg-foot{ font-size:15px;line-height:1.65; padding:clamp(52px,6vw,84px) clamp(20px,4vw,40px) clamp(24px,3vw,32px); border-top:1px solid var(--pg-line); } /* Franja superior: marca + llamado a la acción */ .pg-foot__top{ display:grid;grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px);align-items:center; } .pg-brand{display:inline-flex;align-items:center;gap:14px;margin:0 0 18px;text-decoration:none;} /* Marca gráfica: el cuarto de círculo del icono. Para usar el logo real, sustituye .pg-brand__mark por una . */ .pg-brand__mark{ flex:none;width:40px;height:40px; background:linear-gradient(145deg,var(--pg-gold-hi),var(--pg-gold-lo)); border-radius:3px 3px 3px 100%; transition:transform 480ms var(--pg-ease),box-shadow 480ms var(--pg-ease); } .pg-brand__name{display:block;font-size:17px;font-weight:800;color:var(--pg-head);letter-spacing:-.01em;} .pg-brand__legal{display:block;font-size:12px;font-weight:500;color:var(--pg-muted);letter-spacing:.02em;} .pg-foot__claim{margin:0;max-width:48ch;color:var(--pg-fg);} .pg-foot__claim strong{color:var(--pg-head);font-weight:700;} .pg-foot__cta{ position:relative;overflow:hidden; background:var(--pg-surface);border:1px solid var(--pg-line);border-radius:14px; padding:clamp(22px,2.4vw,28px); transition:border-color var(--pg-base) var(--pg-ease),box-shadow var(--pg-base) var(--pg-ease); } .pg-foot__cta::before{ content:"";position:absolute;left:0;top:0;height:2px;width:100%; background:linear-gradient(90deg,transparent,var(--pg-gold),transparent); transform:scaleX(0);transform-origin:left; transition:transform var(--pg-slow) var(--pg-ease); } .pg-foot__cta h2{ margin:0 0 8px;font-size:19px;font-weight:800;color:var(--pg-head); line-height:1.25;letter-spacing:-.01em;text-transform:none; } .pg-foot__cta p{margin:0 0 18px;font-size:14px;color:var(--pg-muted);} .pg-foot__btns{display:flex;flex-wrap:wrap;gap:12px;} .pg-foot__btns .pg-btn{padding:13px 24px;min-height:48px;font-size:14px;} .pg-foot__rule{border:0;border-top:1px solid var(--pg-line);margin:clamp(36px,4vw,52px) 0;} /* Columnas */ .pg-foot__cols{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,3vw,40px); } .pg-col h2{ position:relative;margin:0 0 18px;padding-bottom:12px; font-size:13px;font-weight:800;color:var(--pg-head); letter-spacing:.12em;text-transform:uppercase; } .pg-col h2::after{ content:"";position:absolute;left:0;bottom:0;width:22px;height:2px; background:var(--pg-gold);border-radius:2px; } .pg-col ul{margin:0;padding:0;list-style:none;} .pg-col li{margin:0 0 11px;} .pg-col a{ position:relative;display:inline-block; color:var(--pg-fg);text-decoration:none;font-size:14.5px; transition:color var(--pg-base) var(--pg-ease),transform var(--pg-base) var(--pg-ease); } /* Subrayado direccional: entra por la izquierda, sale por la derecha */ .pg-col a::after,.pg-bar a::after,.pg-credit a::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px; background:currentColor;border-radius:2px; transform:scaleX(0);transform-origin:right center; transition:transform 340ms var(--pg-ease); } /* Contacto */ .pg-contact{margin:0;font-style:normal;} .pg-contact div{display:flex;gap:10px;margin:0 0 12px;font-size:14.5px;} .pg-contact div > span{min-width:0;overflow-wrap:anywhere;} .pg-contact svg{ flex:none;width:17px;height:17px;margin-top:3px; fill:var(--pg-accent);stroke:none; transition:transform var(--pg-base) var(--pg-ease); } .pg-contact a{ color:var(--pg-fg);text-decoration:none;overflow-wrap:anywhere; transition:color var(--pg-base) var(--pg-ease); } .pg-contact span{color:var(--pg-muted);} /* Barra inferior */ .pg-bar{ display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px; margin-top:clamp(32px,4vw,48px);padding-top:24px; border-top:1px solid var(--pg-line); font-size:13.5px;color:var(--pg-muted); } .pg-bar p{margin:0;} .pg-bar nav{display:flex;flex-wrap:wrap;gap:12px 22px;margin-left:auto;} .pg-bar a{position:relative;color:var(--pg-muted);text-decoration:none;transition:color var(--pg-base) var(--pg-ease);} /* En escritorio la barra pasa a retícula de tres: copyright a la izquierda, crédito al CENTRO y legales a la derecha. Con flex no bastaba: el crédito quedaba pegado al copyright, y centrarlo con `margin:auto` no funciona cuando el