/* ARRANXO campaign and contact pages (/cuadro, /comunidades, /contacto) + the building drawing of the home
   (section "Para comunidades y negocios"). Linked from those pages' content (pages/*.html), on top of styles.css:
   same tokens, same rules. Motion = transform, opacity and stroke only; everything is readable at once, without JS
   and with reduced motion (styles.css turns every animation off there). Behaviour: assets/js/p-campana.js.

   Class vocabulary
   .xp (data-xp)    interactive drawing: .xp-fig (svg with .zone[data-part] groups) + .xp-side (.xp-tabs > .xp-tab,
                    .xp-panels > .xp-panel, .xp-cta). Without JS: no tabs, every panel listed under the drawing.
   .bld-fig         the building (assets/img/ill/edificio.svg) + .bld-key (what the pins mean)
   .cdr-fig         the electrical panel (assets/img/ill/cuadro.svg)
   .tl-4            the step line of styles.css with four steps
   .why             safety + insurance band (/cuadro) · .save (what an administrador saves, /comunidades)
   .ct-hero         contact hero with the live 24 h dial · .mega-phone · .ct-map · .ficha (title block)
*/

/* ---------- interactive drawings ---------- */
.xp { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); align-items: center; }
.xp-fig { position: relative; margin: 0; color: var(--slate); }
.xp-side { display: grid; gap: 1rem; align-content: start; }
.xp-hint { display: none; margin: 0; font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.xp-tabs { display: none; }
.js .xp-hint { display: block; }
.js .xp-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.xp-tab {
  position: relative; display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 3.25rem; padding: .6rem .8rem;
  background: var(--sheet); color: var(--slate); border: 1px solid var(--line-strong); border-radius: var(--r);
  font: 700 .9375rem/1.2 var(--font); letter-spacing: -.005em; text-align: left; cursor: pointer; hyphens: auto; overflow-wrap: break-word;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), transform 160ms var(--ease);
}
.xp-tab::before { /* a small drawn node: hollow, filled when this part is the one shown */
  content: ""; flex: none; width: .6rem; height: .6rem; border: 1.5px solid currentColor; border-radius: 50%;
  transition: background-color 220ms var(--ease); }
.xp-tab[aria-expanded="true"] { background: var(--slate); color: var(--paper); border-color: var(--slate); }
@media (max-width: 25.99em) { .xp-tab { padding-inline: .7rem; } .xp-tab::before { display: none; } }   /* small phones: room for "Magnetotérmicos" */
.xp-tab[aria-expanded="true"]::before { background: currentColor; }
.xp-tab:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .xp-tab:hover { border-color: var(--slate); }
  .xp-tab:not([aria-expanded="true"]):hover { background: #fff; }
}
.xp-panels { display: grid; gap: .75rem; }
.js .xp-panel:not(.is-open) { display: none; }            /* touch: only the open text, its height follows (after a tap) */
@media (hover: hover) and (pointer: fine) {                  /* mouse: resting on the drawing switches the text, so the box
                                                                keeps the height of the longest one and nothing below moves */
  .js .xp-panels > .xp-panel { grid-area: 1 / 1; }
  .js .xp-panel:not(.is-open) { display: block; visibility: hidden; }
}
.xp-panel { position: relative; padding: 1.3rem 1.25rem 1.4rem; background: var(--sheet); border: 1px solid var(--line-strong);
  border-radius: var(--r); }
.xp-panel::before { /* drawing-sheet corner marks */
  content: ""; position: absolute; inset: .5rem; pointer-events: none; opacity: .45;
  background:
    linear-gradient(var(--slate), var(--slate)) 0 0 / .75rem 1.5px no-repeat, linear-gradient(var(--slate), var(--slate)) 0 0 / 1.5px .75rem no-repeat,
    linear-gradient(var(--slate), var(--slate)) 100% 100% / .75rem 1.5px no-repeat, linear-gradient(var(--slate), var(--slate)) 100% 100% / 1.5px .75rem no-repeat; }
.xp-panel h3 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.85rem); letter-spacing: -.03em; margin-bottom: .45em; }
.xp-panel p { margin: 0 0 .6rem; color: var(--slate); }
.xp-panel p:last-child { margin-bottom: 0; }
.xp-panel .link-arrow { margin-top: .35rem; }
.xp-panel .link-arrow + p { margin-top: 1rem; }                     /* text after a link starts a new thought */
.xp-panel .link-arrow:not(:last-child) { margin-right: 1.25rem; }   /* two links in a row keep apart; wrapped, flush left */
@media (prefers-reduced-motion: no-preference) {
  .js .xp-panel.is-open > * { animation: rise 460ms var(--ease) both; }
  .js .xp-panel.is-open > :nth-child(2) { animation-delay: 40ms; }
  .js .xp-panel.is-open > :nth-child(n+3) { animation-delay: 80ms; }
}
.xp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: .5rem 0 0; max-width: none; }
.xp-foot { margin: .25rem 0 0; color: var(--muted); font-size: .9688rem; }
.xp-note { margin: 0; padding: .85rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--slate); }

/* the drawing itself: zones become tappable once p-campana.js runs (.is-live) */
.xp.is-live .zone { cursor: pointer; }
.xp.is-live .hl { fill: transparent; pointer-events: all; transition: fill 200ms var(--ease); }
.xp .zone.is-on .hl { fill: url(#bld-hatch); }
.xp.xp-cdr .zone.is-on .hl { fill: url(#cdr-hatch); }
@media (hover: hover) and (pointer: fine) { .xp.is-live .zone:not(.is-on):hover .hl { fill: rgb(27 42 56 / .045); } }
.xp .tag { fill: var(--slate); opacity: 0; transition: opacity 220ms var(--ease); }
.xp .zone.is-on .tag { opacity: 1; }
.xp .lbl { transition: fill 220ms var(--ease); }
.xp .zone.is-on .lbl { fill: var(--paper); }
.xp .leader-dot { transform-box: fill-box; transform-origin: center; transition: transform 300ms var(--ease); }
.xp .zone.is-on .leader-dot { transform: scale(1.6); }
.xp .zone.is-on .leader { stroke-width: 1.6; }

/* ---------- the building (home + /comunidades) ---------- */
.bld-fig { margin: 0; color: var(--slate); }
.bld-fig .ill.bld { width: 100%; max-width: none; height: auto; margin-inline: auto; }
.bld .lbl { font-size: 12px; letter-spacing: 1.4px; }      /* user units: ≈ 13 px on a 390 px phone (the drawing bleeds) */
.bld .earth { stroke-opacity: .5; }
.bld .pin-bg { fill: var(--pin-bg, var(--paper)); transition: fill 220ms var(--ease); }
.bld .pin path { transition: stroke 220ms var(--ease); }
.bld .pin-ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
.bld .pin.is-on .pin-bg { fill: var(--slate); }
.bld .pin.is-on path { stroke: var(--paper); }
@media (prefers-reduced-motion: no-preference) {
  .bld .pin.is-on.is-go .pin-ring { animation: ring 1300ms var(--ease) 2; }
}
@keyframes ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
.section-alt .bld, .section-alt .bld-key { --pin-bg: var(--paper-2); }
/* phones: the drawing uses the full screen width, so its labels stay ≥ 12 px */
@media (max-width: 29.99em) { .bld-fig { margin-inline: calc(-1 * var(--gutter)); } }
@media (min-width: 30em) {
  .bld-fig .ill.bld { width: min(100%, 28rem); }
  .bld .lbl { font-size: 10.5px; letter-spacing: 1.3px; }
}
/* side by side: the whole building and its key fit on one screen */
@media (min-width: 56em) {
  .bld-fig .ill.bld { width: min(100%, 31rem, calc((100vh - 15.5rem) * .687)); }
  .bld .lbl { font-size: 11.5px; letter-spacing: 1.35px; }
}

/* what the pins mean */
.bld-key { display: grid; gap: .6rem; margin: 1.25rem 0 0; }
.bld-key-h { font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bld-key ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
/* each trade is a filter chip (assets/js/xp.js): pressed = its marker in the building lights up, the others step back */
.bld-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .3rem .8rem .3rem .4rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); color: var(--slate);
  font: 600 .9375rem/1.3 var(--font); cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); }
.bld-chip:active { transform: scale(.97); }
.bld-chip[aria-pressed="true"] { background: var(--slate); color: var(--paper); border-color: var(--slate); }
.bld-chip[aria-pressed="true"] .pin-bg { fill: var(--slate); stroke: var(--paper); }
@media (hover: hover) and (pointer: fine) { .bld-chip:not([aria-pressed="true"]):hover { border-color: var(--slate); background: #fff; } }
.bld-key svg { width: 1.6rem; height: 1.6rem; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.bld-key .pin-bg { fill: var(--paper); stroke-width: 1.4; }
.bld-note { margin: .35rem 0 0; color: var(--slate); font-size: .9688rem; }
.bld-note .link-arrow { margin-left: .2rem; }
/* the filter dims the icons, not the pin groups: the drawing script leaves an inline opacity on those */
.bld .pin :is(.pin-bg, path) { transition: opacity 220ms var(--ease), fill 220ms var(--ease), stroke 220ms var(--ease); }
.bld.has-pin .pin:not(.is-hit) :is(.pin-bg, path) { opacity: .22; }
.bld .pin.is-hit .pin-bg { fill: var(--slate); }
.bld .pin.is-hit path { stroke: var(--paper); }
@media (prefers-reduced-motion: no-preference) { .bld .pin.is-ping .pin-ring { animation: ring 1300ms var(--ease) 2; } }
@media (max-width: 29.99em) { .bld-fig .bld-key { padding-inline: var(--gutter); } }   /* the drawing bleeds, the key does not */
@media (min-width: 30em) { .bld-fig .bld-key { justify-items: center; text-align: center; } .bld-fig .bld-key ul { justify-content: center; } }
.xp-side .bld-key { margin-top: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* home: the drawing between the two audiences */
@media (min-width: 56em) {
  .aud-sec .bld-fig { grid-row: 1 / span 2; align-self: center; }
}

/* /comunidades: drawing left, zones + explanation right */
@media (min-width: 56em) {
  .xp-bld { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 5rem); }
  .xp-bld .bld-fig .ill.bld { width: min(100%, 31rem, calc((100vh - 9.5rem) * .687)); }   /* its key sits in the side column */
  .xp-bld .xp-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75em) { .xp-bld .xp-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- the electrical panel (/cuadro) ---------- */
.cdr-fig { overflow: hidden; }
.cdr-fig .ill.cdr { width: 156%; max-width: none; }          /* phones: the box alone, big; the tabs name the parts */
.cdr-fig .leader, .cdr-fig .leader-dot, .cdr-fig .lbl, .cdr-fig .tag { display: none; }
.cdr .sel { transition: opacity 260ms var(--ease); }
.cdr .zone.is-on .sel { opacity: 1; }
.cdr .zone > path:not(.hl):not(.sel), .cdr .zone > circle { transition: opacity 260ms var(--ease); }
.xp-cdr.has-sel .zone:not(.is-on) > path:not(.hl):not(.sel):not(.leader):not(.leader-dot) { opacity: .38; }
.cdr .lev, .cdr .btn-t, .cdr .spark { transform-box: fill-box; transform-origin: 50% 0; }
.cdr .btn-t { transform-origin: center; }
.cdr .gnd { stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* each part shows what it does: the switch trips and comes back, the surge module flashes, the fault runs to earth */
  .cdr .zone.is-go .lev { animation: trip 1150ms var(--ease-io) both; }
  .cdr .zone.is-go .lev.d2 { animation-delay: 90ms; }
  .cdr .zone.is-go .lev.d3 { animation-delay: 180ms; }
  .cdr .zone.is-go .lev.d4 { animation-delay: 270ms; }
  .cdr .zone.is-go .lev.d5 { animation-delay: 360ms; }
  .cdr .zone.is-go .btn-t { animation: press 600ms var(--ease) both; }
  .cdr .zone.is-go .lev.ac { animation-delay: 260ms; }
  .cdr .zone.is-go .bolt { animation: flash 520ms var(--ease-io) 3; }
  .cdr .zone.is-go .gnd { animation: draw 900ms var(--ease-io) 420ms both; }
  .cdr .zone.is-go .spark { animation: to-earth 1100ms var(--ease-io) both; }
}
@keyframes trip { 0%, 100% { transform: none; } 30%, 70% { transform: translateY(100%); } }
@keyframes press { 40% { transform: scale(.8); } }
@keyframes flash { 50% { opacity: .1; } }
@keyframes to-earth { 0% { opacity: 0; transform: none; } 12% { opacity: 1; } 88% { opacity: 1; transform: translateY(116px); } 100% { opacity: 0; transform: translateY(120px); } }
@media (min-width: 56em) {
  .xp-cdr { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 4vw, 4.5rem); }
  .cdr-fig { overflow: visible; }
  .cdr-fig .ill.cdr { width: 100%; }
  .cdr-fig .leader, .cdr-fig .leader-dot, .cdr-fig .lbl, .cdr-fig .tag { display: inline; }
}

/* ---------- step line with four steps (styles.css .tl-*) ---------- */
@media (min-width: 64em) {
  .tl-4 .tl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tl-4 .tl-line { right: calc(25% - 2.5rem); }
}

/* ---------- /cuadro: why (safety + insurance) ---------- */
.why-big { margin: 0 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem); max-width: 26ch; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.12; color: var(--paper); text-wrap: balance; }
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
.why-grid > li { padding-top: 1.4rem; border-top: 1px solid rgb(242 240 236 / .28); }
.why-grid .ico { width: 3rem; height: 3rem; stroke-width: 1.6; margin-bottom: 1rem; color: var(--paper); }
.why-grid h3 { color: var(--paper); margin-bottom: .45em; }
.why-grid p { margin: 0; color: rgb(242 240 236 / .86); }
.why .svc-extra { color: rgb(242 240 236 / .86); }
@media (min-width: 56em) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 4rem); } }

/* ---------- /comunidades: what an administrador saves ---------- */
.save { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--slate); }
.save > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .25rem 1.1rem; padding: 1.75rem 0 1.9rem;
  border-bottom: 1px solid var(--line-strong); }
.save .ico { grid-row: 1 / span 3; width: 3rem; height: 3rem; stroke-width: 1.6; }
.save h3 { margin: .3rem 0 .35em; font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.25rem); letter-spacing: -.035em; }
.save p { margin: 0; color: var(--muted); max-width: 38rem; }
.save .save-was { display: flex; flex-wrap: wrap; gap: .4rem; justify-self: start; margin: 0 0 .9rem; }
.save-was s { position: relative; padding: .25rem .6rem; border: 1px dashed var(--line-strong); border-radius: var(--r);
  font-size: .875rem; font-weight: 600; color: var(--granite-ink); text-decoration: none; }
.save-was s::after { /* each trade gets struck out: one call instead of four */
  content: ""; position: absolute; left: .35rem; right: .35rem; top: 50%; height: 2px; margin-top: -1px; background: var(--slate);
  transform-origin: 0 50%; transition: transform 520ms var(--ease-io) 150ms; }
.save-was s:nth-of-type(2)::after { transition-delay: 330ms; }
.save-was s:nth-of-type(3)::after { transition-delay: 510ms; }
.save-was s:nth-of-type(4)::after { transition-delay: 690ms; }
@media (prefers-reduced-motion: no-preference) { .js .save-was:not(.is-in) s::after { transform: scaleX(0); } }
@media (min-width: 56em) {
  .save > li { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start;
    padding-block: 2.25rem 2.4rem; }
  .save .ico { grid-row: 1 / span 2; width: 3.5rem; height: 3.5rem; }
  .save h3 { grid-column: 2; margin-top: .2rem; }
  .save-was { grid-column: 2; }
  .save p:not(.save-was) { grid-column: 3; grid-row: 1 / span 2; padding-top: .45rem; }
}

/* urgencias band (/comunidades): it gets darker at night in A Coruña, like the home dial */
.band[data-clock] { transition: background-color 600ms var(--ease); }
.band.is-night { background-color: var(--slate-night); }
.band .band-now { margin: -.15rem 0 1rem; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-weight: 700; letter-spacing: -.015em;
  line-height: 1.3; color: var(--paper); }
.band-now time, .ct-hero .dial-now time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- the stamp of a campaign hero (/cuadro, /comunidades; wide screens only, it only repeats the hero) ---------- */
.sello { display: none; }
.sello .s-ring { stroke-opacity: .55; }
.sello .s-thin { stroke-opacity: .32; }
.sello .s-txt { fill: currentColor; fill-opacity: .8; font: 700 14.5px var(--font); letter-spacing: .1em; }
.sello .s-ico { stroke-opacity: .85; }
@media (min-width: 75em) {
  .page-hero .sello { display: block; position: absolute; right: 0; top: 50%; width: 20rem; height: auto; translate: 0 -46%;
    color: var(--paper); pointer-events: none; }
  .page-hero:has(.sello)::before { display: none; }   /* the stamp is the drawing of this hero */
}
@media (prefers-reduced-motion: no-preference) {   /* drawn once, like the X of the home: rings first, then the icon */
  .sello .s-ring, .sello .s-ico path { stroke-dasharray: 1; animation: draw 1100ms var(--ease-io) 150ms both; }
  .sello .s-ring + .s-ring { animation-delay: 260ms; }
  .sello .s-ring + .s-ring + .s-ring { animation-delay: 370ms; }
  .sello .s-ico path { animation-duration: 900ms; animation-delay: 650ms; }
}

/* ---------- /contacto ---------- */
.ct-hero::before { display: none; }   /* the dial is the drawing of this hero */
.ct-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.ct-hero h1 { margin-bottom: .3em; }
.ct-hero .dial-now { max-width: 24ch; margin: 0 0 .9rem; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2rem); }
.ct-hero .mega-phone { font-size: clamp(2rem, 10.2vw, 5.6rem); letter-spacing: -.035em; margin: .1rem 0 1rem;   /* phones: edge to edge */
  max-width: 100%; white-space: normal; overflow-wrap: break-word; }   /* wider letter spacing (WCAG 1.4.12) wraps it, never overflows */
.ct-hero .lead { margin-bottom: 1.5rem; }
.ct-hero .dial { width: min(70vw, 20rem); }
.ct-hero .dial-legend { margin-top: .9rem; }
@media (min-width: 64em) {
  .ct-in { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
  .ct-hero .mega-phone { font-size: clamp(2rem, 5vw, 5.2rem); }   /* beside the dial: fits its column, also with WCAG 1.4.12 spacing */
  .ct-hero .dial { width: min(100%, 24rem); justify-self: end; }
}

/* title block of a drawing: the data, as a plan would list them */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr); margin: 2rem 0 0; border: 1.5px solid var(--slate); border-radius: var(--r);
  background: var(--sheet); }
.ficha > div { display: grid; gap: .15rem; padding: .8rem 1rem; border-top: 1px solid var(--line-strong); }
.ficha > div:first-child { border-top: 0; }
.ficha dt { font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ficha dd { margin: 0; font-weight: 700; }
@media (min-width: 30em) {
  .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha > div:nth-child(2) { border-top: 0; }
  .ficha > div:nth-child(even) { border-left: 1px solid var(--line-strong); }
  .ficha > div:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* odd count: no empty half cell at the end */
}

/* zone plan: A Coruña in the middle, the rings of "alrededores" around it */
.ct-map { position: relative; margin: 0; width: min(86%, 27rem); justify-self: center; color: var(--slate); }
.ct-map svg { display: block; width: 100%; height: auto; overflow: hidden; }
.ct-map .ring { stroke-opacity: .55; }
.ct-map .ring-2 { stroke-opacity: .35; }
.ct-map .ring-3 { stroke-opacity: .22; }
.ct-map .cross { stroke-opacity: .2; }
.ct-map text { fill: currentColor; stroke: none; font-family: var(--font); font-weight: 600; }
.ct-map .city { font-size: 17px; font-weight: 700; letter-spacing: .06em; paint-order: stroke; stroke: var(--paper-2); stroke-width: 7px; stroke-linejoin: round; }
.ct-map .around { font-size: 12.5px; letter-spacing: .3em; fill-opacity: .75; }
.ct-map .coords { font-size: 11px; letter-spacing: .14em; fill-opacity: .7; }
.ct-map .dot { fill: var(--green); stroke: none; }
.ct-map .dot-halo { fill: none; stroke: var(--slate); stroke-opacity: .5; }
.zones-in.ct-zone { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) { .zones-in.ct-zone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* /cuadro: the team photo under the call to action (placeholder until the real photo arrives) */
.cdr-photo { margin-top: 2rem; max-width: 34rem; }
.ct-h3 { margin: 1.9rem 0 .4rem; font-size: 1.1875rem; }

/* phones: phone numbers in running text may wrap (WCAG 1.4.12 text spacing), like .big-phone in styles.css; the home's
   audience grid never grows wider than the screen because of one long line */
@media (max-width: 47.99em) {
  :is([data-page="cuadro"], [data-page="comunidades"], [data-page="contacto"]) main .tel, .aud-sec .tel {
    max-width: 100%; white-space: normal; overflow-wrap: break-word; }
}
@media (max-width: 55.99em) { .aud-sec .aud-grid { grid-template-columns: minmax(0, 1fr); } }
/* a long word in a big heading ("administrador?") may break instead of pushing the page sideways (320 px + text spacing) */
:is([data-page="cuadro"], [data-page="comunidades"], [data-page="contacto"]) main :is(h1, h2, h3), .aud-sec h2 {
  overflow-wrap: break-word; }
/* hyphens only on phones: on wide screens "cua-dro" in the hero heading looks broken */
@media (max-width: 47.99em) {
  :is([data-page="cuadro"], [data-page="comunidades"], [data-page="contacto"]) main :is(h1, h2, h3), .aud-sec h2 { hyphens: auto; }
}