/* Theme Name: ROOA TALENT Template: twentytwentyfour Description: Un tema a medida construido para ROOA Talent Management: hero con crossfade de artistas, grids Swiss animados, modelos 3D en scroll, física de partículas y transiciones con blend de color en cada rincón. Diseñado para que la web se sienta tan cuidada como el talento que representa. Author: Dariel Curbelo Version: 1.2.6 Text Domain: twentytwentyfour-child */ /* Keep these in sync with theme.json's palette. This override exists so the base/contrast tokens resolve consistently even where theme.json's generated CSS load order would otherwise let something else win. Palette: black #191919, white at 98% (#fafafa), pure white reserved in base-2. */ :root { --wp--preset--color--base: #fafafa; --wp--preset--color--base-2: #ffffff; --wp--preset--color--contrast: #191919; } /* Any block explicitly set to a large font size gets Display/Light, matching headings, even if it isn't an h1-h6. El interletraje SALIÓ de esta regla: ya no es un valor único para los tres tamaños, sino uno por tamaño, justo debajo. */ .has-large-font-size, .has-x-large-font-size, .has-xx-large-font-size { font-family: var( --wp--preset--font-family--heading ); font-weight: 300; } /* EL INTERLETRAJE YA NO ES UNO SOLO PARA TODO, y el motivo es óptico, no de gusto: a tamaño pequeño las letras necesitan aire para distinguirse, y a tamaño grande el espacio que las separa se ve multiplicado y el titular se deshace. Un solo valor no puede servir a 12px y a 158px. Medido antes de tocar nada, y salía justo al revés de lo que debe ser: ≤12px -1.17% (el texto MÁS apretado del sitio) 14px -1% 40-63px -0.35% ≥64px -0.07% (el texto más grande, prácticamente sin ajustar) La causa es la congelación del `em`: el body declara el interletraje una vez en `em`, eso computa a un valor FIJO en píxeles contra sus 14px, y todo descendiente lo hereda ya en píxeles. Los mismos -0.14px son un -1.17% a 12px y un -0.07% a 202px. Por eso la raíz pasa a `0` en theme.json: un cero no se congela mal, y cada tamaño declara el suyo aquí en `em`, que así se resuelve contra su propio cuerpo. Cambiar esto exige tocar los TRES sitios a la vez, o el sitio se parte en dos interletrajes distintos: estas reglas, styles.typography.letterSpacing y styles.elements.heading.typography.letterSpacing en theme.json. */ .has-small-font-size { letter-spacing: 0.015em; } .has-large-font-size { letter-spacing: -0.015em; } .has-x-large-font-size { letter-spacing: -0.02em; } .has-xx-large-font-size { letter-spacing: -0.025em; } /* * Ultra-Minimalist High-End Difference Cursor */ @media (pointer: fine) { body, a, button, input, select, textarea, [role="button"] { cursor: none !important; } .custom-cursor { position: fixed; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%; background-color: #ffffff; mix-blend-mode: difference; pointer-events: none; z-index: 999999; opacity: 0; will-change: transform, width, height, opacity; /* The other half of the cursor's "physics" (the first is EASE in custom-cursor.js): how long it takes to grow over something you can click. 0.25s with that overshooting curve read as a separate little animation happening after the fact; 0.18s ease is the same figure the Tickets cursor uses and lands while the pointer is still arriving. */ transition: opacity 0.3s ease, width 0.18s ease, height 0.18s ease; &.is-visible { opacity: 1; } &.is-hovered { width: 42px; height: 42px; } /* THE CURSOR CARRYING A PHRASE (data-cursor-text; see custom-cursor.js). The dot becomes a pill. Size goes to auto, so it is NOT animated — width/height cannot transition from a fixed px to auto, and faking it with a max-width would make the pill unwrap at a speed unrelated to how fast the pointer arrived. It snaps, which reads as a label appearing rather than as a broken animation. The ink is declared dark on purpose. The whole cursor blends with difference, so the white pill inverts whatever is behind it and the near-black text inverts to roughly the backdrop — landing on the opposite side of the pill whatever the section underneath is doing. Same reasoning as the nav's current-page box. */ .custom-cursor__text { display: none; font-family: var( --wp--preset--font-family--heading ); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: #191919; } &.is-text { width: auto; height: auto; padding: 0.65em 1em; border-radius: 999px; .custom-cursor__text { display: block; } } } } /* Interaction feedback, site-wide. The theme puts a 2px outline on ANY :focus, so clicking a link or block boxed it in a full border. Limit that heavy ring to KEYBOARD focus (:focus-visible) so a mouse click no longer draws it, while keyboard users keep the a11y ring. Real selector (not :where) so it beats theme.json's zero-specificity rule. */ /* The nav bar is moved out of .wp-site-blocks at runtime (it is position:fixed, and inside an iOS scroll container that judders — see assets/js/scroll-root.js), so it has to be named here explicitly or its links would get the heavy ring back on a mouse click. */ .wp-site-blocks *:focus:not( :focus-visible ), header.wp-block-template-part *:focus:not( :focus-visible ), .contact-badge:focus:not( :focus-visible ) { outline: none; } /* And in place of a border, links get a simple opacity fade on hover. Buttons keep their own colour hover; the talent card (image-reveal hover), the nav section links (bottom-border hover) and the blended logo are excluded so their bespoke interactions are not double-applied. */ a:where( :not( .wp-element-button ):not( .wp-block-rooatalent-talent-card ):not( .sn-link ):not( .custom-logo-link ) ) { transition: opacity 0.2s ease; } a:where( :not( .wp-element-button ):not( .wp-block-rooatalent-talent-card ):not( .sn-link ):not( .custom-logo-link ) ):hover { opacity: 0.65; } /* Parent theme hardcodes rounded corners (.33rem) on these form fields via theme.json block CSS; flatten to match the site-wide border-radius:0 rule. */ .wp-block-search__input, .wp-block-post-comments-form textarea, .wp-block-post-comments-form input, .wp-block-loginout input { border-radius: 0; } /* * Talent Grid — the `rooatalent/talent-grid` block (wrapper class "talent-grid") * and, as a fallback, Talent Cards dropped into a native "Grid" layout Group * (`.is-layout-grid`). Responsive column count via CSS vars set inline by the * block: mobile (--talent-grid-cols-mobile, default 1), tablet from 600px * (--talent-grid-cols-tablet, default 2), desktop from 1000px * (--talent-grid-cols, default 3). Gap and line color are also vars. * * BORDER COLLAPSE — the correct technique for CSS Grid. The earlier "-1px * negative margin" trick was REMOVED: measured with Playwright, it collapses * vertical seams but NOT horizontal ones in a grid, because grid column tracks * are fixed-width, so shifting every card left by 1px moves them all equally * and the gap between columns never closes → doubled lateral lines. Instead: * each card draws ONLY its right + bottom border, and the grid container draws * the outer top + left. Every shared seam is then exactly one border, never * two stacked — works for any column count, any number of rows, wrapping and * all. This replaces each card's own 4-side border while it's inside a grid * (uniform grid lines is what a grid wants); standalone cards keep their * Border panel. */ .talent-grid { --talent-grid-cols: 3; --talent-grid-cols-wide: 4; --talent-grid-cols-tablet: 2; --talent-grid-cols-mobile: 1; --talent-grid-gap: 0px; --talent-grid-line: #000000; --talent-grid-line-width: 1px; display: grid; grid-template-columns: repeat( var( --talent-grid-cols-mobile, 1 ), 1fr ); gap: var( --talent-grid-gap, 0px ); } @media ( min-width: 600px ) { .talent-grid { grid-template-columns: repeat( var( --talent-grid-cols-tablet, 2 ), 1fr ); } } @media ( min-width: 1000px ) { .talent-grid { grid-template-columns: repeat( var( --talent-grid-cols, 3 ), 1fr ); } } @media ( min-width: 1600px ) { .talent-grid { grid-template-columns: repeat( var( --talent-grid-cols-wide, 4 ), 1fr ); } } /* * Seamless mode (gap = 0): right/bottom-only borders on the cards + top/left * on the container = single 1px lines, no doubling. Applied to the block when * it has no gap (class .is-seamless) and, via :has(), to any native Grid-layout * Group that contains Talent Cards. * * The card selectors include `.div-principal` on purpose: the card's own * 4-side border comes from `.wp-block-rooatalent-talent-card.div-principal` * (specificity 0,2,0) in the block's stylesheet. A bare * `.grid > .wp-block-rooatalent-talent-card` (also 0,2,0) only won by source * order — which differs between front end and editor, so in the editor the * card's full border won and the seams doubled. Adding `.div-principal` makes * these 0,3,0 so they win everywhere regardless of stylesheet load order. */ .talent-grid.is-seamless, .is-layout-grid:has( > .wp-block-rooatalent-talent-card ) { border-top: var( --talent-grid-line-width, 1px ) solid var( --talent-grid-line, #000000 ); border-left: var( --talent-grid-line-width, 1px ) solid var( --talent-grid-line, #000000 ); } .talent-grid.is-seamless > .wp-block-rooatalent-talent-card.div-principal, .is-layout-grid > .wp-block-rooatalent-talent-card.div-principal { border: 0; border-right: var( --talent-grid-line-width, 1px ) solid var( --talent-grid-line, #000000 ); border-bottom: var( --talent-grid-line-width, 1px ) solid var( --talent-grid-line, #000000 ); margin: 0; } /* * Fixed overlay nav bar: floats on top of the page content, which scrolls * UNDER it (the hero image starts at the very top of the viewport, behind * the bar — requested behaviour). position:fixed (not sticky) so it's taken * out of the flow and content begins at top:0 beneath it; no height * compensation on the content, on purpose. * * The bar is transparent and auto-inverts against whatever scrolls under it * via mix-blend-mode:difference. Four things have to hold at once, and every * one of them was broken here before: * * 1. THE BLEND GOES ON THE FIXED ELEMENT ITSELF, NEVER ON ITS CHILDREN. * position:fixed makes the header a stacking context, so a blend on a * descendant composites only against the header's own transparent backdrop * and does nothing at all. An earlier revision of this comment blamed * position:fixed for "breaking" blending — that was wrong, and it's why the * frosted-glass fallback existed. Measured in headless Chromium over a white * section: blend on the header → glyph luminance 0 (black, correct); blend * on a child → 255 (still white, invisible). Nothing about fixed/sticky * prevents the header from blending with the page. * 2. NOTHING FROM THE HEADER INWARD MAY ISOLATE. backdrop-filter (what the old * frosted glass used), opacity < 1, filter, transform and isolation all cage * the effect. Note the header's own group also carried a solid background * colour saved on the template part in the database — an opaque backdrop * leaves nothing to blend with, and it is not visible in parts/header.html. * 3. THE INK MUST BE PURE WHITE. difference subtracts: #fff inverts cleanly * against any backdrop, #000 subtracts to the backdrop itself and vanishes, * greys turn to mud. * 4. A SOLID BASE CANVAS, AND IT MUST BE PAINTED INSIDE THE BODY. theme.json * sets body's background-color to --wp--preset--color--base, but CSS hands * that colour to the canvas whenever the root element has none — and the * canvas is painted outside the body's box. That was harmless until * assets/css/scroll-root.css made the body position:fixed, i.e. a stacking * context: from then on the nav could only blend with what paints inside * the body, and over any transparent section (Services, Events) it had * nothing at all — white ink on a white page, measured 250-255 over 250. * The fix is a background on the root, which stops the propagation; it * lives next to its cause in scroll-root.css, with the full measurement. */ :root { --rooatalent-nav-color: #fff; } header.wp-block-template-part { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; mix-blend-mode: difference; /* iOS: with viewport-fit=cover the page draws under the notch/status bar, so inset the nav's content by the safe areas — otherwise the logo/links sit under the notch and the system UI overlaps them. env() resolves to 0 on devices without insets, so this is a no-op elsewhere. */ padding-top: env( safe-area-inset-top ); padding-left: env( safe-area-inset-left ); /* Y la barra de scroll, que en Windows SÍ ocupa sitio. Esta barra es `fixed` sobre la ventana entera, pero quien hace scroll es `.wp-site-blocks`: en Windows su barra clásica se pinta sobre los últimos ~15px de la ventana, justo encima de «Home | Menu». En macOS la barra flota y `--rooa-scrollbar` vale 0px, así que ahí no cambia nada. El ancho lo mide y publica assets/js/scroll-root.js — no se supone, porque depende del sistema, del navegador y de los ajustes de cada persona. */ padding-right: max( env( safe-area-inset-right ), var( --rooa-scrollbar, 0px ) ); /* Base transition (not just on .rooa-nav-hidden) so it eases BOTH the fade out AND the fade back in, whichever section's toggle drives it — see the pinned-section block's "Interacción con la nav bar" switch. */ transition: opacity 0.5s ease; } /* Added/removed by pinned-section/src/view.js while a section with its own "Desvanecer la nav bar" toggle enabled fully occupies the viewport (pinned, not yet covered by what comes after it). pointer-events:none so the invisible bar can't be clicked/tabbed to while hidden. */ /* EL TOPE DEL LOGO, EN UNA MEDIDA ABSOLUTA. Reportado desde Windows: el logo salía cortado. El núcleo del problema es que el tope que trae WordPress es `max-width: 100%`, o sea «el 100% del padre», y el padre es justamente lo que se encoge cuando el espacio se aprieta —la barra de scroll clásica se lleva ~15px, y el escalado del sistema al 125% ensancha el resto de rótulos—. El tope encogía con él y arrastraba a la imagen. Un valor absoluto no depende de nadie. Por eso no se reproducía en un Mac, donde la barra flota y ocupa 0px. 200px es HOLGURA, NO TAMAÑO: la imagen mide 103 y `max-width` solo pone un techo, nunca estira. Medido tras el cambio en 1280/1440/1920/2560 y a 1x y 2x: 103px en los seis casos, 0px de desbordamiento. Y aquí NO se declara `width`. Sin él, la imagen usa el atributo `width="103"` del HTML —el tamaño elegido en el editor—; con `width: auto` usaría su tamaño intrínseco, 159px, y el logo se vería MÁS GRANDE de lo configurado en cuanto el tope dejase de frenarlo. El tamaño lo manda el CMS. */ header.wp-block-template-part .wp-block-site-logo img { max-width: 200px; } /* Interletraje de la barra de navegación. Se nombra cada rótulo en vez de ponerlo en el `header`: en `em`, un valor heredado se congela en píxeles contra el cuerpo del padre y deja de valer para los hijos de otro tamaño — el mismo mecanismo que se explica arriba, en el bloque del interletraje por tamaño. Declarado en cada uno, cada cual lo resuelve contra su propio cuerpo. */ header.wp-block-template-part .rooatalent-nav__title, header.wp-block-template-part .sn-active-label, header.wp-block-template-part .sn-toggle__label, header.wp-block-template-part .sn-link__text { letter-spacing: 0.025em; } header.wp-block-template-part.rooa-nav-hidden { opacity: 0; pointer-events: none; } /* Auto-hide while scrolling DOWN, brought back on scrolling up or near the top (assets/js/nav-autohide.js). Why this exists: the nav is fixed, transparent and blends with mix-blend-mode:difference, so scrolling content passes UNDER it and the logo/links visually collide with whatever text is behind them. Measured on a 414x800 phone: at scrollY 200 the bar overlapped "Bella Backe" and "Antares", at 400 "Augusto Yepes" and "Eran" — illegible on both sides. Giving the bar a solid background would fix the collision but throw away the blend the design is built on, so instead it steps out of the way while you're reading and returns the moment you scroll back up. A SEPARATE class from .rooa-nav-hidden on purpose: that one is driven by pinned-section's own per-section toggle, and sharing a class would mean each mechanism clobbering the other's state. With two, the bar is hidden when EITHER asks for it. */ header.wp-block-template-part.rooa-nav-autohidden { opacity: 0; pointer-events: none; } /* Respect the WordPress admin bar: WP adds body.admin-bar (and the fixed 32px bar) only when it's shown (logged-in preview). Offset the nav by the admin bar's height so it doesn't hide behind it; when it's absent the nav sits at top:0. 32px normally, 46px on narrow screens — the two heights the admin bar itself uses. */ .admin-bar header.wp-block-template-part { top: 32px; } @media screen and ( max-width: 782px ) { .admin-bar header.wp-block-template-part { top: 46px; } } /* Three columns: logo / title / section links, with the TITLE TRULY CENTRED on the viewport rather than centred in the leftover space. Giving the first and last children `flex:1 1 0` makes both sides claim exactly the same width whatever they contain, so the middle lands dead centre and stays put as the logo or the link list changes. justify-content:space-between alone would let it drift, since the two sides are never the same width. `min-width:0` lets them shrink instead of overflowing on narrow screens. */ .rooatalent-nav__inner > :first-child, .rooatalent-nav__inner > :last-child { flex: 1 1 0; min-width: 0; } .rooatalent-nav__inner > :last-child { display: flex; justify-content: flex-end; } .rooatalent-nav__title { margin: 0; white-space: nowrap; } /* The logo artwork is near-white but not pure white — measured mean luminance 245 across its opaque pixels — and difference needs exactly #fff to invert cleanly (see 3 above); anything short of it comes out muddy and off-hue. brightness(0) flattens every opaque pixel to black and invert(1) flips it to exactly #fff, leaving the alpha channel alone, so the logo inverts in step with the text. The filter isolates the , not the header, so the blend is unaffected. */ .rooatalent-nav .custom-logo { filter: brightness( 0 ) invert( 1 ); } .rooatalent-nav, .rooatalent-nav * { color: var( --rooatalent-nav-color ); } /* EDITOR ONLY. The canvas has no fixed
— the template part is rendered as a plain block — so the blend above never applies there, while the pure-white ink still does: the whole nav would sit invisible on the near-white canvas and be impossible to edit. Both rules are undone inside the editor canvas (.editor-styles-wrapper), which exists only there. Verified in the Site Editor: text was rgb(255,255,255) on a rgb(250,250,250) background before this. The front end never matches these selectors, so the real bar is unaffected. */ .editor-styles-wrapper .rooatalent-nav, .editor-styles-wrapper .rooatalent-nav * { color: var( --wp--preset--color--contrast ); } /* The logo is white artwork, so dropping the front-end filter would leave it invisible on the light canvas just as surely. Flatten it to black instead. */ .editor-styles-wrapper .rooatalent-nav .custom-logo { filter: brightness( 0 ); } /* Shared per-breakpoint visibility utility classes. ONE definition, reused by any block that wants a "hide on desktop/tablet/mobile" toggle (the navbar's "Talent Management" text, the Talent Hero marquee, and whatever else needs it later) instead of each block reinventing its own media queries. Same 999px/599px cutoffs used everywhere else in this theme (talent-hero, hscroll, section-nav). These apply inside the editor canvas too, on purpose: the canvas is its own iframe with its own width, so this doubles as a live preview of the hidden state at each breakpoint (use the editor's List View to select a block that's currently hidden by its own toggle). */ @media ( min-width: 1000px ) { .rooa-hide-desktop { display: none !important; } } @media ( max-width: 999px ) and ( min-width: 600px ) { .rooa-hide-tablet { display: none !important; } } @media ( max-width: 599px ) { .rooa-hide-mobile { display: none !important; } } /* ------------------------------------------------------------------------- * Per-page default padding. * * templates/page.html applies .rooa-page-main to
. The side/bottom * padding is a variable (--rooa-page-pad, default 1rem) so a single page can * override or remove it from the editor (see inc/page-padding.php, which emits * a scoped --rooa-page-pad in wp_head for that page). The top always keeps the * fixed-nav clearance (37px) PLUS the same variable, so removing the padding * never tucks content under the nav. * ---------------------------------------------------------------------- */ /* iOS: keep the footer's legal links clear of the home indicator. */ footer.wp-block-template-part { padding-bottom: env( safe-area-inset-bottom ); } .rooa-page-main { /* nav height (37px) + the iOS notch inset + the page padding, so content never tucks under the fixed nav or the system status bar. */ padding-top: calc( 37px + env( safe-area-inset-top ) + var( --rooa-page-pad, 1rem ) ); padding-right: calc( env( safe-area-inset-right ) + var( --rooa-page-pad, 1rem ) ); padding-bottom: calc( env( safe-area-inset-bottom ) + var( --rooa-page-pad, 1rem ) ); padding-left: calc( env( safe-area-inset-left ) + var( --rooa-page-pad, 1rem ) ); } /* ------------------------------------------------------------------------- * Footer: always truly at the bottom, never a gap above it. * * ONE unconditional, sitewide rule on WordPress's own native root wrapper * (.wp-site-blocks — output by every block theme, not something this child * theme invents) — no per-template-type exceptions. header is position:fixed * so it's excluded from flex sizing entirely; only
and the footer take * part as flex items: * * 1) .wp-site-blocks becomes a full-viewport-height flex column. On SHORT * content the footer lands at the true bottom of the screen instead of * floating high up with blank body below it. * 2) .rooa-page-main (Pages, Talent entries) is the one growing item, so it * absorbs the extra height — on TALL content flex-basis:auto just uses the * content's own height, nothing is forced or clipped. The Home templates * (front-page.html/home.html) don't carry this class, so their own * already-tall sections are completely unaffected — no exception needed, * growth only ever applies to an element that opts in via the class. * 3) WordPress core puts a 1rem margin-block-start on every direct child of * .wp-site-blocks (`:where(.wp-site-blocks) > *`, see the generated global * styles) — that lands on the footer too, a fixed 1rem "dead space" right * above it on EVERY page regardless of content length. Kill it on the * footer specifically (0 specificity on core's :where() means a plain * selector always wins, no !important needed). * ---------------------------------------------------------------------- */ .wp-site-blocks { display: flex; flex-direction: column; /* svh, NOT dvh. This is the root wrapper of the whole page, and `dvh` re-evaluates as the mobile browser chrome slides in and out while scrolling — so the page's own minimum height changed mid-scroll and everything shifted under the finger. `svh` is the height with the chrome showing: a fixed number that never re-evaluates, and still tall enough to push the footer to the bottom on short pages, which is all this is for. (On the front end this box is also the page's scroll container, so the chrome no longer moves at all — but svh stays the right unit: it is the height this box actually gets. See assets/css/scroll-root.css.) */ min-height: 100svh; } /* The rules that turn .wp-site-blocks into the page's scroll container live in assets/css/scroll-root.css, NOT here. This stylesheet is also handed to the block editor (add_editor_style below in functions.php), and pinning html/body to the viewport with overflow:hidden inside the editor's canvas iframe would leave the editor unable to scroll the post being edited. Those rules describe the front-end document shell, which has no counterpart in the canvas, so they ship as their own front-end-only stylesheet. */ .rooa-page-main { flex: 1 0 auto; } .wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; } /* Default content block seeded into every new Talent entry (see inc/talent-cpt.php's default_content filter) — plain, deletable post content, not a locked template block. min-height keeps the entry from looking broken/empty before the artist adds real content; being a min (not a fixed height) it grows normally once real content is added. */ .rooa-talent-default-block { /* svh for the same reason as .wp-site-blocks above: a stable minimum that doesn't re-evaluate mid-scroll on mobile. */ min-height: 100svh; } /* ------------------------------------------------------------------------- * Legal pages (Privacy / Terms / Cookies) — body.rooa-legal, added in * functions.php. A sober, readable legal layout: a narrow left-aligned column * (~680px) and a restrained type hierarchy (headings only modestly larger than * body, comfortable line-height), in the spirit of a standard privacy page. * ---------------------------------------------------------------------- */ .rooa-legal .rooa-page-main :where( h1, h2, h3, p, ul, ol ) { max-width: 680px; margin-inline: 0 auto; /* left-aligned column, not centered */ } .rooa-legal .rooa-page-main :where( h1 ) { font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.75rem; } .rooa-legal .rooa-page-main :where( h2 ) { font-size: 1.15rem; line-height: 1.3; margin-top: 2.25rem; margin-bottom: 0.35rem; } .rooa-legal .rooa-page-main :where( p, li ) { font-size: 0.95rem; line-height: 1.6; color: var( --wp--preset--color--contrast, #191919 ); } /* * EL CORREO DE CONTACTO NO PUEDE EMPUJAR LA PÁGINA FUERA DE CUADRO. * * `ivan@rooatalent.com` es una sola palabra sin espacios ni guiones, así que el * navegador no tiene dónde partirla: su ancho mínimo es el ancho completo del * texto. A cuerpo grande y en una pantalla de 320px eso no cabe, y como el * bloque no puede encoger por debajo de su contenido, se salía por la derecha * arrastrando a toda la sección. * * Medido en producción a 320x568: el contenedor de scroll daba 334 de ancho * contra 320 de ventana — 14px de desbordamiento horizontal en TODA la página, * no solo aquí. A 360 y 390 no pasaba, por eso no había salido antes. * * `anywhere` y no `break-word`: los dos parten la palabra al pintar, pero solo * `anywhere` reduce también el ancho MÍNIMO que el bloque declara, que es lo * que permite al contenedor encoger. Con `break-word` el desbordamiento seguía. */ #contacto p, #contacto a { overflow-wrap: anywhere; }