/* ============================================================
   Cynthia Chacón — cynthiachacon.com
   Palette brand completa · cinta multicolore · vetro sobrio
   Puro HTML+CSS · zero JavaScript · font self-hosted
   ============================================================ */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/fraunces-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/fraunces-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/fraunces-latin-600-italic.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/figtree-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/figtree-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/figtree-latin-700-normal.woff2') format('woff2')}

/* ---------- Tokens: paleta cromática brand ---------- */
:root{
  --fucsia:#F5109C;
  --fucsia-dark:#C2077A;
  --rosa-chiaro:#FF6DD7;
  --cipria:#F2B1C5;
  --pesca:#FFDDC2;
  --arancio:#FF541F;
  --verde:#008A36;
  --ink:#373E3E;
  --ink-soft:#5C6464;
  --paper:#FFFFFF;
  --blush:#FFF0F8;
  --rosa:var(--fucsia);
  --rosa-dark:var(--fucsia-dark);
  --linea:#F8CFE6;
  --display:'Fraunces',Georgia,serif;
  --body:'Figtree',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --maxw:1080px;
  --radius:22px;
  --vetro:rgba(255,255,255,.62);
  --vetro-bordo:rgba(255,255,255,.8);
  --cinta:linear-gradient(90deg,var(--fucsia) 0 23%,var(--rosa-chiaro) 23% 45%,var(--cipria) 45% 56.5%,var(--pesca) 56.5% 68%,var(--arancio) 68% 80%,var(--verde) 80% 100%);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:var(--body);font-size:1.0625rem;line-height:1.7;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius)}
a{color:var(--fucsia-dark);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--fucsia)}
:focus-visible{outline:3px solid var(--fucsia);outline-offset:2px;border-radius:6px}

/* ---------- Titoli 3D glossy ---------- */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(1.9rem,4.1vw,3rem);margin-bottom:.55em}
h2{font-size:clamp(1.9rem,4.4vw,2.9rem);margin-bottom:.55em}
h3{font-size:1.3rem;margin-bottom:.4em;color:var(--ink)}
h1{
  background:linear-gradient(180deg,var(--rosa-chiaro) 0%,var(--rosa-chiaro) 42%,var(--fucsia) 72%,var(--fucsia-dark) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(194,7,122,.2)) drop-shadow(0 12px 22px rgba(245,16,156,.22));
}
h2{
  background:linear-gradient(180deg,#525B5B 0%,var(--ink) 55%,#242A2A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(36,42,42,.18)) drop-shadow(0 8px 16px rgba(55,62,62,.2));
}
h1 em.marca{color:inherit;font-style:italic}
h2 em.marca{background:linear-gradient(180deg,var(--rosa-chiaro),var(--rosa-chiaro) 45%,var(--fucsia) 75%,var(--fucsia-dark));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
p{margin-bottom:1em}
p:last-child{margin-bottom:0}
em.marca{font-family:var(--display);font-style:italic;color:var(--fucsia)}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem}
.eyebrow::after{content:"";display:block;height:3px;width:38px;background:var(--arancio);border-radius:2px;margin-top:.45rem}
.centrato .eyebrow::after{margin-left:auto;margin-right:auto}
.lead{font-size:1.22rem;color:var(--ink-soft)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
section{padding:4.8rem 0}
section.blush{background:transparent}  /* sostituito dal sistema a blocchi */
.centrato{text-align:center}
.centrato h2,.centrato .lead{margin-left:auto;margin-right:auto;max-width:46ch}
.griglia-2{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center}
.griglia-3{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.griglia-4{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ---------- Cinta brand (firma cromatica, tutti i 5 colori) ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--vetro-bordo);box-shadow:0 8px 24px rgba(242,177,197,.18)}
.top::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--cinta)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:76px;flex-wrap:wrap;padding-top:5px}
footer.fondo{position:relative}
footer.fondo::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--cinta)}

/* ---------- Header ---------- */
.logo{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em;transition:color .3s ease}
.logo .ini{color:var(--fucsia);transition:color .3s ease}
.logo:hover{color:var(--fucsia)}
.logo:hover .ini{color:var(--ink)}
nav.menu ul{list-style:none;display:flex;gap:1.6rem;align-items:center}
nav.menu a{text-decoration:none;font-weight:500;font-size:.96rem;color:var(--ink)}
nav.menu a:hover,nav.menu a[aria-current="page"]{color:var(--fucsia-dark)}
nav.menu a.btn{color:var(--fucsia-dark)}
nav.menu a.btn:hover{color:#fff}
#nav-toggle{display:none}
.hamburger{display:none;cursor:pointer;padding:.5rem;border:1px solid var(--vetro-bordo);border-radius:12px;background:var(--vetro);backdrop-filter:blur(10px)}
.hamburger svg{display:block}
@media (max-width:820px){
  .hamburger{display:block}
  nav.menu{display:none;width:100%;padding:.5rem 0 1rem}
  nav.menu ul{flex-direction:column;align-items:flex-start;gap:.9rem}
  #nav-toggle:checked ~ nav.menu{display:block}
}

/* ---------- Bottoni: vetro smerigliato sobrio (2D/3D leggero) ---------- */
.btn{display:inline-block;
  background:rgba(255,109,215,.26);color:var(--fucsia-dark);
  font-weight:700;font-size:1.08rem;padding:1rem 2.1rem;border-radius:999px;text-decoration:none;
  border:1.5px solid rgba(255,109,215,.7);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 5px 14px rgba(255,109,215,.22);
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.btn:hover{background:rgba(245,16,156,.92);color:#fff;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px rgba(245,16,156,.3)}
.btn.ghost{background:rgba(255,255,255,.55);color:var(--ink);border:1.5px solid rgba(55,62,62,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 5px 14px rgba(55,62,62,.08)}
.btn.ghost:hover{background:rgba(255,255,255,.85);color:var(--verde);border-color:rgba(0,138,54,.5);transform:translateY(-1px)}
.btn.grande{font-size:1.18rem;padding:1.15rem 2.6rem}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.7rem}
.centrato .cta-row{justify-content:center}
.nota-cta{font-size:.86rem;color:var(--ink-soft);margin-top:.9rem}

/* ---------- Hero (pulita, niente nuvole) ---------- */
.hero{padding:6rem 0 5rem;background:linear-gradient(180deg,#FFF6EF 0%,#FFFFFF 100%)}
.hero .lead{max-width:56ch}

/* ---------- Titolo che si ricompone (home, zero JS) ----------
   Tricromia: "Transforma tu emprendimiento" fucsia ·
   "en un negocio" arancio · "rentable de verdad" verde  */
.hero h1{filter:none}
.hero h1 .w{display:inline-block;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .w.d1,.hero h1 .w.d2,.hero h1 .w.d3{
  background:linear-gradient(180deg,var(--rosa-chiaro) 0%,var(--fucsia) 55%,var(--fucsia-dark) 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 0 rgba(194,7,122,.22)) drop-shadow(0 10px 18px rgba(245,16,156,.25))}
.hero h1 .w.d4,.hero h1 .w.d5,.hero h1 .w.d6{
  background:linear-gradient(180deg,#FF8A5C 0%,var(--arancio) 55%,#D8430F 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 0 rgba(216,67,15,.22)) drop-shadow(0 10px 18px rgba(255,84,31,.25))}
.hero h1 .w.d7,.hero h1 .w.d8,.hero h1 .w.d9{
  background:linear-gradient(180deg,#2FB05E 0%,var(--verde) 58%,#00602A 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 0 rgba(0,96,42,.22)) drop-shadow(0 10px 18px rgba(0,138,54,.28))}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .w{opacity:0;animation:ricomponi .8s cubic-bezier(.2,.75,.25,1) forwards}
  .hero h1 .w.sx{transform:translateX(-70px)}
  .hero h1 .w.dx{transform:translateX(70px)}
  .hero h1 .w.d1{animation-delay:.05s}.hero h1 .w.d2{animation-delay:.13s}
  .hero h1 .w.d3{animation-delay:.21s}.hero h1 .w.d4{animation-delay:.29s}
  .hero h1 .w.d5{animation-delay:.37s}.hero h1 .w.d6{animation-delay:.45s}
  .hero h1 .w.d7{animation-delay:.53s}.hero h1 .w.d8{animation-delay:.61s}
  .hero h1 .w.d9{animation-delay:.69s}.hero h1 .w.d10{animation-delay:.77s}
}
@keyframes ricomponi{to{opacity:1;transform:translateX(0)}}

/* ---------- Card vetro con codice colore (tutta la palette) ---------- */
.card{background:var(--vetro);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--vetro-bordo);border-top:4px solid var(--rosa-chiaro);
  border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;gap:.4rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 26px rgba(242,177,197,.32);
  transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 16px 36px rgba(245,16,156,.2)}
.griglia-2 .card:nth-child(2n+1){border-top-color:var(--rosa-chiaro)}
.griglia-2 .card:nth-child(2n){border-top-color:var(--verde)}
.griglia-3 .card:nth-child(3n+1){border-top-color:var(--verde)}
.griglia-3 .card:nth-child(3n+2){border-top-color:var(--arancio)}
.griglia-3 .card:nth-child(3n){border-top-color:var(--rosa-chiaro)}
.griglia-4 .card:nth-child(4n+1){border-top-color:var(--rosa-chiaro)}
.griglia-4 .card:nth-child(4n+2){border-top-color:var(--arancio)}
.griglia-4 .card:nth-child(4n+3){border-top-color:var(--verde)}
.griglia-4 .card:nth-child(4n){border-top-color:var(--cipria)}
.card .btn{margin-top:auto;align-self:flex-start}
.card ul{padding-left:1.2rem;margin-bottom:1rem;color:var(--ink-soft)}
.card ul li{margin-bottom:.35rem}
.pill{align-self:flex-start;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--pesca);color:var(--ink);border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 8px rgba(255,221,194,.7);
  padding:.35rem .9rem;border-radius:999px;margin-bottom:.7rem}

/* ---------- Il registro (listino vetro) ---------- */
.registro{background:var(--vetro);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--vetro-bordo);border-top:4px solid var(--verde);border-radius:var(--radius);padding:2.2rem;max-width:820px;margin:0 auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 30px rgba(242,177,197,.35)}
.registro .voce{display:flex;align-items:baseline;gap:.6rem;padding:1.1rem 0;border-bottom:1px dashed var(--linea)}
.registro .voce:last-child{border-bottom:0}
.registro .voce-nome{font-family:var(--display);font-weight:600;font-size:1.18rem;white-space:nowrap}
.registro .voce-durata{font-size:.85rem;color:var(--ink-soft);white-space:nowrap}
.registro .puntini{flex:1;border-bottom:2px dotted var(--cipria);transform:translateY(-4px);min-width:2rem}
.registro .voce-prezzo{font-family:var(--display);font-weight:700;font-size:1.45rem;white-space:nowrap;color:var(--verde)}
.registro .voce-desc{font-size:.95rem;color:var(--ink-soft);margin:-.6rem 0 1rem;padding-right:1rem}
.registro .voce-desc a{font-weight:700}
@media (max-width:560px){.registro{padding:1.3rem}.registro .voce{flex-wrap:wrap}.registro .puntini{display:none}.registro .voce-prezzo{margin-left:auto}}

/* ---------- Prezzi (verde brand = soldi) ---------- */
.prezzo-vecchio{text-decoration:line-through;color:var(--ink-soft);font-weight:400;font-size:.95rem;margin-right:.4rem}
.prezzo{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--verde);
  text-shadow:0 1px 0 rgba(255,255,255,.8),0 3px 8px rgba(0,138,54,.18)}

/* ---------- Testimonianze ---------- */
.testi{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
blockquote{background:var(--vetro);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--vetro-bordo);border-left:4px solid var(--verde);border-radius:var(--radius);
  padding:1.4rem 1.5rem;font-size:.98rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 20px rgba(242,177,197,.3)}
.testi blockquote:nth-child(3n+2){border-left-color:var(--arancio)}
.testi blockquote:nth-child(3n){border-left-color:var(--rosa-chiaro)}
blockquote footer{margin-top:.8rem;font-weight:700;font-size:.88rem;color:var(--ink)}

/* ---------- FAQ vetro (details, zero JS) ---------- */
details{background:var(--vetro);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--vetro-bordo);border-radius:16px;padding:1rem 1.3rem;margin-bottom:.8rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 16px rgba(242,177,197,.28)}
details summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--display);font-size:1.5rem;color:var(--verde);flex-shrink:0}
details[open] summary::after{content:"–";color:var(--arancio)}
details p{margin-top:.7rem;color:var(--ink-soft)}

/* ---------- Tabelle ---------- */
.tab-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.75);border:1px solid var(--vetro-bordo);border-radius:16px;overflow:hidden;font-size:.95rem;box-shadow:0 8px 22px rgba(242,177,197,.3)}
th,td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--linea)}
th{background:linear-gradient(180deg,#FFEBDB,var(--pesca));font-weight:700;color:var(--ink)}
tr:last-child td{border-bottom:0}

/* ---------- Blocchi pagamento ---------- */
.paga{background:var(--vetro);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--vetro-bordo);border-top:4px solid var(--verde);border-radius:var(--radius);padding:2.2rem;max-width:640px;margin:0 auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 14px 34px rgba(0,138,54,.12)}
.paga dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:1rem 0}
.paga dt{font-weight:700}
.paga dd{color:var(--ink-soft)}

/* ---------- Numeri ---------- */
.dato{text-align:center}
.dato .num{font-family:var(--display);font-weight:700;font-size:2.7rem;
  background:linear-gradient(180deg,var(--rosa-chiaro),var(--rosa-chiaro) 45%,var(--fucsia) 75%,var(--fucsia-dark));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(194,7,122,.18)) drop-shadow(0 6px 12px rgba(245,16,156,.2))}
.dato .lbl{font-size:.9rem;color:var(--ink-soft)}

/* ---------- Breadcrumb ---------- */
.briciole{font-size:.85rem;color:var(--ink-soft);padding:1.2rem 0 0}
.briciole a{color:var(--ink-soft)}

/* ---------- Footer ---------- */
footer.fondo{background:var(--ink);color:#F4E3EC;padding:3.5rem 0 2.5rem}
footer.fondo a{color:#fff}
footer.fondo a:hover{color:var(--rosa-chiaro)}
footer.fondo .griglia-3{align-items:start}
footer.fondo h3{color:#fff;font-size:1.05rem}
footer.fondo ul{list-style:none}
footer.fondo li{margin-bottom:.45rem}
footer.fondo .firma{border-top:1px solid rgba(255,255,255,.15);margin-top:2.5rem;padding-top:1.5rem;font-size:.85rem;color:#D9BFCE;text-align:center}

/* ============================================================
   SISTEMA A BLOCCHI DI COLORE
   Ogni pagina = pila di bande della palette.
   Sequenza: 1 hero chiaro · 2 pesca · 3 VERDE · 4 bianco ·
             5 FUCSIA · 6 rosado · 7 cipria · 8 bianco
   I blocchi forti (verde, fucsia) invertono testi e bottoni.
   ============================================================ */

main>section:nth-of-type(2){background:var(--pesca)}
main>section:nth-of-type(3){background:var(--verde)}
main>section:nth-of-type(4){background:#FFFFFF}
main>section:nth-of-type(5){background:var(--fucsia)}
main>section:nth-of-type(6){background:var(--rosa-chiaro)}
main>section:nth-of-type(7){background:var(--cipria)}
main>section:nth-of-type(8){background:#FFFFFF}

/* ---- Blocchi forti (3 = verde, 5 = fucsia): inversione ---- */
main>section:nth-of-type(3) h2,
main>section:nth-of-type(5) h2{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 55%,#E8E8E8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.22)) drop-shadow(0 10px 20px rgba(0,0,0,.28))}
main>section:nth-of-type(3) h2 em.marca,
main>section:nth-of-type(5) h2 em.marca{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:var(--pesca);color:var(--pesca)}
main>section:nth-of-type(3) p,main>section:nth-of-type(5) p,
main>section:nth-of-type(3) .lead,main>section:nth-of-type(5) .lead,
main>section:nth-of-type(3) ul,main>section:nth-of-type(5) ul,
main>section:nth-of-type(3) .nota-cta,main>section:nth-of-type(5) .nota-cta{color:rgba(255,255,255,.93)}
main>section:nth-of-type(3) .eyebrow,main>section:nth-of-type(5) .eyebrow{color:#FFFFFF}
main>section:nth-of-type(3) .eyebrow::after,main>section:nth-of-type(5) .eyebrow::after{background:var(--pesca)}
main>section:nth-of-type(3) a,main>section:nth-of-type(5) a{color:#FFFFFF}
main>section:nth-of-type(3) .puntini,main>section:nth-of-type(5) .puntini{border-color:rgba(255,255,255,.5)}

/* bottoni diretti nei blocchi forti: vetro bianco, hover pieno bianco */
main>section:nth-of-type(3) .cta-row .btn{
  background:#FFFFFF;color:var(--verde);border-color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px rgba(0,0,0,.22)}
main>section:nth-of-type(5) .cta-row .btn{
  background:#FFFFFF;color:var(--fucsia-dark);border-color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px rgba(0,0,0,.22)}
main>section:nth-of-type(3) .cta-row .btn:hover,
main>section:nth-of-type(5) .cta-row .btn:hover{background:var(--pesca);transform:translateY(-1px)}

/* dentro il vetro (card, registro, blockquote, details, paga) i testi restano scuri */
main>section:nth-of-type(3) .card p,main>section:nth-of-type(5) .card p,
main>section:nth-of-type(3) .card ul,main>section:nth-of-type(5) .card ul{color:var(--ink-soft)}
main>section:nth-of-type(3) .card h3,main>section:nth-of-type(5) .card h3{color:var(--ink)}
main>section:nth-of-type(3) .card a.btn,main>section:nth-of-type(5) .card a.btn{color:var(--fucsia-dark)}
main>section:nth-of-type(3) .card a.btn:hover,main>section:nth-of-type(5) .card a.btn:hover{color:#fff}
main>section:nth-of-type(3) .registro p,main>section:nth-of-type(5) .registro p,
main>section:nth-of-type(3) .registro .voce-desc,main>section:nth-of-type(5) .registro .voce-desc{color:var(--ink-soft)}
main>section:nth-of-type(3) .registro a,main>section:nth-of-type(5) .registro a{color:var(--fucsia-dark)}
main>section:nth-of-type(3) .paga dl dd,main>section:nth-of-type(5) .paga dl dd{color:var(--ink-soft)}
main>section:nth-of-type(3) .paga a,main>section:nth-of-type(5) .paga a{color:var(--fucsia-dark)}
main>section:nth-of-type(3) .paga ul,main>section:nth-of-type(5) .paga ul,
main>section:nth-of-type(3) .paga p,main>section:nth-of-type(5) .paga p{color:var(--ink)}
main>section:nth-of-type(3) blockquote p,main>section:nth-of-type(5) blockquote p{color:var(--ink)}

/* ---- Blocchi tenui (2 pesca, 6 rosado, 7 cipria): testo antracite ---- */
main>section:nth-of-type(6) a,main>section:nth-of-type(7) a{color:var(--ink);text-decoration-color:var(--ink)}
main>section:nth-of-type(6) .eyebrow::after{background:#FFFFFF}
main>section:nth-of-type(6) h2 em.marca,main>section:nth-of-type(7) h2 em.marca{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:var(--ink);color:var(--ink)}
main>section:nth-of-type(6) .prezzo,main>section:nth-of-type(7) .prezzo{color:#005E25}
main>section:nth-of-type(2) .btn.ghost,main>section:nth-of-type(6) .btn.ghost,main>section:nth-of-type(7) .btn.ghost{background:rgba(255,255,255,.7)}

/* ============================================================
   POLIZZA CONTRASTO BOTTONI
   Regola: un bottone non può mai essere del colore del suo
   fondo o di un colore simile.
   - Blocchi chiari/bianchi (hero, 4, 8): bottoni rosa/fucsia (default)
   - Blocchi tenui rosa-caldi (2 pesca, 6 rosado, 7 cipria): bottoni VERDI
   - Blocchi forti (3 verde, 5 fucsia): bottoni vetro BIANCO
   - Dentro i contenitori di vetro (card, registro, paga): default,
     perché il fondo lì è sempre bianco traslucido.
   ============================================================ */

/* ---- Blocchi tenui: primari verdi, ghost bianchi ---- */
main>section:nth-of-type(2) .btn,
main>section:nth-of-type(6) .btn,
main>section:nth-of-type(7) .btn{
  background:rgba(0,138,54,.92);color:#FFFFFF;border:1.5px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px rgba(0,96,42,.28)}
main>section:nth-of-type(2) .btn:hover,
main>section:nth-of-type(6) .btn:hover,
main>section:nth-of-type(7) .btn:hover{background:#00602A;color:#FFFFFF;transform:translateY(-1px)}
main>section:nth-of-type(2) .btn.ghost,
main>section:nth-of-type(6) .btn.ghost,
main>section:nth-of-type(7) .btn.ghost{
  background:rgba(255,255,255,.8);color:var(--ink);border:1.5px solid rgba(55,62,62,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px rgba(55,62,62,.12)}
main>section:nth-of-type(2) .btn.ghost:hover,
main>section:nth-of-type(6) .btn.ghost:hover,
main>section:nth-of-type(7) .btn.ghost:hover{background:#FFFFFF;color:var(--verde);border-color:rgba(0,138,54,.5)}

/* ---- Blocchi forti: qualunque bottone diretto diventa vetro bianco ---- */
main>section:nth-of-type(3) .btn{
  background:#FFFFFF;color:var(--verde);border:1.5px solid #FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px rgba(0,0,0,.22)}
main>section:nth-of-type(5) .btn{
  background:#FFFFFF;color:var(--fucsia-dark);border:1.5px solid #FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px rgba(0,0,0,.22)}
main>section:nth-of-type(3) .btn:hover,
main>section:nth-of-type(5) .btn:hover{background:var(--pesca);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 26px rgba(0,0,0,.28)}

/* ---- Dentro il vetro il fondo è bianco: si torna al default ---- */
main>section:nth-of-type(2) .card .btn,main>section:nth-of-type(6) .card .btn,main>section:nth-of-type(7) .card .btn,
main>section:nth-of-type(3) .card .btn,main>section:nth-of-type(5) .card .btn,
main>section:nth-of-type(3) .registro .btn,main>section:nth-of-type(5) .registro .btn,
main>section:nth-of-type(2) .paga .btn,main>section:nth-of-type(3) .paga .btn,
main>section:nth-of-type(5) .paga .btn,main>section:nth-of-type(6) .paga .btn{
  background:rgba(255,109,215,.26);color:var(--fucsia-dark);border:1.5px solid rgba(255,109,215,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 5px 14px rgba(255,109,215,.22)}
main>section:nth-of-type(2) .card .btn:hover,main>section:nth-of-type(6) .card .btn:hover,main>section:nth-of-type(7) .card .btn:hover,
main>section:nth-of-type(3) .card .btn:hover,main>section:nth-of-type(5) .card .btn:hover,
main>section:nth-of-type(3) .registro .btn:hover,main>section:nth-of-type(5) .registro .btn:hover,
main>section:nth-of-type(2) .paga .btn:hover,main>section:nth-of-type(3) .paga .btn:hover,
main>section:nth-of-type(5) .paga .btn:hover,main>section:nth-of-type(6) .paga .btn:hover{
  background:rgba(245,16,156,.92);color:#FFFFFF}
main>section:nth-of-type(2) .card .btn.ghost,main>section:nth-of-type(6) .card .btn.ghost,main>section:nth-of-type(7) .card .btn.ghost,
main>section:nth-of-type(3) .card .btn.ghost,main>section:nth-of-type(5) .card .btn.ghost{
  background:rgba(255,255,255,.55);color:var(--ink);border:1.5px solid rgba(55,62,62,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 5px 14px rgba(55,62,62,.08)}
main>section:nth-of-type(2) .card .btn.ghost:hover,main>section:nth-of-type(6) .card .btn.ghost:hover,main>section:nth-of-type(7) .card .btn.ghost:hover,
main>section:nth-of-type(3) .card .btn.ghost:hover,main>section:nth-of-type(5) .card .btn.ghost:hover{
  background:rgba(255,255,255,.9);color:var(--verde);border-color:rgba(0,138,54,.5)}

/* ============================================================
   IMMAGINI: cornici, ritratti, bande
   ============================================================ */
.hero-grid{align-items:center;gap:2.5rem}
.hero-grid>div{min-width:0}
.hero-foto{width:100%;border-radius:26px;border:4px solid rgba(255,255,255,.9);
  box-shadow:0 18px 44px rgba(55,62,62,.26);object-fit:cover}
.hero-foto:not(.ritratto){aspect-ratio:4/5;object-position:62% 20%}
.hero-foto.ritratto{max-width:420px;justify-self:center;aspect-ratio:auto}
.hero-foto.quadra{max-width:380px;border-radius:50%}
.badge-foto{max-width:280px;justify-self:center;border-radius:0;border:0;box-shadow:none;
  filter:drop-shadow(0 14px 28px rgba(55,62,62,.28))}
.foto{border-radius:var(--radius);border:4px solid rgba(255,255,255,.9);
  box-shadow:0 14px 34px rgba(55,62,62,.22);margin:0 0 1.2rem}
.foto.ritratto{max-width:380px}
.banda{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 30%;
  border-radius:var(--radius);border:4px solid rgba(255,255,255,.9);
  box-shadow:0 16px 40px rgba(55,62,62,.24);margin-top:2rem}
@media (max-width:820px){
  .hero-grid{gap:1.6rem}
  .hero-foto,.hero-foto.ritratto{max-width:min(420px,100%)}
}

/* ============================================================
   FOOTER: vetro scuro professionale + pagamenti
   ============================================================ */
footer.fondo{background:
  radial-gradient(700px 300px at 15% 0%, rgba(255,255,255,.05), transparent 60%),
  linear-gradient(180deg,#454D4D 0%,#2F3535 55%,#262B2B 100%)}
.f-testa{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2.2rem}
.logo-f{font-size:1.9rem;color:#FFFFFF;margin:0}
.logo-f .ini{color:var(--rosa-chiaro)}
.f-claim{font-family:var(--display);font-size:1.15rem;color:#D9BFCE;margin:0}
.f-claim em.marca{color:var(--rosa-chiaro)}
.f-panel{background:rgba(255,255,255,.07);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:1.6rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
footer.fondo .f-panel h3{position:relative;padding-bottom:.55rem;margin-bottom:.8rem;letter-spacing:.02em}
footer.fondo .f-panel h3::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:34px;border-radius:2px;background:var(--fucsia)}
footer.fondo .f-panel:nth-child(2) h3::after{background:var(--arancio)}
footer.fondo .f-panel:nth-child(3) h3::after{background:var(--verde)}
footer.fondo .f-panel p{color:#CBB6C3;font-size:.95rem}
footer.fondo .f-panel a{text-decoration:none;font-size:.95rem}
footer.fondo .f-panel a:hover{text-decoration:underline}
.f-pagos{margin-top:2.2rem;background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:1.2rem 1.6rem;
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.f-pagos-t{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#D9BFCE;margin:0}
.f-chips{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;height:34px;padding:.3rem .65rem;border-radius:10px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.28)}
.chip[title="Visa"],.chip[title="Mastercard"],.chip[title="American Express"],.chip[title="PayPal"]{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.9)}
.chip svg{display:block}

/* ---- Pagos: loghi ufficiali + Cloudflare ---- */
.f-pagos-t{display:inline-flex;align-items:center;gap:.45rem}
.f-pagos-t .lucchetto{flex-shrink:0}
.chip img{display:block;width:auto}
.chip{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.9)}
.chip-txt{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#F4E3EC;
  font-size:.72rem;font-weight:700;gap:.4rem;display:inline-flex;align-items:center;
  height:34px;padding:.3rem .65rem;border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.28)}
.chip-cf{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;
  height:36px;padding:.35rem .8rem;border-radius:10px;font-size:.74rem;color:#F4E3EC;
  background:rgba(244,129,32,.12);border:1px solid rgba(244,129,32,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.3);white-space:nowrap}
.chip-cf strong{color:#FAAD3F;font-weight:800;margin-left:.15rem}
@media (max-width:820px){.chip-cf{margin-left:0}}

/* ---- Icone datos (sobre-mi) ---- */
.d-ico{width:62px;height:62px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.95);margin-bottom:.7rem;
  box-shadow:inset 0 1px 0 #fff,0 10px 22px rgba(55,62,62,.18)}
.ico-verde{color:var(--verde)}
.ico-fucsia{color:var(--fucsia)}
.ico-arancio{color:var(--arancio)}
.ico-rosado{color:var(--fucsia-dark)}
.dato .num{font-size:2.3rem}
/* ---- Chip pagamenti: i loghi non possono più traboccare ---- */
.chip{flex-shrink:0;overflow:hidden}
.chip img{width:auto;max-height:20px}

/* ---- Footer: logo C.C.C. centrato con alone ---- */
.f-testa{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.7rem}
.f-ccc{border-radius:0;border:0;box-shadow:none;
  filter:drop-shadow(0 0 14px rgba(255,109,215,.7)) drop-shadow(0 0 36px rgba(245,16,156,.4))}
/* ---- Riga sicurezza centrata (Cloudflare + SSL) ---- */
.f-sicurezza{margin-top:1.1rem;display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}
.chip-cf{margin-left:0}
.chip-ssl{display:inline-flex;align-items:center;gap:.5rem;height:36px;padding:.35rem .8rem;border-radius:10px;
  font-size:.74rem;color:#DFFBEA;white-space:nowrap;
  background:rgba(57,255,136,.09);border:1px solid rgba(57,255,136,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 14px rgba(57,255,136,.25),0 4px 12px rgba(0,0,0,.3)}
.chip-ssl strong{color:#39FF88;font-weight:800;text-shadow:0 0 8px rgba(57,255,136,.6)}
@media (max-width:820px){.chip-cf,.chip-ssl{white-space:normal;height:auto;min-height:36px}}
