/* ============================================================
   ADATTAMENTI
   Questo file NON viene mai rigenerato: contiene tutto quello
   che negli HTML originali non c'era e che serve per farli
   vivere dentro WordPress, Kadence ed Elementor.

   `componenti.css` invece è generato dagli HTML forniti: se un
   giorno va ricostruito, si rifà da capo senza perdere niente
   di quello che sta qui.

   Ordine di caricamento: tokens → componenti → adattamenti.
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1. MODELLO DI RIQUADRO
   Il reset globale degli originali azzerava anche i margini del
   tema, quindi è stato tolto. Ma senza `border-box` il padding
   si somma alla larghezza e le sezioni sbordano dalla finestra.
   Qui vale solo dentro le sezioni del progetto.
   ════════════════════════════════════════════════════════════ */

.hero, .stats-bar, .tratamientos, .metodo, .tecnologia,
.tecnicas, .testimonios, .contacto-wrap, .equipo-page,
.trat-page, .pasos-page, .funciona-intro,
.hero *, .stats-bar *, .tratamientos *, .metodo *, .tecnologia *,
.tecnicas *, .testimonios *, .contacto-wrap *, .equipo-page *,
.trat-page *, .pasos-page *, .funciona-intro * {
  box-sizing: border-box;
}


/* ════════════════════════════════════════════════════════════
   2. SEZIONI A TUTTA LARGHEZZA, SENZA STACCHI
   Elementor mette ogni widget in un contenitore con padding e
   separa gli elementi con un `gap`. Le nostre sezioni hanno già
   il loro respiro interno: quello che aggiunge il costruttore
   diventa una striscia chiara fra una sezione e l'altra.
   ════════════════════════════════════════════════════════════ */

.hero, .stats-bar, .tratamientos, .metodo, .tecnologia,
.tecnicas, .testimonios, .contacto-wrap, .equipo-page,
.trat-page, .pasos-page, .funciona-intro {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
}

/* il widget HTML e il suo involucro non devono aggiungere nulla */
.elementor-widget-html,
.elementor-widget-html > .elementor-widget-container {
  margin: 0;
  padding: 0 !important;
}

/* i contenitori che ospitano solo blocchi HTML: niente gap né padding.
   Vale per i contenitori nuovi (.e-con) e per le vecchie sezioni. */
.elementor-element:has(> .elementor-widget-html),
.e-con:has(> .elementor-widget-html) {
  gap: 0;
  padding: 0;
  margin: 0;
  --gap: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* ripiego per i browser senza :has() — pochi ormai, ma costa nulla */
.elementor-widget-html { margin-block-end: 0 !important; }


/* ════════════════════════════════════════════════════════════
   3. RESPIRO LATERALE DELL'INTESTAZIONE
   Negli originali veniva da `nav { padding: 24px 48px }`, regola
   scartata perché colpiva il markup del tema. Qui torna, ma
   agganciata ai contenitori di Kadence.
   ════════════════════════════════════════════════════════════ */

.site-header .site-container,
.site-header .site-header-row-container-inner {
  padding-left: 48px;
  padding-right: 48px;
}


/* ════════════════════════════════════════════════════════════
   4. TABLET
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  .hero { height: 78vh; min-height: 520px; }

  /* stessa ragione del telefono: 4/3 + min-height 320 fanno una
     larghezza minima di 427px, troppa per due colonne qui */
  .trat-card { min-height: 260px; }

  .equipo-grid,
  .pasos,
  .pasos-grid          { grid-template-columns: repeat(2, 1fr); }

  /* la linea che unisce i quattro passi ha senso su una riga sola */
  .pasos::before       { display: none; }

  .maquinaria-grid,
  .tecnicas-grupos,
  .testimonios-grid    { grid-template-columns: repeat(2, 1fr); }

  .contacto,
  .contacto-inner      { grid-template-columns: 1fr; gap: 48px; }

  .accord-inner        { grid-template-columns: 1fr 160px; gap: 20px; }

  .tratamientos, .metodo, .tecnologia, .tecnicas, .testimonios,
  .equipo-page, .trat-page, .pasos-page, .funciona-intro {
    padding-left: 32px;
    padding-right: 32px;
  }
}


/* ════════════════════════════════════════════════════════════
   5. TELEFONO
   ════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .site-header .site-container,
  .site-header .site-header-row-container-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* niente 100vh: su iOS la barra di Safari compare e scompare,
     l'altezza cambia e la sezione sussulta sotto le dita */
  .hero {
    height: auto;
    min-height: 0;
    padding: 120px 20px 64px;
    justify-content: flex-start;
  }

  .hero-content {
    max-width: 100%;
    padding: 0;
    text-align: left;
  }

  /* una colonna, ovunque */
  .stats-bar,
  .tratamientos-grid,
  .pasos,
  .pasos-grid,
  .maquinaria-grid,
  .tecnicas-grupos,
  .testimonios-grid,
  .equipo-grid,
  .categ-accord-list   { grid-template-columns: 1fr; }

  .stats-bar           { gap: 1px; }
  .stat-item           { padding: 20px 24px; border-right: 0;
                         border-bottom: 1px solid rgba(255,255,255,0.2); }

  /* Le schede trattamenti hanno `aspect-ratio: 4/3` più
     `min-height: 320px`: insieme impongono una larghezza minima
     di 427px, che su uno schermo da 390 sborda e fa scorrere la
     pagina di lato. Su telefono l'altezza la decide il contenuto. */
  .trat-card, .categ-card-image {
    aspect-ratio: auto;
    min-height: 240px;
  }

  /* la foto dell'accordion va sotto al testo, non di fianco */
  .accord-inner        { grid-template-columns: 1fr; gap: 16px; }
  .accord-photo        { height: 180px; }

  /* spaziature: 100px di respiro su desktop qui sono troppi */
  .tratamientos, .metodo, .tecnologia, .tecnicas, .testimonios,
  .contacto, .equipo-page, .trat-page, .pasos-page, .funciona-intro {
    padding: 56px 20px;
  }
  .contacto-wrap       { padding: 0; }
  .contacto-inner      { padding: 56px 20px; }
  .section-inner       { padding-left: 0; padding-right: 0; }

  /* le maiuscole molto spaziate spezzano male su schermo stretto */
  .section-label       { letter-spacing: 0.1em; font-size: 10.5px; }
  .metodo-label        { letter-spacing: 0.14em; }

  /* nessun bersaglio da toccare sotto i 44px */
  .subtrat, .btn-mas, .accord-trigger, .tec-item span {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .contacto-map iframe { height: 260px; }
}


/* ════════════════════════════════════════════════════════════
   6. SCHERMI MOLTO STRETTI
   ════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  .hero-content h1 { font-size: 40px; }
  .section-title   { font-size: 30px; }
}


/* ════════════════════════════════════════════════════════════
   7. TOCCO
   Tutto ciò che negli originali si apriva al passaggio del mouse
   va qui: su uno schermo tattile quel contenuto sarebbe perso.
   ════════════════════════════════════════════════════════════ */

@media (hover: none) {

  /* le schede dei macchinari non si girano: mostrano il retro */
  .maq-flip-inner    { transform: none !important; }
  .maq-front         { display: none; }
  .maq-back          { position: static; transform: none; }

  /* le schede trattamenti non nascondono più l'elenco */
  .trat-card-hover   { position: static; opacity: 1; visibility: visible; }
  .trat-card-base    { display: none; }
  .trat-hint         { display: none; }
}


/* ════════════════════════════════════════════════════════════
   8. MOVIMENTO RIDOTTO
   ════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .hero *, .stats-bar *, .tratamientos *, .metodo *, .tecnologia *,
  .tecnicas *, .testimonios *, .contacto-wrap *, .equipo-page *,
  .trat-page *, .pasos-page * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ════════════════════════════════════════════════════════════
   9. INTESTAZIONE A TUTTA LARGHEZZA
   Negli originali `nav` è ancorata a `left: 0; right: 0` con
   `padding: 24px 48px`: occupa tutto lo schermo e il logo sta
   a 48px dal bordo. Kadence invece la incassa in un contenitore
   con larghezza massima, e il logo finisce molto più al centro.
   Se nel pannello trovi "larghezza contenitore: piena" per la
   riga principale, usa quella e togli pure questo blocco.
   ════════════════════════════════════════════════════════════ */

.site-header .site-container,
.site-header .site-header-row-container-inner,
.site-header .site-header-inner-wrap {
  max-width: 100%;
  width: 100%;
}


/* ════════════════════════════════════════════════════════════
   10. PIÈ DI PAGINA
   Negli originali era logo + copyright, e per giunta il logo era
   un JPEG con lo sfondo nero cotto dentro. Qui è testo vero, con
   le informazioni che la gente cerca davvero.
   La classe è `fisio-footer` e non `footer`: quest'ultimo
   colpirebbe anche il piè di pagina del tema.
   ════════════════════════════════════════════════════════════ */

.fisio-footer {
  background: var(--negro-deep);
  color: rgba(255,255,255,0.72);
  font-family: var(--font-base);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
}

.fisio-footer * { box-sizing: border-box; }

.fisio-footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 48px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}

.fisio-footer-marca img {
  height: 44px;
  width: auto;
  display: block;
  margin-bottom: 16px;
}

.fisio-footer-claim {
  color: rgba(255,255,255,0.45);
  max-width: 26ch;
  margin: 0;
}

.fisio-footer-tit {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--turquesa);
  margin: 0 0 14px;
}

.fisio-footer address {
  font-style: normal;
  margin-bottom: 10px;
}

.fisio-footer a {
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  transition: color var(--t-fast);
}

.fisio-footer a:hover { color: var(--amarillo); }

.fisio-orari {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fisio-orari li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-variant-numeric: tabular-nums;   /* le cifre restano incolonnate */
}

.fisio-orari span:first-child { color: rgba(255,255,255,0.45); }

.fisio-footer-nota {
  color: rgba(255,255,255,0.45);
  margin: 0 0 16px;
  max-width: 22ch;
}

.fisio-footer-basso {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 48px 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.fisio-footer-basso p {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.3);
}

.fisio-footer-legali {
  display: flex;
  gap: 22px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* Rete di sicurezza: se un domani questo elemento diventasse un <button>,
   Kadence lo vestirebbe da pulsante blu come tutti gli altri del sito.
   Qui lo si rispoglia. Serve !important perché la regola del tema padre
   arriva dopo e vince sulla specificità. */
.fisio-footer-legali button.cky-banner-element {
  appearance: none !important;
  background: none !important;
  border: 0 !important;
  padding: 0;
  margin: 0;
  font: inherit !important;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: inherit !important;
  cursor: pointer;
  transition: color var(--t-fast);
}

.fisio-footer-legali button.cky-banner-element:hover { color: var(--amarillo); }

.fisio-footer-legali button.cky-banner-element:focus-visible {
  outline: 2px solid var(--amarillo);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .fisio-footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; padding: 48px 32px 32px; }
  .fisio-footer-basso { padding: 20px 32px 28px; }
}

@media (max-width: 767px) {
  .fisio-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 44px 20px 28px;
  }
  .fisio-footer-basso {
    padding: 18px 20px 28px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  /* i link legali sono piccoli: su touch servono bersagli veri */
  .fisio-footer-legali { gap: 0; flex-direction: column; }
  .fisio-footer-legali a,
  .fisio-footer-legali button.cky-banner-element {
    min-height: 44px; display: flex; align-items: center;
  }
}


/* ════════════════════════════════════════════════════════════
   11. IL PIÈ DI PAGINA DENTRO L'AREA WIDGET DI KADENCE
   Il footer sta in un widget "HTML personalizzato", e Kadence lo
   incassa nel suo contenitore con larghezza massima e padding.
   Il fondo scuro deve invece toccare i bordi dello schermo: qui
   annullo l'involucro, mentre il contenuto resta incolonnato dal
   `max-width` interno del footer stesso.
   ════════════════════════════════════════════════════════════ */

.site-footer .widget_custom_html:has(.fisio-footer),
.site-footer .widget:has(.fisio-footer),
.site-footer .footer-widget-area:has(.fisio-footer),
.site-footer .site-container:has(.fisio-footer),
.site-footer .site-footer-row-container-inner:has(.fisio-footer) {
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* i widget di WordPress hanno un titolo e margini propri: qui non servono */
.site-footer .widget:has(.fisio-footer) .widget-title { display: none; }

/* il footer copre tutta la riga anche se il tema ci mette dello sfondo */
.fisio-footer {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}


/* ════════════════════════════════════════════════════════════
   12. PULSANTI DENTRO LE SEZIONI
   Le voci degli accordion sono <button>, e Kadence stila tutti i
   pulsanti con il suo colore primario: al passaggio del mouse
   comparirebbe un fondo blu che nel progetto non esiste.
   Negli originali cambia solo il colore del testo, che diventa
   turchese. Qui rimetto le cose a posto, e per chi naviga da
   tastiera lascio un contorno visibile invece del riquadro pieno.
   ════════════════════════════════════════════════════════════ */

/* Specificità alta (la sezione + l'elenco + il pulsante) più
   !important sul solo sfondo: Kadence marca i suoi stili sui
   pulsanti come importanti, e senza questo vincerebbe lui.
   L'!important è circoscritto allo sfondo, non a tutto il blocco. */
.trat-page .accord-trigger,
.trat-page .accord-trigger:hover,
.trat-page .accord-trigger:focus,
.trat-page .accord-trigger:active,
.categ-accord-list .accord-trigger,
.categ-accord-list .accord-trigger:hover,
.categ-accord-list .accord-trigger:focus,
.categ-accord-list .accord-trigger:active,
.accord-trigger,
.accord-trigger:hover,
.accord-trigger:focus,
.accord-trigger:active,
.accord-trigger:focus-visible,
.maq-flip-card button,
.trat-card button {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none;
  outline: none;
}

/* il contorno da tastiera resta, ma discreto e nei colori del progetto */
.accord-trigger:focus-visible {
  outline: 2px solid var(--turquesa);
  outline-offset: 3px;
  border-radius: 2px;
}

/* al passaggio del mouse cambia solo il testo, come negli originali */
.accord-trigger:hover { color: var(--turquesa); }


/* ════════════════════════════════════════════════════════════
   13. FOTO DEL TEAM
   Negli originali il riquadro della foto era un segnaposto beige
   con dentro la scritta "Foto próximamente": `height: 200px` e
   l'immagine prevista come sfondo. Sostituendo il segnaposto con
   un <img> vero servono le regole per contenerlo, altrimenti
   esce dal riquadro e si sovrappone al testo sotto.
   ════════════════════════════════════════════════════════════ */

.equipo-card-photo {
  /* l'altezza fissa tagliava i visi: qui la decide la proporzione,
     4:5 come il ritaglio delle foto */
  height: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--beis);
}

.equipo-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  /* cover con il fuoco in alto: nei ritratti il viso sta nella
     parte superiore, centrando si taglierebbero le teste */
  object-fit: cover;
  object-position: center top;
}

/* la scheda incolonna foto e testo: senza, con l'immagine dentro
   il flusso si accavallano */
.equipo-card {
  display: flex;
  flex-direction: column;
}

.equipo-card-body {
  flex: 1;
}

/* Su telefono avevo messo 3:2 per contenere l'altezza, ma le foto
   sono 720×900, cioè 4:5 esatto: dentro un riquadro più largo
   `cover` le ingrandisce per coprire la larghezza e taglia via le
   teste. Tenendo 4:5 ovunque la proporzione coincide con quella
   dei file e non si perde un pixel. */


/* ════════════════════════════════════════════════════════════
   14. PULSANTE WHATSAPP
   Previsto dal preventivo. Un plugin farebbe la stessa cosa
   portandosi dietro pannelli, banner promozionali e a volte
   script esterni che complicano il consenso ai cookie: qui è
   un link e basta, nessuna dipendenza.

   SOLO SU TELEFONO E TABLET. Su desktop il link apre WhatsApp
   Web, e chi non ha la sessione attiva finisce su una pagina
   con un codice QR: un vicolo cieco che sembra un errore.
   Lì il contatto c'è già — telefono cliccabile, prenotazione,
   modulo — e il bollino flottante aggiungerebbe solo rumore.

   Per mostrarlo ovunque: togli la riga `display: none` qui
   sotto e la media query in fondo al blocco.
   ════════════════════════════════════════════════════════════ */

.fisio-whatsapp {
  display: none;            /* su desktop resta nascosto */
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;              /* sotto l'intestazione, sopra il resto */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;      /* il verde del marchio WhatsApp */
  /* niente `display: flex` qui: sovrascriverebbe il `display: none`
     poche righe sopra e il pulsante resterebbe visibile ovunque.
     Il flex sta nella media query, dove il pulsante viene acceso. */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(13,13,13,0.25);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}

.fisio-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(13,13,13,0.3);
}

.fisio-whatsapp svg { width: 30px; height: 30px; fill: #fff; }

.fisio-whatsapp:focus-visible {
  outline: 3px solid var(--turquesa);
  outline-offset: 3px;
}

/* da qui in giù compare: tablet e telefono, dove il tocco apre
   direttamente l'app senza passare da codici QR */
@media (max-width: 1024px) {
  .fisio-whatsapp { display: flex; }
}

@media (max-width: 767px) {
  /* più piccolo e più in basso: il pollice ci arriva comunque,
     e ruba meno spazio alla lettura */
  .fisio-whatsapp { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .fisio-whatsapp svg { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .fisio-whatsapp { transition: none; }
  .fisio-whatsapp:hover { transform: none; }
}


/* ════════════════════════════════════════════════════════════
   15. INTRODUZIONE DI "ASÍ FUNCIONA"
   Negli originali: `padding: 80px 48px 0` — molto respiro sopra
   e ZERO sotto, così il testo resta incollato alla fascia
   turchese che segue. Riequilibrato: meno sopra, spazio sotto.
   È una scelta di progetto, non un errore degli originali.
   ════════════════════════════════════════════════════════════ */

.funciona-intro {
  padding-top: 56px;
  padding-bottom: 64px;
}

@media (max-width: 767px) {
  .funciona-intro { padding-top: 40px; padding-bottom: 44px; }
}


/* ════════════════════════════════════════════════════════════
   16. INIZIALI QUANDO MANCA LA FOTO
   Lo shortcode del team stampa le iniziali se il professionista
   non ha ancora l'immagine: la griglia resta intera invece di
   avere un buco beige mentre si aspetta lo scatto.
   ════════════════════════════════════════════════════════════ */

.equipo-card-iniziali-txt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-base);
  font-size: 44px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--negro);
  opacity: 0.4;
}


/* ════════════════════════════════════════════════════════════
   17. PAGINE LEGALI
   Testo lungo da leggere, non da scorrere: colonna stretta,
   interlinea generosa, gerarchia chiara. Nessun fronzolo.
   ════════════════════════════════════════════════════════════ */

.fisio-legal {
  max-width: 720px;      /* ~70 caratteri per riga, la misura che si legge meglio */
  margin: 0 auto;
  padding: 120px 24px 96px;
  font-family: var(--font-base);
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--gris-444, #444);
}

.fisio-legal h1 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--negro);
  margin: 0 0 40px;
}

.fisio-legal h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--negro);
  margin: 48px 0 14px;
  line-height: 1.3;
}

.fisio-legal h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--negro);
  margin: 32px 0 10px;
}

.fisio-legal p { margin: 0 0 18px; }

.fisio-legal ul { margin: 0 0 18px; padding-left: 22px; }
.fisio-legal li { margin-bottom: 10px; }
.fisio-legal li::marker { color: var(--turquesa); }

.fisio-legal strong { font-weight: 600; color: var(--negro); }

.fisio-legal a { color: var(--turquesa); text-decoration: underline; }
.fisio-legal a:hover { color: var(--amarillo); }

.fisio-legal-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 15.5px;
}

.fisio-legal-tabla th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gris-medio);
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--linea-suave);
}

.fisio-legal-tabla td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--linea-suave);
  vertical-align: top;
}

.fisio-legal-tabla td:first-child { font-weight: 500; color: var(--negro); }

@media (max-width: 767px) {
  .fisio-legal { padding: 92px 20px 64px; font-size: 16px; }
  .fisio-legal h2 { margin-top: 36px; }
  /* la tabella dell'aviso legal su schermo stretto va a colonna */
  .fisio-legal-tabla, .fisio-legal-tabla tbody,
  .fisio-legal-tabla tr, .fisio-legal-tabla td { display: block; width: 100%; }
  .fisio-legal-tabla td { border: 0; padding: 2px 0; }
  .fisio-legal-tabla tr { border-bottom: 1px solid var(--linea-suave); padding: 12px 0; }
  .fisio-legal-tabla td:first-child { font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--gris-medio); font-weight: 600; }
}


/* ════════════════════════════════════════════════════════════
   18. LINK ALLA SCHEDA GOOGLE SOTTO LA MAPPA
   Il clic dentro l'iframe porta all'indirizzo dell'edificio, non
   alla scheda del centro: lo decide Google e non è governabile.
   Questo link usa il CID della scheda ed è sempre corretto.
   ════════════════════════════════════════════════════════════ */

.contacto-map { position: relative; }

.contacto-map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--amarillo);
  text-decoration: none;
  border-bottom: 1px solid rgba(232,168,32,0.4);
  padding-bottom: 3px;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.contacto-map-link:hover {
  color: var(--turquesa);
  border-bottom-color: var(--turquesa);
}

@media (max-width: 767px) {
  /* bersaglio pieno da toccare */
  .contacto-map-link { min-height: 44px; margin-top: 10px; }
}


/* ════════════════════════════════════════════════════════════
   19. FOOTER TUTTO ALLINEATO A SINISTRA
   Kadence centra il contenuto delle aree widget, e il risultato
   era misto: titoli al centro, testo sotto il logo a sinistra.
   Qui vale sinistra per tutto il blocco.
   ════════════════════════════════════════════════════════════ */

.fisio-footer,
.fisio-footer .fisio-footer-col,
.fisio-footer .fisio-footer-tit,
.fisio-footer .fisio-footer-claim,
.fisio-footer .fisio-footer-nota,
.fisio-footer address,
.fisio-footer p,
.fisio-footer li {
  text-align: left;
}

/* Gli orari restano a due colonne — giorno a sinistra, ora a
   destra — perché lì il `justify-content` del flex governa la
   disposizione, non il `text-align`. */
.fisio-footer .fisio-orari li {
  justify-content: space-between;
}


/* ════════════════════════════════════════════════════════════
   20. WHATSAPP NELLA SEZIONE CONTATTI
   Il pulsante flottante si vede solo su telefono e tablet: qui
   il collegamento c'è anche da computer, accanto al numero.
   ════════════════════════════════════════════════════════════ */

.contacto-dato p a.contacto-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #666;
  text-decoration: none;
  vertical-align: middle;
  transition: opacity var(--t-fast);
}

.contacto-wa svg {
  width: 17px;
  height: 17px;
  fill: #25D366;                 /* solo l'icona porta il verde del marchio */
  flex-shrink: 0;
}

.contacto-wa:hover { opacity: 0.75; }

.contacto-wa:focus-visible {
  outline: 2px solid var(--turquesa);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (max-width: 767px) {
  /* su schermo stretto va a capo sotto il numero, con un bersaglio pieno */
  .contacto-dato p a.contacto-wa {
    display: flex;
    margin-left: 0;
    margin-top: 8px;
    min-height: 44px;
  }
}


/* ════════════════════════════════════════════════════════════
   21. TABELLE DELLA COOKIE POLICY SU SCHERMO STRETTO
   La tabella dei cookie analitici ha quattro colonne: a colonna
   singola, senza le intestazioni, le righe diventano illeggibili.
   Ripeto l'intestazione davanti a ogni valore con data-etichetta.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .fisio-legal-tabla thead { display: none; }

  .fisio-legal-tabla td[data-etichetta]::before {
    content: attr(data-etichetta);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gris-medio);
    margin-bottom: 2px;
  }

  /* qui la prima colonna è un valore come gli altri, non un'etichetta */
  .fisio-legal-tabla td[data-etichetta]:first-child {
    font-size: inherit;
    text-transform: none;
    letter-spacing: normal;
    color: var(--negro);
  }
}

/* il nome tecnico di un cookie non deve mandare la riga fuori pagina */
.fisio-legal-tabla td:first-child { word-break: break-word; }


/* ════════════════════════════════════════════════════════════
   22. IL TITOLO DELLA HERO NON SI SPEZZA A METÀ PAROLA
   «recuperación» a 88px chiede circa 530px, ma il contenitore
   ne lascia 492: Kadence ha overflow-wrap: break-word attivo e
   invece di mandare la parola a capo intera la tagliava dopo la
   «ó». Qui si vieta la spezzatura e si dà alla colonna lo spazio
   che la parola chiede davvero.
   ════════════════════════════════════════════════════════════ */

.hero-content h1,
.hero-content .hero-desc {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-wrap: balance;
}

@media (min-width: 1200px) {
  .hero-content { max-width: 700px; }
}

/* Fra 1024 e 1200 lo spazio è meno: lì il titolo rimpicciolisce
   invece di allargare la colonna, che spingerebbe il testo troppo
   verso il centro della fotografia. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .hero-content h1 { font-size: clamp(48px, 6vw, 72px); }
}