/* Undernet canonical reusable components
   Components in this file are semantic and reusable across pages.
   Page-specific styles must not redefine their palette or interaction states.
*/

/* Section surfaces have one owner. Non-opted pages retain their existing
   canvas/section-variable behavior. The two priority declarations are moved
   unchanged from P0.2: compatibility with active V2 palettes, not new overrides.
   Page opt-in owns band backgrounds and suppresses boundaries within the group. */
section,.section,.section:nth-of-type(odd),.section:nth-of-type(even){
  background:var(--udc-section-bg,var(--udc-canvas))!important;
  border-color:var(--udc-section-line,var(--udc-line))!important;
}

/* A page opts in on main. Interior sections alternate canvas/surface.
   Only the hero is fixed on canvas; the final CTA follows the same alternation.
   alt-bg shares the same value for legacy section-alt consumers. */
main#contenido.udc-bands > section {
    --udc-section-bg: var(--udc-canvas);
    --udc-section-alt-bg: var(--udc-section-bg);
    border-block: 0;
}
main#contenido.udc-bands > section:nth-of-type(even) {
    --udc-section-bg: var(--udc-surface);
}
main#contenido.udc-bands > section.page-hero {
    --udc-section-bg: var(--udc-canvas);
}

/* Pill groups provide wrapping and spacing only. */
.udc-pill-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* Shared pill foundation. */
.udc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--udc-line);
    border-radius: 999px;
    font-family: var(--udc-font-family);
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

/* Informational pill: taxonomy, attribute or non-interactive descriptor. */
.udc-pill--info {
    padding: 8px 12px;
    background: rgba(239,125,0,.08);
    border-color: rgba(239,125,0,.50);
    color: var(--udc-orange-hover);
    font-size: var(--udc-font-eyebrow);
}

/* Interactive pill/tab foundation. Use this alongside a page-specific class
   when the control changes local content rather than navigating. The semantic
   behavior (role, aria-selected, JS) remains owned by the page component. */
.udc-pill--control {
    padding: 11px 16px;
    background: var(--udc-card);
    border-color: var(--udc-line);
    color: var(--udc-text);
    font-size: var(--udc-font-small);
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.udc-pill--control:hover,
.udc-pill--control:focus-visible {
    background-color: var(--udc-elevated);
    border-color: var(--udc-orange-hover);
    color: var(--udc-text);
    transform: translateY(-1px);
}

.udc-pill--control:focus-visible {
    outline: var(--udc-focus-width) solid var(--udc-focus-color);
    outline-offset: var(--udc-focus-offset);
}

.udc-pill--control.is-active,
.udc-pill--control[aria-selected="true"] {
    background: var(--udc-orange);
    border-color: var(--udc-orange);
    color: var(--udc-on-accent);
}

/* Navigation pill: related topic/category link. It is deliberately larger
   than an informational pill and exposes clear interaction states. */
.udc-pill--link {
    padding: 13px 18px;
    background: var(--udc-card);
    border-color: var(--udc-orange);
    color: var(--udc-text);
    font-size: var(--udc-font-small);
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.udc-pill--link:visited {
    color: var(--udc-text);
}

.udc-pill--link:hover,
.udc-pill--link:focus-visible {
    background-color: var(--udc-elevated);
    border-color: var(--udc-orange-hover);
    color: var(--udc-text);
    text-decoration: none;
    transform: translateY(-2px);
}

.udc-pill--link:focus-visible {
    outline: var(--udc-focus-width) solid var(--udc-focus-color);
    outline-offset: var(--udc-focus-offset);
}

/* Inline text link: contextual navigation inside page content. Buttons,
   navigation links and pill links intentionally keep their own semantics. */
.udc-text-link,
.udc-text-link:visited {
    color: var(--udc-orange);
    font-weight: 700;
    text-decoration: none;
    text-underline-offset: .18em;
}

.udc-text-link:hover,
.udc-text-link:focus-visible {
    color: var(--udc-orange-hover);
    text-decoration: underline;
}

.udc-text-link:focus-visible {
    outline: var(--udc-focus-width) solid var(--udc-focus-color);
    outline-offset: var(--udc-focus-offset);
}

/* Feature-card composition for parallel objectives or audiences.
   The udc-card--info foundation owns the surface and has no container hover. */
.udc-numbered-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.udc-numbered-card-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.udc-numbered-card {
    padding: 30px;
}

.udc-numbered-card-icon {
    display: block;
    width: 46px;
    height: 34px;
    object-fit: contain;
    object-position: left center;
}

.udc-numbered-card > span {
    color: var(--udc-orange-hover);
    font-weight: 900;
}

.udc-numbered-card h3 {
    margin: 18px 0 8px;
    color: var(--udc-text);
    font-size: var(--udc-font-h3);
}

.udc-numbered-card p {
    margin-bottom: 0;
    color: var(--udc-muted);
}

/* Conversion CTA: reusable orange callout surface. The surrounding section
   controls page-specific vertical rhythm; the component owns its internal
   layout, palette and responsive behavior. */
.udc-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 44px;
    background: var(--udc-orange);
    border: 1px solid var(--udc-orange);
    border-radius: var(--udc-radius-md);
    color: var(--udc-on-accent);
    box-shadow: 0 16px 36px rgba(0,0,0,.22);
}

.udc-cta > div {
    min-width: 0;
}

.udc-cta .eyebrow {
    color: var(--udc-on-accent);
}

.udc-cta h2,
.udc-cta p {
    color: var(--udc-on-accent);
}

.udc-cta h2 {
    max-width: 760px;
}

.udc-cta .button {
    flex: 0 0 auto;
}

/* Process flow: ordered multi-step sequence used for service methodologies
   and lifecycle visualizations. */
.udc-process-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--udc-line);
    background: var(--udc-card);
}

.udc-process-flow--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.udc-process-flow::before {
    content: "";
    position: absolute;
    /* S2 (Gabe 10/10): centred on the circles now that each step has vertical padding. */
    top: calc(var(--udc-space-5) + 31px);
    right: 10%;
    left: 10%;
    height: 2px;
    background: var(--udc-orange);
}

.udc-process-flow > li {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 10px;
    padding: var(--udc-space-5) 14px;
    border-right: 1px solid var(--udc-line);
    text-align: center;
}

.udc-process-flow > li:last-child {
    border-right: 0;
}

.udc-process-flow > li > span {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 6px solid var(--udc-card);
    border-radius: 50%;
    background: var(--udc-orange);
    color: var(--udc-on-accent);
    box-shadow: 0 8px 24px rgba(0,0,0,.24);
    font-size: var(--udc-font-eyebrow);
    font-weight: 900;
}

.udc-process-flow > li > strong {
    color: var(--udc-text);
    font-size: 1.08rem;
}

.udc-process-flow > li > small {
    max-width: 180px;
    color: var(--udc-muted);
    line-height: 1.45;
}

@media (max-width: 1020px) {
    .udc-cta {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .udc-numbered-card-grid,
    .udc-numbered-card-grid--two {
        grid-template-columns: 1fr;
    }

    .udc-process-flow,
    .udc-process-flow--four {
        grid-template-columns: 1fr;
        gap: 24px;
        border: 0;
        background: transparent;
    }

    .udc-process-flow::before {
        top: 32px;
        right: auto;
        bottom: 32px;
        left: 31px;
        width: 2px;
        height: auto;
    }

    .udc-process-flow > li {
        grid-template-columns: 64px 1fr;
        justify-items: start;
        column-gap: 18px;
        padding: 0;
        border-right: 0;
        background: transparent;
        text-align: left;
    }

    .udc-process-flow > li > span {
        grid-row: 1 / span 2;
        border-color: var(--udc-surface);
    }

    .udc-process-flow > li > small {
        max-width: none;
    }
}

@media (max-width: 620px) {
    .udc-cta {
        align-items: flex-start;
        flex-direction: column;
        padding: 32px 26px;
    }

    .udc-cta .button {
        width: 100%;
    }
}


/* Page-composed button variants.
   Pages may provide the custom properties below when a validated visual needs
   a semantic accent/outline treatment without redefining global .button classes. */
.udc-button--page-accent {
    background: var(--udc-button-accent, var(--udc-orange)) !important;
    border: 1px solid var(--udc-button-accent, var(--udc-orange)) !important;
    color: var(--udc-button-accent-text, var(--udc-on-accent)) !important;
}
.udc-button--page-accent:hover,
.udc-button--page-accent:focus-visible {
    background: var(--udc-button-accent-hover, var(--udc-orange-hover)) !important;
    border-color: var(--udc-button-accent-hover, var(--udc-orange-hover)) !important;
    color: var(--udc-button-accent-text, var(--udc-on-accent)) !important;
}
.udc-button--page-outline {
    background: var(--udc-button-outline-bg, transparent) !important;
    border: 1px solid var(--udc-button-outline-border, var(--udc-orange)) !important;
    color: var(--udc-button-outline-text, var(--udc-text)) !important;
}
.udc-button--page-outline:hover,
.udc-button--page-outline:focus-visible {
    background: var(--udc-button-outline-hover-bg, var(--udc-elevated)) !important;
    border-color: var(--udc-button-outline-hover-border, var(--udc-orange-hover)) !important;
    color: var(--udc-button-outline-hover-text, var(--udc-text)) !important;
}

/* #246 shared component: the foundation is shared, geometry stays with the
   page's demonstrated composition. Informational containers do not hover.
   Specialized foundation stays below authored states such as .sp-relation-current. */
.udc-type-scale .udc-card,
:where(.sp-body .udc-card) {
    min-width: 0;
    background: var(--udc-card);
    border: 1px solid var(--udc-line);
    border-radius: var(--udc-radius-sm);
}
.udc-type-scale .udc-card {
    color: var(--udc-text);
}
.udc-type-scale .udc-card--ordered {
    border-top: 3px solid var(--udc-orange);
}
/* P22 (Gabe 09/10 14:06): numbered cards keep their 5 px orange top accent on the shared surface. */
.udc-type-scale .udc-numbered-card {
    border-top: 5px solid var(--udc-orange);
    border-radius: 0 0 var(--udc-radius-sm) var(--udc-radius-sm);
}
.udc-type-scale .udc-card--info,
.sp-body .udc-card--info {
    transition: none;
}
.udc-type-scale .udc-card--link {
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}
@media (hover: hover) {
    .udc-type-scale .udc-card--link:hover {
        background: var(--udc-elevated);
        border-color: var(--udc-orange-hover);
    }
}
.udc-type-scale .udc-card--link:focus-visible {
    outline: var(--udc-focus-width) solid var(--udc-focus-color);
    outline-offset: var(--udc-focus-offset);
    border-color: var(--udc-orange-hover);
}
.udc-type-scale .udc-card-label {
    display: block;
    margin-bottom: var(--udc-space-1);
    color: var(--udc-orange-hover);
    font-size: var(--udc-font-small);
    font-weight: 700;
    line-height: 1.4;
}
.udc-type-scale .udc-card-number {
    font-variant-numeric: tabular-nums;
}
.udc-type-scale .udc-card > p {
    margin-bottom: 0;
    color: var(--udc-muted);
    font-size: var(--udc-font-body);
    line-height: var(--udc-line-body);
}
@media (prefers-reduced-motion: reduce) {
    .udc-type-scale .udc-card--link { transition: none; }
}

/* Shared compact navigation for Áreas and Nosotros. */
.ae-area-nav {
    margin-top: var(--udc-space-5);
}
.ae-area-nav h3 {
    margin: 0 0 var(--udc-space-3);
    font-size: var(--udc-font-h3);
}
.ae-area-nav ul {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--udc-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ae-area-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--udc-space-2);
    min-height: 9rem;
    padding: var(--udc-space-3) var(--udc-space-1);
    border: 1px solid var(--udc-line);
    border-radius: var(--udc-radius-sm);
    background: var(--udc-surface);
    color: var(--udc-text);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}
.ae-area-nav a img {
    display: block;
    flex: none;
    width: 64px;
    height: 46px;
}
@media (hover: hover) {
.ae-area-nav a:hover {
    border-color: var(--udc-orange);
    background: var(--udc-card);
    color: var(--udc-text);
}
}
.ae-area-nav a:focus-visible {
    outline: var(--udc-focus-width) solid var(--udc-focus-color);
    outline-offset: var(--udc-focus-offset);
}

/* Balance the final row of seven areas; do not leave an orphan card. */
@media (max-width: 1000px) {
    .ae-area-nav ul { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .ae-area-nav li { grid-column: span 3; }
    .ae-area-nav li:nth-child(n+5) { grid-column: span 4; }
}
@media (max-width: 700px) {
    .ae-area-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ae-area-nav li:nth-child(n) { grid-column: auto; }
    .ae-area-nav li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
    .ae-area-nav ul { grid-template-columns: 1fr; }
}

/* Interior hero with photograph: copy left, photo right; copy first on narrow screens.
   Shared by Nosotros, Asesoría, Auditoría and Capacitación (same composition as the ISO heroes). */
.udc-hero-media {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
}
.udc-hero-media__photo {
    margin: 0;
}
.udc-hero-media__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 12 / 7;
    object-fit: cover;
    border: 1px solid var(--udc-line);
    border-radius: 16px;
}

/* Editorial split: heading column and prose column, stacked on narrow screens. */
.udc-split {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
}
.udc-split > :first-child > :last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .udc-hero-media,
    .udc-split {
        grid-template-columns: 1fr;
    }
}

/* Canonical section rhythm: explicit marker preserves each migrated page's approved spacing. */
body.udc-type-scale main#contenido > .udc-section { padding-block: var(--udc-band-space, var(--udc-section-space)); }

/* Shared article catalog card (#246). Catalog appearance is preserved.
   #50555a and the three moved priority declarations are the approved legacy
   article-card surface exception, not a new general card variant. */
.article-card-media{display:block;overflow:hidden;background:var(--udc-card)}
.article-card-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:right bottom}
.article-card .article-kicker{margin:0;color:var(--udc-orange);font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.article-card .article-summary{margin:0;color:var(--udc-muted);line-height:1.5}
.article-card :is(h2,h3,h4,h5,h6),.article-card .article-summary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.article-card .article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .85rem;margin:.8rem 0;color:var(--udc-muted);font-size:.82rem}
.article-card .article-meta-item{display:inline-flex;align-items:center;gap:.38rem;white-space:nowrap}
.article-card .article-meta-number{font-weight:700;color:var(--udc-text)}
.article-card .article-meta-number:before{display:none}
.article-card .article-meta-item:before{content:'';flex:0 0 auto;width:.92rem;height:.92rem;background:currentColor;mask:center/contain no-repeat;-webkit-mask:center/contain no-repeat}
.article-card .article-meta-date:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h1a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V2Zm11 8H6v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-9ZM7 6a1 1 0 0 0-1 1v1h12V7a1 1 0 0 0-1-1H7Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h1a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V2Zm11 8H6v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-9ZM7 6a1 1 0 0 0-1 1v1h12V7a1 1 0 0 0-1-1H7Z'/%3E%3C/svg%3E")}
.article-card{display:flex;flex-direction:column;overflow:hidden;min-height:100%;border:1px solid var(--udc-line);border-radius:var(--udc-radius-sm);background:var(--udc-card)}
.article-card-media{aspect-ratio:16/9}
.article-card-body{display:flex;flex:1;flex-direction:column;padding:1rem}
.article-card :is(h2,h3,h4,h5,h6){margin:.4rem 0 .55rem;font-size:1.02rem;line-height:1.28}
/* P43: on pages with the common scale the catalog card keeps its component title size (#246/#447),
   like metadata and controls; the scale governs headings in the page flow only. */
body.udc-type-scale main#contenido .article-card :is(h2,h3,h4,h5,h6){font-size:1.02rem;line-height:1.28}
.article-card :is(h2,h3,h4,h5,h6) a{color:var(--udc-text);text-decoration:none}
.article-card :is(h2,h3,h4,h5,h6) a:hover,.article-card :is(h2,h3,h4,h5,h6) a:focus-visible{color:var(--udc-orange-hover);text-decoration:underline}
.article-card .article-summary{font-size:.88rem}
.article-card .article-meta{margin-top:auto;margin-bottom:0;padding-top:.85rem;font-size:.75rem;line-height:1.2}
/* Preserve the approved final-cascade article card surface locally. */
.article-card{
  background:var(--udc-card)!important;
  border-color:#50555a!important;
  color:var(--udc-text)!important;
}

.article-card .article-meta-reading:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 3v4.59l3.2 3.2-1.4 1.42L11 12.41V7h2Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 3v4.59l3.2 3.2-1.4 1.42L11 12.41V7h2Z'/%3E%3C/svg%3E")}

/* Shared currency notice; article states and placement remain in their renderer. */
.article-currency-notice{margin:0 0 16px;padding:14px 16px;border:1px solid var(--udc-line);border-radius:6px;background:var(--udc-surface);color:var(--udc-muted);font-size:13px;line-height:1.6}
.udc-currency-notice{margin:var(--udc-space-5) 0 0;padding:var(--udc-space-3) 0 0;border:0;border-top:1px solid var(--udc-line);border-radius:0;background:none;color:var(--udc-muted);font-size:13px;line-height:1.6}.article-currency-notice strong,.udc-currency-notice strong{color:var(--udc-text)}
/* Related-reading card variant (#438): the whole card is the title's link target, titles get
   one more line, and below 900px the card becomes a compact row (critique 6005706971). */
.article-card--related{position:relative}
.article-card--related :is(h2,h3,h4,h5,h6){-webkit-line-clamp:4;text-wrap:pretty}
.article-card--related :is(h2,h3,h4,h5,h6) a::after{content:'';position:absolute;inset:0}
/* Focus shows the whole clickable card; the base border keeps its documented !important, so states use outline/box-shadow. */
@supports selector(:has(*)){
  .article-card--related:has(:is(h2,h3,h4,h5,h6) a:focus-visible){outline:var(--udc-focus-width) solid var(--udc-focus-color);outline-offset:var(--udc-focus-offset)}
  .article-card--related :is(h2,h3,h4,h5,h6) a:focus-visible{outline:none}
}
@media (hover:hover){
  .article-card--related:hover{box-shadow:0 0 0 1px var(--udc-orange)}
  .article-card--related:hover :is(h2,h3,h4,h5,h6) a{color:var(--udc-orange-hover);text-decoration:underline}
}
@media (max-width:900px){
  .article-card--related:has(.article-card-media){display:grid;grid-template-columns:96px minmax(0,1fr);align-items:start}
  .article-card--related .article-card-media{width:96px;height:96px;aspect-ratio:1/1;align-self:start}
  .article-card--related .article-card-media img{object-position:center}
  .article-card--related .article-card-body{padding:.75rem .9rem}
  .article-card--related .article-summary{display:none}
  .article-card--related .article-meta{padding-top:.5rem}
}
@media (max-width:380px){.article-card--related :is(h2,h3,h4,h5,h6){-webkit-line-clamp:5}}

/* Aviso informativo de cookies (#552, opción B): barra inferior no modal. Se oculta al cerrarla;
   mientras se ve, cookie-notice.js reserva su alto en el body para no tapar contenido. */
.udc-cookie-notice{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--udc-card);box-shadow:0 -10px 30px rgba(0,0,0,.38)}
.udc-cookie-notice[hidden]{display:none}
.udc-cookie-notice__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--udc-space-4);padding-top:var(--udc-space-3);padding-bottom:var(--udc-space-3)}
.udc-cookie-notice__text{margin:0;max-width:82ch;color:var(--udc-text);font-size:var(--udc-font-small);line-height:1.5}
.udc-cookie-notice__text a{color:var(--udc-orange);text-underline-offset:.18em}
.udc-cookie-notice__close{flex:0 0 auto;min-width:7.5rem;min-height:44px}
@media (max-width:620px){
  .udc-cookie-notice__inner{flex-direction:column;align-items:stretch;gap:var(--udc-space-3)}
  .udc-cookie-notice__close{width:100%}
}

/* WhatsApp channel: shared UI, no changes to form or measurement. */
.udc-whatsapp-contact{margin-top:var(--udc-space-3)}
.udc-whatsapp-button,.udc-whatsapp-footer-link{display:inline-flex;align-items:center;gap:var(--udc-space-2);min-height:44px}
/* Verde de WhatsApp Web (#008069): con texto e ícono blancos da 4,89:1 (AA); #25D366 daría 1,98:1. */
.button.udc-whatsapp-button{background:#008069;border-color:#008069;color:#fff}
.button.udc-whatsapp-button:hover,.button.udc-whatsapp-button:focus-visible{background:#006b58;border-color:#006b58;color:#fff}
.udc-whatsapp-icon{width:24px;height:24px;flex:none;color:#fff /* Official white brand glyph: preserve original color, not theme text. */}
.udc-whatsapp-notice{margin:var(--udc-space-2) 0 0;font-size:var(--udc-font-small);line-height:1.5;color:var(--udc-muted)}
.udc-whatsapp-notice a{color:var(--udc-orange);text-underline-offset:.18em}
.udc-whatsapp-footer-link{color:var(--udc-text);text-decoration:none}
.udc-whatsapp-footer-link:focus-visible{outline:var(--udc-focus-width) solid var(--udc-focus-color);outline-offset:var(--udc-focus-offset)}

.udc-whatsapp-actions{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--udc-space-3)}
.udc-whatsapp-actions > .udc-whatsapp-contact{margin-top:0;flex:1 1 16rem}
:is(.cta-box,.udc-cta):not(.home-cta *) .udc-whatsapp-notice,:is(.cta-box,.udc-cta):not(.home-cta *) .udc-whatsapp-notice a{color:var(--udc-on-accent)}
.sp-final .udc-whatsapp-notice{border:0;padding-top:0;margin:var(--udc-space-2) 0 0}
/* P78: botón flotante de WhatsApp (solo Inicio). Oculto mientras el aviso de cookies está visible y cuando ya se ve otro WhatsApp. */
.udc-whatsapp-floating{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#008069;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .16s ease-out,box-shadow .16s ease-out,opacity .2s ease-out,visibility 0s}
.udc-whatsapp-floating .udc-whatsapp-icon{width:30px;height:30px}
.udc-whatsapp-floating:hover{transform:scale(1.08);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.udc-whatsapp-floating:focus-visible{outline:3px solid var(--udc-orange);outline-offset:4px}
.udc-whatsapp-floating.is-tucked{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-out,visibility 0s .2s}
.udc-cookie-notice:not([hidden])~.udc-whatsapp-floating{display:none}
/* Gabe 11/10 22:48: on desktop, same right column, vertically centred; on phones it stays at the bottom so it does not cover the text. */
@media(min-width:901px){.udc-whatsapp-floating{right:24px;bottom:auto;top:50%;translate:0 -50%}}
@media(prefers-reduced-motion:reduce){.udc-whatsapp-floating{transition:none}.udc-whatsapp-floating:hover{transform:none}}