/* ================================================================
   dc-custom.css - La Penna del Web Academy
   Creato il 22/09/2026. Due cose:
   1) .u = sottolineatura disegnata sotto la parola marcata. Le regole e i tracciati
      SVG vengono dal Global CSS di Elementor (Custom Code #126), che resta intatto.
      Qui il selettore accetta sia <u> sia lo <span> che produce Ctrl+U in Gutenberg.
   2) .dc-spark = sparkle decorativo come ::after, da mettere sul titolo che lo vuole.
   ================================================================ */

/* ---------- 1. SOTTOLINEATURE ---------- */
/* Uso: sul blocco metti la classe  u  (piu' una variante) e nel testo sottolinea
   la parola con Ctrl+U. Varianti: u3 u4 u5 u6, piu' i colori u5white u5blu u5violet u6white.
   Il tratto e' lo sfondo della parola, non un ::after: cosi' la frase puo' andare a capo
   e ogni riga si porta dietro il suo tratto (box-decoration-break: clone). Prima era
   su una riga sola e sul telefono faceva uscire la sezione dallo schermo.
   Con  u-nowrap  si torna al comportamento su una riga sola. */
.u :is(u, span[style*="underline"]){text-decoration:none;background-image:var(--dc-u-img);background-repeat:no-repeat;background-position:left bottom;background-size:100% var(--dc-u-h,15px);padding-bottom:var(--dc-u-pad,15px);-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:dc-u-reveal 1s ease-in-out .4s both;}
.u-nowrap :is(u, span[style*="underline"]){text-wrap:nowrap;}
.u{--dc-u-img:url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='187' height='15' viewBox='0 0 187 15' fill='none'%3E%3Cpath d='M3 9.06186C15.0766 9.06186 26.2786 5.2282 38.1907 4.69092C43.1673 4.46646 44.3864 5.66909 44.9789 8.62232C45.1606 9.5277 45.3548 12.0142 47.8941 11.6258C54.6791 10.588 61.1958 8.93191 67.9674 7.84093C77.4594 6.31166 87.2554 5.16394 96.9112 4.03162C101.249 3.52294 105.653 2.00289 109.072 4.0072C111.818 5.61722 115.433 7.50247 118.775 8.62232C120.027 9.04184 121.23 9.75425 122.357 10.2828C125.471 11.7435 135.434 9.07675 138.265 8.72C148.297 7.45617 174.27 4.76407 184.5 4.69092' stroke='%23FF5097' stroke-width='4.89333' stroke-linecap='round'/%3E%3C/svg%3E%0A");--dc-u-h:15px;--dc-u-pad:15px;}
.u.u3{--dc-u-img:url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='187' height='18' viewBox='0 0 187 18' fill='none'%3E%3Cpath d='M2.85278 10.9965C8.29283 10.1325 14.2442 5.79183 19.8935 4.48686C22.8031 3.81475 25.0739 3.09717 28.1835 3.09717C31.4541 3.09717 31.7117 5.38093 34.1132 7.77824C43.6043 17.2525 58.4563 13.9682 69.2884 11.7279C76.587 10.2184 86.2529 5.38701 92.5467 9.02164C96.6351 11.3827 104.223 14.6567 108.551 14.9461C115.738 15.4267 123.22 14.8869 130.313 13.6296C135.882 12.6422 140.435 9.67992 146.087 9.67992C152.058 9.67992 157.785 9.73374 163.703 10.7039C166.356 11.1389 182.932 12.8978 184.198 9.67992' stroke='%238343FF' stroke-width='5.00954' stroke-linecap='round'/%3E%3C/svg%3E");--dc-u-h:25px;--dc-u-pad:calc(25px - 0.3em);}
.u.u4{--dc-u-img:url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='220' height='25' viewBox='0 0 220 25' fill='none'%3E%3Cpath d='M3 8.38029C13.7398 8.38029 24.5203 8.74277 35.248 8.32208C50.3491 7.72988 65.3834 5.84028 80.4767 5.3534C102.47 4.64394 124.503 5.87207 146.428 3.37428C155.987 2.28524 165.238 3.78303 174.66 5.17877C186.97 7.00255 199.62 6.28475 212.03 6.28475C212.716 6.28475 218.484 6.63024 215.697 5.23698' stroke='%23FF5097' stroke-width='5.13729' stroke-linecap='round'/%3E%3Cpath d='M69.0093 21.9998C80.5466 21.9998 92.0732 18.6876 103.702 18.0416C125.256 16.8441 147.197 19.8924 168.431 15.2475C176.454 13.4926 185.429 13.6177 193.694 13.6177' stroke='%23FF5097' stroke-width='5.13729' stroke-linecap='round'/%3E%3C/svg%3E");--dc-u-h:15px;--dc-u-pad:5px;}
.u.u5{--dc-u-img:url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' %20width%3D%27509%27%20height%3D%2725%27%20viewBox%3D%270%200%20509%2025%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M2.5686%208.41074C27.8769%208.41074%2053.281%208.80436%2078.5608%208.34753C114.146%207.70447%20149.575%205.65258%20185.142%205.12388C236.969%204.35349%20288.89%205.6871%20340.556%202.97478C363.082%201.79221%20384.882%203.41864%20407.083%204.93426C436.093%206.91468%20465.902%206.13522%20495.146%206.13522C496.764%206.13522%20510.355%206.51038%20503.788%204.99747%27%20stroke%3D%27%23FF5097%27%20stroke-width%3D%275.13729%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M158.569%2021.5684C185.681%2021.5684%20212.767%2018.4079%20240.094%2017.7915C290.745%2016.6489%20342.305%2019.5575%20392.203%2015.1254C411.056%2013.4508%20432.147%2013.5702%20451.569%2013.5702%27%20stroke%3D%27%23FF5097%27%20stroke-width%3D%275.13729%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");--dc-u-h:15px;--dc-u-pad:5px;}
.u.u5white{--dc-u-img:url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' %20width%3D%27509%27%20height%3D%2725%27%20viewBox%3D%270%200%20509%2025%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M2.5686%208.41074C27.8769%208.41074%2053.281%208.80436%2078.5608%208.34753C114.146%207.70447%20149.575%205.65258%20185.142%205.12388C236.969%204.35349%20288.89%205.6871%20340.556%202.97478C363.082%201.79221%20384.882%203.41864%20407.083%204.93426C436.093%206.91468%20465.902%206.13522%20495.146%206.13522C496.764%206.13522%20510.355%206.51038%20503.788%204.99747%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%275.13729%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M158.569%2021.5684C185.681%2021.5684%20212.767%2018.4079%20240.094%2017.7915C290.745%2016.6489%20342.305%2019.5575%20392.203%2015.1254C411.056%2013.4508%20432.147%2013.5702%20451.569%2013.5702%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%275.13729%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");--dc-u-h:15px;--dc-u-pad:5px;}
.u.u5blu{--dc-u-img:url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' %20width%3D%27509%27%20height%3D%2725%27%20viewBox%3D%270%200%20509%2025%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M2.5686%208.41074C27.8769%208.41074%2053.281%208.80436%2078.5608%208.34753C114.146%207.70447%20149.575%205.65258%20185.142%205.12388C236.969%204.35349%20288.89%205.6871%20340.556%202.97478C363.082%201.79221%20384.882%203.41864%20407.083%204.93426C436.093%206.91468%20465.902%206.13522%20495.146%206.13522C496.764%206.13522%20510.355%206.51038%20503.788%204.99747%27%20stroke%3D%27%2312245b%27%20stroke-width%3D%275.13729%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M158.569%2021.5684C185.681%2021.5684%20212.767%2018.4079%20240.094%2017.7915C290.745%2016.6489%20342.305%2019.5575%20392.203%2015.1254C411.056%2013.4508%20432.147%2013.5702%20451.569%2013.5702%27%20stroke%3D%27%2312245b%27%20stroke-width%3D%275.13729%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");--dc-u-h:15px;--dc-u-pad:5px;}
.u.u5violet{--dc-u-img:url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' %20width%3D%27509%27%20height%3D%2725%27%20viewBox%3D%270%200%20509%2025%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M2.5686%208.41074C27.8769%208.41074%2053.281%208.80436%2078.5608%208.34753C114.146%207.70447%20149.575%205.65258%20185.142%205.12388C236.969%204.35349%20288.89%205.6871%20340.556%202.97478C363.082%201.79221%20384.882%203.41864%20407.083%204.93426C436.093%206.91468%20465.902%206.13522%20495.146%206.13522C496.764%206.13522%20510.355%206.51038%20503.788%204.99747%27%20stroke%3D%27%239144f2%27%20stroke-width%3D%275.13729%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M158.569%2021.5684C185.681%2021.5684%20212.767%2018.4079%20240.094%2017.7915C290.745%2016.6489%20342.305%2019.5575%20392.203%2015.1254C411.056%2013.4508%20432.147%2013.5702%20451.569%2013.5702%27%20stroke%3D%27%239144f2%27%20stroke-width%3D%275.13729%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");--dc-u-h:15px;--dc-u-pad:5px;}
.u.u6{--dc-u-img:url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%27none%27%20width%3D%27367%27%20height%3D%2714%27%20viewBox%3D%270%200%20367%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M2.5686%2010.5684C35.9727%2010.5684%2069.3458%207.40791%20103.015%206.79146C165.421%205.64887%20228.947%208.55746%20290.425%204.12541C313.653%202.45083%20339.64%202.57022%20363.569%202.57022%27%20stroke%3D%27%23FF5097%27%20stroke-width%3D%275.13729%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");--dc-u-h:15px;--dc-u-pad:5px;}
.u.u6white{--dc-u-img:url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%27none%27%20width%3D%27367%27%20height%3D%2714%27%20viewBox%3D%270%200%20367%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M2.5686%2010.5684C35.9727%2010.5684%2069.3458%207.40791%20103.015%206.79146C165.421%205.64887%20228.947%208.55746%20290.425%204.12541C313.653%202.45083%20339.64%202.57022%20363.569%202.57022%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%275.13729%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");--dc-u-h:15px;--dc-u-pad:5px;}
/* In Elementor il tratto compariva solo quando l'animazione aggiungeva .animated;
   qui si rivela da solo al caricamento, allargando lo sfondo da 0 a tutta la parola. */
@keyframes dc-u-reveal{from{background-size:0 var(--dc-u-h,15px);}to{background-size:100% var(--dc-u-h,15px);}}
/* ---------- 2. SPARKLE ---------- */
/* Uso: classe  dc-spark  sul titolo, piu' l'angolo: dc-spark-tr (in alto a destra),
   dc-spark-tl, dc-spark-br, dc-spark-bl. Dimensione rapida: dc-spark-sm o dc-spark-lg.
   Forma alternativa: dc-spark-quote (il tratto piu' sottile delle testimonianze).
   La regolazione fine la scrive il pannello "Classi DC" dell'editor come variabili
   sul blocco: --dc-spark-x (sposta in orizzontale), --dc-spark-y (in verticale),
   --dc-spark-rot (rotazione), --dc-spark-size (dimensione esatta).
   --dc-spark-scala rimpicciolisce tutto insieme su tablet e telefono. */
.dc-spark{position:relative;}
.dc-spark::after{content:"";position:absolute;width:calc(var(--dc-spark-size,85px) * var(--dc-spark-scala,1));aspect-ratio:85/94;background:url("https://lapennadelweb.academy/wp-content/uploads/2026/09/dc-sparkle-hero.svg") no-repeat center/contain;transform:translate(calc(var(--dc-spark-x,0px) * var(--dc-spark-scala,1)),calc(var(--dc-spark-y,0px) * var(--dc-spark-scala,1))) rotate(var(--dc-spark-rot,0deg)) scaleX(var(--dc-spark-lato,1));transform-origin:center;pointer-events:none;z-index:2;}
.dc-spark-quote::after{background-image:url("https://lapennadelweb.academy/wp-content/uploads/2026/09/dc-sparkle-quote.svg");aspect-ratio:91/77;}
.dc-spark-sm{--dc-spark-size:56px;}
.dc-spark-lg{--dc-spark-size:120px;}
.dc-spark-tr::after{top:-.35em;right:-.6em;}
.dc-spark-tl::after{top:-.35em;left:-.6em;}
.dc-spark-br::after{bottom:-.5em;right:-.6em;}
.dc-spark-bl::after{bottom:-.5em;left:-.6em;}
/* i due angoli di sinistra usano il disegno specchiato */
.dc-spark-tl,.dc-spark-bl{--dc-spark-lato:-1;}
/* Il titolo centrato non ha spazio ai lati: cosi' lo sparkle resta dentro il riquadro. */
.dc-spark-in::after{right:0;left:auto;}
@media (max-width:1024px){.dc-spark{--dc-spark-scala:.75;}}
@media (max-width:767px){.dc-spark{--dc-spark-scala:.56;}}

/* ---------- 3. SFONDI DECORATIVI ---------- */
/* Il colore lo imposti dall'editor (Blocco > Colore > Sfondo). Il disegno lo aggiunge
   la classe  dc-bg  piu' il numero del tracciato: dc-bg-1, dc-bg-2, dc-bg-3.
   Come nell'originale il disegno non e' pieno: sfuma da destra verso sinistra, quindi
   resta leggibile su qualsiasi colore. Si regola con dc-bg-soft / dc-bg-strong,
   si sposta con dc-bg-tl / dc-bg-br / dc-bg-bl, si allarga con dc-bg-cover. */
.dc-bg{position:relative;isolation:isolate;}
.dc-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background-image:var(--dc-bg-img,none);background-repeat:no-repeat;background-position:var(--dc-bg-pos,top right);background-size:var(--dc-bg-size,49% auto);opacity:var(--dc-bg-fade,.14);-webkit-mask-image:var(--dc-bg-mask,linear-gradient(90deg,transparent 0%,#000 100%));mask-image:var(--dc-bg-mask,linear-gradient(90deg,transparent 0%,#000 100%));}
/* tracciati */
.dc-bg-1{--dc-bg-img:url("https://lapennadelweb.academy/wp-content/uploads/2026/07/Vector2.png");}
.dc-bg-2{--dc-bg-img:url("https://lapennadelweb.academy/wp-content/uploads/2026/07/Vector3.png");}
.dc-bg-3{--dc-bg-img:url("https://lapennadelweb.academy/wp-content/uploads/2026/07/Vector-5.png");}
/* posizione: di default in alto a destra */
.dc-bg-tl{--dc-bg-pos:top left;--dc-bg-mask:linear-gradient(270deg,transparent 0%,#000 100%);}
.dc-bg-br{--dc-bg-pos:bottom right;}
.dc-bg-bl{--dc-bg-pos:bottom left;--dc-bg-mask:linear-gradient(270deg,transparent 0%,#000 100%);}
.dc-bg-cover{--dc-bg-size:cover;--dc-bg-pos:center;}
.dc-bg-wide{--dc-bg-size:70% auto;}
/* intensita' */
.dc-bg-soft{--dc-bg-fade:.07;}
.dc-bg-strong{--dc-bg-fade:.28;}
.dc-bg-flat{--dc-bg-mask:none;}
/* toglie un disegno gia' scritto nel CSS di una sezione, per gestirla solo dall'editor */
.dc-bg-off{background-image:none !important;}
@media (max-width:767px){.dc-bg::before{--dc-bg-size:80% auto;}}