/* Klelia, sezione «La nostra idea di scarpa per donna» (home sopra le FAQ, shop sopra il footer). Marketipo, ott 2026.
   Due radici, ognuna è l'uscita di un widget «heading» sostituita dal PHP:
     .kv-idea-testa  titolo (occhiello, H2, foto con didascalia solo nelle pagine «piene»)
     .kv-idea        testo (--curata: attacco e principi con occhiello; --generica: qualsiasi altro testo;
                     --breve: ricerca, filtri, pagine successive: visibile l'attacco, il resto nel «Leggi di più»)
   Il contenitore Elementor della sezione (quello che ha per figlio una delle due radici) e il contenitore «content
   collapse» di Porto si toccano solo con :has() su queste radici: se il PHP non sostituisce nulla, nessuna regola di
   questo file si applica. Se un giorno il contenitore perde il «content collapse» di Porto, l'impaginato resta: solo
   le regole che lo neutralizzano parlano di .content-collapse-wrap e .btn-read-more-wrap.
   Impaginato: una colonna fino a 767px; da 768px titolo e foto a sinistra, testo a destra. Da 992px la griglia è
   quella delle FAQ che stanno subito sotto in home (380 + 80 da 1160px, 330 + 56 da 992 a 1159px, contenitori
   1120 e 940 del sito): la colonna di destra e i suoi filetti partono dove partono le domande. */

.kv-idea,
.kv-idea-testa {
  --ki-vino: #632a48;
  --ki-vino-su: #4e1f38;
  --ki-lampone: #a8447a;
  --ki-rasp: #bd528b;
  --ki-melanzana: #3b3644;
  --ki-testo: #222529;
  --ki-soft: #585065;
  --ki-grigio: #6b6275;
  --ki-rosa: #fdf3fc;
  --ki-foto: #efe9ed;
  --ki-filetto: #eadde5;
  --ki-ease: cubic-bezier(.22, .7, .2, 1);
  display: block;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ki-soft);
  text-align: left;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.kv-idea *,
.kv-idea *::before,
.kv-idea *::after,
.kv-idea-testa *,
.kv-idea-testa *::before,
.kv-idea-testa *::after { box-sizing: border-box }
/* neutralizza h2/p/dl/dt/dd/figure del tema (Porto, Bootstrap) dentro le due radici */
.kv-idea :is(p, dl, dt, dd, figure, figcaption, details, summary),
.kv-idea-testa :is(p, h2, figure, figcaption) {
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: none; text-align: inherit; color: inherit;
}
.kv-idea :is(em, i), .kv-idea-testa :is(em, i) { font-style: italic }
.kv-idea svg, .kv-idea-testa svg {
  flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.kv-idea :focus-visible, .kv-idea-testa :focus-visible { outline: 2px solid var(--ki-vino); outline-offset: 3px; border-radius: 4px }
/* theme.css ha body a{outline:none!important}: serve !important per riavere il fuoco sui link */
.kv-idea a:focus-visible, .kv-idea-testa a:focus-visible { outline: 2px solid var(--ki-vino) !important; outline-offset: 3px }
/* il fuoco non finisce sotto la testata ferma né sotto il pulsante WhatsApp (150px dal fondo, alto 56px) */
.kv-idea a, .kv-idea summary, .kv-idea-testa a { scroll-margin: calc(var(--kh-altezza-ferma, 72px) + 32px) 0 230px }

/* ───────── contenitori Elementor e Porto ───────── */

/* sezione con il titolo nuovo, il testo nuovo o tutti e due: respiro sopra e sotto, tutto a sinistra.
   Il contenitore esterno tiene i suoi filetti (home: sotto; shop: sopra) */
.e-con-inner:has(> .e-con .kv-idea, > .elementor-widget .kv-idea-testa) {
  padding-block: 96px 104px;
  row-gap: 0;
  text-align: left;
}
/* widget titolo: via i 60px/28px e il centrato di Elementor */
.e-con-inner:has(> .e-con .kv-idea, > .elementor-widget .kv-idea-testa) > .elementor-widget-heading {
  margin: 0 0 40px;
  text-align: left;
}
/* content collapse di Porto: niente altezza massima, niente velo bianco, niente «Leggi di più», sia con il
   contenitore interno «boxed» (> .e-con-inner) sia a larghezza piena (.e-con-full, senza .e-con-inner).
   Le regole di Porto stanno in un <link> stampato DOPO questo foglio: qui vince la specificità, non l'ordine */
.e-con-inner:has(> .e-con .kv-idea) > .e-con:has(.kv-idea) {
  --margin-top: 0px;
  --margin-bottom: 0px;
  margin: 0;
  padding: 0;
  max-height: none;
  overflow: visible;
}
.e-con-inner:has(> .e-con .kv-idea) > .e-con:has(.kv-idea) > .e-con-inner { padding: 0; gap: 0; max-height: none; overflow: visible }
.e-con-inner:has(> .e-con .kv-idea) > .e-con:has(.kv-idea)::after,
.e-con-inner:has(> .e-con .kv-idea) > .e-con:has(.kv-idea) > .e-con-inner::after { content: none; display: none }
.e-con-inner:has(> .e-con .kv-idea) > .content-collapse-wrap .btn-read-more-wrap { display: none !important }
.e-con-inner:has(> .e-con .kv-idea) > .e-con .elementor-widget:has(> .kv-idea) {
  width: 100%;
  margin: 0;
  text-align: left;
}
/* titolo del cliente non riconosciuto (il testo sì): stessa voce, senza occhiello né foto, una colonna di lettura */
.e-con-inner:has(> .e-con .kv-idea) > .elementor-widget-heading .elementor-heading-title {
  max-width: 20em;
  margin: 0;
  font-family: inherit;
  font-size: 44px;
  line-height: 50px;
  font-weight: 300;
  letter-spacing: -.015em;
  text-transform: none;
  text-align: left;
  color: #222529;
  text-wrap: balance;
}
.e-con-inner:has(> .e-con .kv-idea):not(:has(> .elementor-widget .kv-idea-testa)) > .e-con:has(.kv-idea) {
  width: 100%;
  max-width: 720px;
}
/* titolo nuovo ma testo rimasto quello di Porto (widget del testo vuoto, che Elementor non stampa, o in un widget che
   il filtro non riconosce): niente foto accanto a un testo che non è nostro, il «content collapse» resta di Porto.
   Se nel contenitore non c'è nessun testo, via anche il suo «Leggi di più», che non aprirebbe nulla */
.e-con-inner:has(> .elementor-widget .kv-idea-testa):not(:has(.kv-idea)) .kv-idea-foto { display: none }
.e-con-inner:has(> .elementor-widget .kv-idea-testa):not(:has(.kv-idea)) > .elementor-widget-heading { margin-bottom: 24px }
.e-con-inner:has(> .elementor-widget .kv-idea-testa):not(:has(.kv-idea)) > .content-collapse-wrap:not(:has(.elementor-widget:not(.elementor-widget-porto_button))) { display: none }
/* shop (blocco Porto «porto-block»): sotto i 992px il contenitore non ha margini laterali, li diamo noi come al sito */
@media (max-width: 991px) {
  .porto-block .e-con-inner:has(> .e-con .kv-idea, > .elementor-widget .kv-idea-testa) { padding-inline: 20px }
}

/* ───────── titolo: occhiello, H2, foto ───────── */

.kv-idea-testa { display: flex; flex-direction: column }
.kv-idea-testa .kv-idea-occhiello {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; line-height: 18px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ki-vino);
}
.kv-idea-testa .kv-idea-occhiello::before {
  content: ""; flex: none; width: 5px; height: 5px; margin: 0 1px;
  background: var(--ki-rasp); transform: rotate(45deg);
}
/* «La nostra / idea di scarpa / per donna.»: spazi indivisibili nel modello, si va a capo solo dopo «nostra» e dopo
   «scarpa». Stessa misura del titolo delle FAQ (48, 40, 32px), che a quelle larghezze va anch'esso su tre righe */
.kv-idea-testa .kv-idea-titolo {
  margin-top: 16px;
  font-size: 48px; line-height: 54px; font-weight: 300; letter-spacing: -.015em;
  color: var(--ki-testo);
  text-wrap: balance;
}
.kv-idea-testa .kv-idea-titolo em { font-weight: 300; color: var(--ki-vino); padding-right: .04em }

/* foto: le spaziature sono padding, non margini (Elementor azzera i margini delle <figure> dentro i widget con
   .elementor .elementor-widget:not(…) figure, più specifico di qualsiasi regola di questo file) */
/* mai più larga della colonna di sinistra, anche dove la griglia non c'è (browser senza :has()) */
.kv-idea-testa .kv-idea-foto { display: flex; flex-direction: column; max-width: 380px; padding-top: 40px }
.kv-idea-testa .kv-idea-cornice {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ki-foto);
  isolation: isolate;
}
.kv-idea-testa .kv-idea-img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; max-width: none;
  margin: 0; border: 0; border-radius: 0;
  object-fit: cover; object-position: var(--kv-idea-fuoco, 50% 50%);
}
/* didascalia sotto la foto, come nei riquadri prodotto: tipo e nome, link alla scheda */
.kv-idea-testa .kv-idea-didascalia { display: flex; padding-top: 10px }
.kv-idea-testa .kv-idea-nellafoto {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; max-width: 100%;
  font-size: 14.5px; line-height: 20px; font-weight: 500; letter-spacing: 0;
  color: var(--ki-testo);
  text-decoration: none;
}
.kv-idea-testa .kv-idea-nellafoto-k {
  flex: none;
  font-size: 10.5px; line-height: 20px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ki-grigio);
}
.kv-idea-testa .kv-idea-nellafoto-v {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 4px;
}
.kv-idea-testa .kv-idea-freccia { color: var(--ki-vino) }
.kv-idea-testa .kv-idea-nellafoto:focus-visible { outline-offset: 2px; border-radius: 4px }

/* ───────── testo: filetto in testa, attacco ───────── */

/* il testo si apre con un filetto lungo quanto la colonna, come l'elenco delle FAQ: sopra l'attacco (curata piena),
   sopra il corpo (generica) o sopra il primo principio (curata breve, è il filetto del suo elenco).
   L'attacco è in Jost 300, più grande */
.kv-idea--curata:not(.kv-idea--breve),
.kv-idea--generica .kv-idea-corpo { padding-top: 28px; border-top: 1px solid var(--ki-filetto) }
.kv-idea .kv-idea-attacco {
  max-width: 24em;
  font-size: 22px; line-height: 32px; font-weight: 300; letter-spacing: -.005em;
  color: var(--ki-testo);
  text-wrap: pretty;
}

/* ───────── testo curato: principi con occhiello ─────────
   Due elenchi: il primo principio, poi gli altri tre (nella versione breve dentro il «Leggi di più»). Uno dopo
   l'altro si leggono come un elenco solo: stesso filetto e stesso respiro tra «Il design» e «La donna» */
.kv-idea .kv-idea-principi { margin-top: 28px; border-top: 1px solid var(--ki-filetto) }
.kv-idea > .kv-idea-principi:first-child,
.kv-idea .kv-idea-altro .kv-idea-principi { margin-top: 0 }
.kv-idea .kv-idea-principio { padding: 26px 0 28px; border-bottom: 1px solid var(--ki-filetto) }
/* l'ultimo principio di ogni elenco non chiude con un filetto: quello che segue è il filetto del secondo elenco, o la
   pillola, o la fine della sezione (in home sotto c'è già il filetto grigio della sezione, nello shop il footer) */
.kv-idea .kv-idea-principio:last-child { padding-bottom: 0; border-bottom: 0 }
.kv-idea .kv-idea-etichetta {
  display: block;
  font-size: 11px; line-height: 18px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ki-vino);
}
.kv-idea .kv-idea-desc { margin-top: 10px }
/* misura di lettura: 27em di Jost sono circa 66 caratteri per riga (Jost 400: 0,41em di media per carattere) */
.kv-idea .kv-idea-testo { max-width: 27em; font-size: 17px; line-height: 28px; color: var(--ki-soft); text-wrap: pretty }
/* frase in evidenza: carta rosa chiarissimo, Jost 300 con una parola in corsivo vino */
.kv-idea .kv-idea-evidenza {
  margin-top: 22px;
  padding: 28px 32px 26px;
  border-radius: 16px;
  background: var(--ki-rosa);
}
.kv-idea .kv-idea-frase {
  max-width: 17em;
  font-size: 28px; line-height: 36px; font-weight: 300; letter-spacing: -.01em;
  color: var(--ki-testo);
  text-wrap: balance;
}
.kv-idea .kv-idea-frase em { font-weight: 300; color: var(--ki-vino); padding-right: .04em }
.kv-idea .kv-idea-evidenza .kv-idea-testo { max-width: 30em; margin-top: 12px; font-size: 16px; line-height: 26px }
/* link scritti dal cliente nella versione generica: vino sottolineati lampone. L'area di tocco è uno strato
   invisibile più grande della parola (almeno 44 px di altezza), che non sposta né le righe né le parole vicine */
.kv-idea .kv-idea-link {
  position: relative;
  font-weight: 500;
  color: var(--ki-vino);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ki-rasp);
  text-underline-offset: 4px;
}
.kv-idea .kv-idea-link::after { content: ""; position: absolute; inset: -12px -4px }
.kv-idea .kv-idea-link:focus-visible { outline-offset: 2px; border-radius: 4px }

/* ───────── testo generico: qualsiasi testo scritto dal cliente ───────── */

.kv-idea--generica .kv-idea-attacco { margin-bottom: 20px }
.kv-idea--generica .kv-idea-testo { margin-bottom: 16px }
.kv-idea--generica .kv-idea-corpo > :last-child,
.kv-idea .kv-idea-altro-testo > :last-child { margin-bottom: 0 }

/* ───────── «Leggi di più» nativo (details) ─────────
   Funziona senza JS, Invio e Spazio lo aprono, la ricerca nella pagina lo apre da sé. Aperto, la pillola resta dov'è e
   dice «Mostra meno»: il testo nuovo compare sotto, nello stesso ordine del Tab (spostarla in fondo la porterebbe
   fuori vista proprio mentre ha il fuoco) */
.kv-idea .kv-idea-altro { margin-top: 8px }
.kv-idea .kv-idea-altro-testo { padding-top: 24px }
.kv-idea--curata .kv-idea-altro { margin-top: 24px }
.kv-idea .kv-idea-pillola {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px 0 24px;
  border: 1px solid var(--ki-melanzana); border-radius: 999px;
  font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: .06em;
  color: var(--ki-melanzana);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.kv-idea .kv-idea-pillola::-webkit-details-marker { display: none }
.kv-idea .kv-idea-pillola::marker { content: "" }
.kv-idea .kv-idea-altro:not([open]) .kv-idea-pillola-chiudi,
.kv-idea .kv-idea-altro[open] .kv-idea-pillola-apri { display: none }
.kv-idea .kv-idea-altro[open] .kv-idea-pillola svg { transform: rotate(180deg) }
/* aperta, la pillola si fa da parte: bordo dei campi, testo secondario, larga quanto serve */
.kv-idea .kv-idea-altro[open] > .kv-idea-pillola { width: auto; min-height: 44px; padding: 0 18px 0 20px; border-color: #dccfd7; color: var(--ki-grigio) }
.kv-idea .kv-idea-pillola:focus-visible { outline-offset: 3px; border-radius: 999px }

/* aree di tocco: anche su tablet e su qualsiasi schermo a dito */
@media (max-width: 991px), (pointer: coarse) {
  .kv-idea-testa .kv-idea-nellafoto { min-height: 44px }
}
@media (hover: hover) {
  .kv-idea .kv-idea-link:hover { color: var(--ki-vino-su); text-decoration-color: currentColor }
  .kv-idea .kv-idea-pillola:hover,
  .kv-idea .kv-idea-altro[open] > .kv-idea-pillola:hover { background: var(--ki-melanzana); border-color: var(--ki-melanzana); color: #fff }
  .kv-idea-testa .kv-idea-nellafoto:hover .kv-idea-nellafoto-v { color: var(--ki-vino); text-decoration-color: var(--ki-rasp) }
  .kv-idea-testa .kv-idea-nellafoto:hover .kv-idea-freccia { transform: translateX(3px) }
  .kv-idea-testa .kv-idea-foto:has(.kv-idea-nellafoto:hover) .kv-idea-img { transform: scale(1.03) }
}
@media (prefers-reduced-motion: no-preference) {
  .kv-idea .kv-idea-link { transition: color .2s ease, text-decoration-color .2s ease }
  .kv-idea .kv-idea-pillola { transition: background-color .2s ease, color .2s ease }
  .kv-idea .kv-idea-pillola svg { transition: transform .3s var(--ki-ease) }
  .kv-idea-testa .kv-idea-nellafoto-v { transition: color .2s ease, text-decoration-color .2s ease }
  .kv-idea-testa .kv-idea-freccia { transition: transform .25s var(--ki-ease) }
  .kv-idea-testa .kv-idea-img { transition: transform .9s cubic-bezier(.2, .7, .2, 1) }
}
/* temi a contrasto di Windows: il rombo dell'occhiello è uno sfondo, va ridisegnato col colore del testo */
@media (forced-colors: active) {
  .kv-idea-testa .kv-idea-occhiello::before { forced-color-adjust: none; background: CanvasText }
  .kv-idea .kv-idea-pillola { border: 1px solid CanvasText }
}
@media print {
  .kv-idea .kv-idea-altro > .kv-idea-pillola { display: none }
  .kv-idea .kv-idea-altro::details-content { content-visibility: visible; block-size: auto }
}

/* ───────── due colonne da 768px: titolo e foto a sinistra, testo a destra ───────── */

@media (min-width: 768px) {
  .e-con-inner:has(> .e-con .kv-idea):has(> .elementor-widget .kv-idea-testa) {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    column-gap: 80px;
    align-items: stretch;
  }
  .e-con-inner:has(> .e-con .kv-idea):has(> .elementor-widget .kv-idea-testa) > .elementor-widget-heading {
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .e-con-inner:has(> .e-con .kv-idea):has(> .elementor-widget .kv-idea-testa) > .elementor-widget-heading > .kv-idea-testa { flex: 1 1 auto }
  /* la foto cresce fin dove arriva il testo a destra: mai sotto il 4:5 (1:1 con il testo generico, che può essere
     corto), mai oltre 1:1,5 */
  .kv-idea-testa .kv-idea-foto { flex: 1 0 auto }
  .kv-idea-testa .kv-idea-cornice { flex: 1 0 auto; max-height: 570px }
  .e-con-inner:has(> .e-con .kv-idea--generica) .kv-idea-testa .kv-idea-cornice { aspect-ratio: 1 / 1 }
  /* il filetto che apre il testo passa a metà dell'occhiello, come quello dell'elenco delle FAQ */
  .kv-idea { margin-top: 8px }
}
/* versione generica nelle pagine piene: da 768px c'è posto accanto alla foto, il testo esce intero.
   Il <details> resta chiuso nel markup (al telefono taglia a 130 parole): qui se ne mostra il contenuto e si nasconde
   la pillola, solo dove ::details-content esiste (altrove resta un «Leggi di più» che funziona) */
@supports selector(::details-content) {
  @media (min-width: 768px) {
    .kv-idea--generica:not(.kv-idea--breve) .kv-idea-altro::details-content { content-visibility: visible; block-size: auto }
    .kv-idea--generica:not(.kv-idea--breve) .kv-idea-altro > .kv-idea-pillola { display: none }
    .kv-idea--generica:not(.kv-idea--breve) .kv-idea-altro,
    .kv-idea--generica:not(.kv-idea--breve) .kv-idea-altro-testo { margin: 0; padding: 0 }
  }
}

/* 992..1159: contenitore 940 come il sito, il footer e le FAQ (330 + 56) */
@media (min-width: 992px) and (max-width: 1159px) {
  .e-con-inner:has(> .e-con .kv-idea, > .elementor-widget .kv-idea-testa) { padding-block: 88px 96px }
  .e-con-inner:has(> .e-con .kv-idea):has(> .elementor-widget .kv-idea-testa) {
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
    column-gap: 56px;
  }
  .kv-idea-testa .kv-idea-titolo { font-size: 40px; line-height: 46px }
  .kv-idea-testa .kv-idea-foto { max-width: 330px; padding-top: 36px }
  .kv-idea-testa .kv-idea-cornice { max-height: 495px }
  .kv-idea .kv-idea-testo { font-size: 16.5px; line-height: 27px }
  .kv-idea .kv-idea-frase { font-size: 26px; line-height: 34px }
}

/* 768..991: le FAQ qui vanno su una colonna; la sezione tiene le due, con la colonna sinistra stretta */
@media (min-width: 768px) and (max-width: 991px) {
  .e-con-inner:has(> .e-con .kv-idea, > .elementor-widget .kv-idea-testa) { padding-block: 72px 80px }
  .e-con-inner:has(> .e-con .kv-idea):has(> .elementor-widget .kv-idea-testa) {
    grid-template-columns: minmax(0, 296px) minmax(0, 1fr);
    column-gap: 40px;
  }
  .e-con-inner:has(> .e-con .kv-idea) > .elementor-widget-heading .elementor-heading-title { font-size: 38px; line-height: 44px }
  .kv-idea-testa .kv-idea-titolo { margin-top: 14px; font-size: 40px; line-height: 46px }
  .kv-idea-testa .kv-idea-foto { max-width: 296px; padding-top: 32px }
  .kv-idea-testa .kv-idea-cornice { max-height: 444px }
  .kv-idea--curata:not(.kv-idea--breve), .kv-idea--generica .kv-idea-corpo { padding-top: 24px }
  .kv-idea .kv-idea-attacco { font-size: 20px; line-height: 30px }
  .kv-idea .kv-idea-principi { margin-top: 24px }
  .kv-idea .kv-idea-principio:not(:last-child) { padding: 22px 0 24px }
  .kv-idea .kv-idea-principio:last-child { padding-top: 22px }
  .kv-idea .kv-idea-testo { font-size: 16px; line-height: 26px }
  .kv-idea .kv-idea-evidenza { margin-top: 18px; padding: 22px 24px 20px; border-radius: 14px }
  .kv-idea .kv-idea-frase { font-size: 23px; line-height: 30px }
  .kv-idea .kv-idea-evidenza .kv-idea-testo { font-size: 15.5px; line-height: 25px }
}

/* una colonna: la foto si fa 4:3 e mostra le scarpe (il punto lo dà il PHP, --kv-idea-fuoco) */
@media (max-width: 767px) {
  .e-con-inner:has(> .e-con .kv-idea, > .elementor-widget .kv-idea-testa) { padding-block: 56px 64px }
  .e-con-inner:has(> .e-con .kv-idea, > .elementor-widget .kv-idea-testa) > .elementor-widget-heading { margin-bottom: 32px }
  .e-con-inner:has(> .e-con .kv-idea) > .elementor-widget-heading .elementor-heading-title { font-size: 32px; line-height: 37px }
  .kv-idea-testa .kv-idea-titolo { margin-top: 12px; font-size: 32px; line-height: 37px }
  .kv-idea-testa .kv-idea-foto { max-width: none; padding-top: 28px }
  .kv-idea-testa .kv-idea-cornice { aspect-ratio: 4 / 3; border-radius: 12px }
  .kv-idea-testa .kv-idea-didascalia { padding-top: 6px }
  .kv-idea--curata:not(.kv-idea--breve), .kv-idea--generica .kv-idea-corpo { padding-top: 24px }
  .kv-idea .kv-idea-attacco { font-size: 20px; line-height: 29px }
  .kv-idea .kv-idea-principi { margin-top: 24px }
  .kv-idea .kv-idea-principio:not(:last-child) { padding: 22px 0 24px }
  .kv-idea .kv-idea-principio:last-child { padding-top: 22px }
  .kv-idea .kv-idea-etichetta { font-size: 10.5px }
  .kv-idea .kv-idea-desc { margin-top: 8px }
  .kv-idea .kv-idea-testo { font-size: 16px; line-height: 26px }
  .kv-idea .kv-idea-evidenza { margin-top: 18px; padding: 22px 22px 20px; border-radius: 14px }
  .kv-idea .kv-idea-frase { font-size: 24px; line-height: 31px }
  .kv-idea .kv-idea-evidenza .kv-idea-testo { font-size: 15.5px; line-height: 25px }
  .kv-idea--curata .kv-idea-altro { margin-top: 20px }
  .kv-idea .kv-idea-pillola { width: 100%; justify-content: center }
}
@media (max-width: 359px) {
  .kv-idea-testa .kv-idea-titolo { font-size: 29px; line-height: 34px }
  .kv-idea .kv-idea-frase { font-size: 22px; line-height: 29px }
}