/*
Theme Name:  Casa Diva
Description: Tema proprie a site-ului Casa Diva Mokador România. Scrisă de mână, fără cadru și fără pas de compilare. Reperul vizual e copia diva.mokador.it (reper.casadivamokador.test); valorile de mai jos sunt măsurate de acolo cu tools/masoara.mjs, nu aproximate.
Author:      We Plant Code
Version:     0.1.0
Text Domain: casadiva
*/

/* ==========================================================================
   1. FONT — Montserrat, local (fără cereri externe). Are ă â î ș ț și „ ”.
   ========================================================================== */
@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; font-display: swap; src: url("assets/fonturi/Montserrat-300.woff") format("woff"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonturi/Montserrat-400.woff") format("woff"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: italic; font-display: swap; src: url("assets/fonturi/Montserrat-400-italic.woff") format("woff"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonturi/Montserrat-500.woff") format("woff"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonturi/Montserrat-600.woff") format("woff"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: italic; font-display: swap; src: url("assets/fonturi/Montserrat-600-italic.woff") format("woff"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonturi/Montserrat-700.woff") format("woff"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap; src: url("assets/fonturi/Montserrat-800.woff") format("woff"); }

/* ==========================================================================
   2. TOKENURI — luate exact din CSS-ul sursei (color-palettes, global-variables).
      1rem = 10px (html 62.5%), ca la sursă; toate mărimile fluide sunt în rem.
   ========================================================================== */
:root {
  /* culorile mărcii */
  --crem: #F0EEEA;
  --negru: #000000;
  --maro: #2B1D18;
  --bej: #DFD6C1;

  /* scara tipografică, fluidă între ~480 și ~1920 px */
  --titlu-mare: clamp(4.8rem, calc(3.839rem + 2.011vw), 7.7rem);
  --titlu-mare-mic: clamp(4.8rem, calc(4.27rem + 1.11vw), 6.4rem);
  --h1: clamp(4.5rem, calc(4.202rem + 0.624vw), 5.4rem);
  --h2: clamp(3.7rem, calc(3.435rem + 0.555vw), 4.5rem);
  --h3: clamp(3.1rem, calc(2.901rem + 0.416vw), 3.7rem);
  --h4: clamp(2.6rem, calc(2.434rem + 0.347vw), 3.1rem);
  --h5: clamp(2.2rem, calc(2.067rem + 0.277vw), 2.6rem);
  --h6: clamp(1.8rem, calc(1.667rem + 0.277vw), 2.2rem);
  --corp: clamp(1.6rem, calc(1.534rem + 0.139vw), 1.8rem);
  --nota: 1.5rem;

  /* spațieri */
  --spatiu-sus: clamp(3.2rem, calc(1.079rem + 4.438vw), 9.6rem);
  --spatiu-jos: clamp(3.2rem, calc(1.079rem + 4.438vw), 9.6rem);
  --spatiu-lateral: clamp(1.6rem, calc(1.6rem + ((1vw - 0.48rem) * 1.1111)), 3.2rem);
  --gol-2: 2rem;
  --gol-3: 3rem;

  --latime-maxima: 1920px;
  --tranzitie: 0.2s;
}

/* ==========================================================================
   3. BAZĂ
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; background-color: var(--crem); }
body { margin: 0; font-family: "Montserrat", sans-serif; font-size: var(--corp); line-height: 130%; color: var(--negru); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; line-height: 110%; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); font-weight: 700; }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.text a { text-decoration: underline; }
.text ul { padding-left: 2rem; }
.text ul li { padding-bottom: 1rem; }

.sari-la-continut { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 1rem 2rem; background: var(--maro); color: var(--crem); }
.sari-la-continut:focus { left: 0; }
.doar-cititor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   4. AȘEZARE — secțiune, container, grila de 12
   ========================================================================== */
.sectiune { display: flex; flex-direction: column; align-items: center; width: 100%; }
.container { width: 100%; max-width: var(--latime-maxima); padding: var(--spatiu-sus) var(--spatiu-lateral) var(--spatiu-jos); }
.grila-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3rem; }
.col-2 { grid-column: span 2; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }
.col-3-10 { grid-column: 3 / 11; }
.col-3-12 { grid-column: 3 / 13; }

.fundal-crem { background-color: var(--crem); }
.fundal-maro { background-color: var(--maro); }
.fundal-bej { background-color: var(--bej); }
.fundal-negru { background-color: var(--negru); }
.text-crem { color: var(--crem); }
.text-maro { color: var(--maro); }
.text-bej { color: var(--bej); }
.text-centru { text-align: center; }
.nota { font-size: var(--nota); }

/* ==========================================================================
   5. ANTET — stă peste hero, cu un gradient negru → transparent
   ========================================================================== */
.antet { position: absolute; top: 0; left: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; width: 100%;
  background-image: linear-gradient(rgb(0, 0, 0), rgba(115, 115, 115, 0)); }
.antet__interior { display: flex; flex-direction: column; align-items: center; gap: 3rem; width: 100%; max-width: var(--latime-maxima);
  padding: 4rem var(--spatiu-lateral) 0; }
.sigla { display: block; width: 228px; max-width: 100%; }
.sigla img { width: 100%; }

.meniu { display: flex; gap: var(--gol-2); list-style: none; }
.meniu a { display: flex; }
.antet .meniu a { color: var(--crem); font-weight: 600; }

.buton-meniu { display: none; position: relative; width: 20px; height: 16px; color: var(--crem); }
.buton-meniu span { position: absolute; right: 0; display: block; width: 20px; height: 2px; background-color: currentColor; transition: var(--tranzitie); }
.buton-meniu span:nth-child(1) { top: 0; }
.buton-meniu span:nth-child(2) { top: 7px; }
.buton-meniu span:nth-child(3) { top: 14px; }

.meniu-mobil { position: fixed; top: 0; right: 0; bottom: 0; z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; height: 100vh; height: 100dvh; text-align: center; color: #fff; background-color: var(--maro);
  transform: translateX(100%); visibility: hidden; transition: transform var(--tranzitie), visibility var(--tranzitie); }
.meniu-mobil ul { list-style: none; }
.meniu-mobil a { display: block; padding: 0 3rem; font-size: 16px; line-height: 60px; }

.meniu-deschis .meniu-mobil { transform: translateX(0); visibility: visible; }
.meniu-deschis .buton-meniu { position: fixed; z-index: 1000; }
.meniu-deschis .buton-meniu span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.meniu-deschis .buton-meniu span:nth-child(2) { opacity: 0; }
.meniu-deschis .buton-meniu span:nth-child(3) { top: 50%; transform: rotate(-45deg); }
.meniu-deschis { overflow: hidden; }

/* ==========================================================================
   6. SUBSOL
   ========================================================================== */
.subsol__interior { display: flex; flex-direction: column; align-items: flex-start; gap: 8rem 3rem; }
.subsol__sus { width: 100%; align-items: center; }
.subsol .sigla { width: 100%; }
.subsol__meniu { display: flex; justify-content: center; }
.subsol .meniu a { color: var(--crem); font-weight: 400; }
.subsol__legal { width: 100%; color: var(--crem); font-size: var(--nota); line-height: 130%; text-align: center; }
.subsol__legal a { text-decoration: underline; }

/* ==========================================================================
   7. BUTOANE
   ========================================================================== */
.buton { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; font-weight: 600; cursor: pointer; transition: var(--tranzitie); }
.buton--principal { background-color: var(--maro); color: var(--bej); }
.buton--secundar { background-color: var(--bej); color: var(--maro); }
.buton--secundar svg path { fill: var(--maro); }

/* ==========================================================================
   9. COMPONENTE DE PAGINĂ — valorile sunt măsurate pe reper la 1440 px
   ========================================================================== */
.titlu-mare { font-size: var(--titlu-mare); font-weight: 700; line-height: 130%; text-transform: uppercase; }
h1.titlu-mare { line-height: 110%; }
.titlu-mare-mic { font-size: var(--titlu-mare-mic); font-weight: 400; line-height: 130%; }
.marime-h3 { font-size: var(--h3); line-height: 130%; }
.marime-h4 { font-size: var(--h4); line-height: 110%; }
.marime-h5 { font-size: var(--h5); line-height: 130%; }
.marime-h6 { font-size: var(--h6); line-height: 130%; }
.marime-h3, .marime-h4, .marime-h5, .marime-h6 { margin: 0; }

.coloana { display: flex; flex-direction: column; gap: 3rem; }
.coloana--6 { gap: 6rem; }
.grila-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
.imagine-acopera { width: 100%; height: 100%; object-fit: cover; }

.buton { padding: 1.2rem 1.5rem; letter-spacing: 0.5px; line-height: 130%; text-align: center; }
.buton svg { flex: none; }

/* hero: filmul umple secțiunea, conținutul stă centrat sub antet */
.hero { position: relative; justify-content: center; }
.hero--ecran { min-height: 100vh; min-height: 100svh; padding-top: 20rem; } /* 20rem = locul antetului, care stă peste hero */
.hero__fundal { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--maro); }
.hero__fundal video, .hero__fundal img { width: 100%; height: 100%; object-fit: cover; }
/* vălul negru de 20% de peste film: fără el textul crem nu se citește pe cadrele deschise */
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0.2)); }
.hero__continut { position: relative; }
.hero__text { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3rem; }

/* formele decorative: nu prind click-uri, ies din secțiune în jos */
.forma { position: absolute; z-index: 1; pointer-events: none; max-width: none; }
.forma--hero-dreapta { right: 2%; bottom: -10rem; width: 186px; }
.forma--hero-stanga { left: 5%; bottom: -18.5rem; width: 11rem; }
.forma--final-dreapta { right: 10%; top: -8rem; width: 186px; }
.forma--final-stanga { left: 5%; top: 50%; width: 11rem; margin-top: -17.6rem; }

.casete-focus { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; list-style: none; }
.caseta-focus { padding: 1rem; background-color: var(--bej); }

.card-mare { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 3rem; aspect-ratio: 1 / 1;
  background-size: cover; background-position: center; }
/* gradient negru → transparent pe jumătatea de sus, în spatele titlului */
.card-mare::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--negru), rgba(115, 115, 115, 0) 50%); }
.card-mare > * { position: relative; }

.indemn-final { position: relative; justify-content: center; }
.indemn-final__continut { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3rem;
  padding-top: 20rem; padding-bottom: 20rem; }

/* --- pagini interioare ---------------------------------------------------- */
.hero--pagina { min-height: 70vh; background-size: cover; background-position: center; }
.container--fara-jos { padding-bottom: 0; }
.titlu-pagina { margin-top: 3rem; }
.coloana--stanga { align-items: flex-start; }
.grila--centrat { align-items: center; }
.container.grila-2 { display: grid; }
.marime-h2 { margin: 0; font-size: var(--h2); font-weight: 700; line-height: 130%; }

/* secțiune cu imagine care stă pe loc la derulare (vălul de 20% vine de la .hero) */
.fundal-fix { background-size: cover; background-attachment: fixed; }
.fundal-fix > * { position: relative; }

.film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--negru); }
.film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.citat { margin: 0; }
.citat cite { font-style: italic; }
.text ul { margin: 1em 0; }

/* --- pagina de capsule ----------------------------------------------------- */
.titlu-centrat { align-self: center; text-align: center; }
.coloana--centru { align-items: center; }
.coloana--fara-gol { gap: 0; }
/* textele de mărimea h4 au rânduri la 130%; doar titlurile de mărimea asta au 110% */
.text.marime-h4 { line-height: 130%; }
/* un titlu mare care în reper e titlu adevărat (nu text) are rânduri la 110% */
.titlu-mare--strans { line-height: 110%; }
.sigla-sectiune { width: 468px; max-width: 100%; }

.grila-carduri { display: grid; gap: 3rem; width: 100%; padding-top: var(--spatiu-sus); list-style: none; }
.grila-carduri--3 { grid-template-columns: repeat(3, 1fr); }
.grila-carduri--5 { grid-template-columns: repeat(5, 1fr); }
.grila-carduri > li { display: flex; }

/* cardul unei capsule e un buton: deschide fereastra de detalii și merge și de la tastatură */
.card-capsula { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding: 3rem; text-align: center; }
.card-capsula > * { position: relative; }
.card-capsula__cap, .card-capsula__jos { display: flex; flex-direction: column; width: 100%; }
.card-capsula__jos { gap: 3rem; }
.card-capsula__nume { font-size: var(--h2); font-weight: 700; line-height: 110%; text-transform: uppercase; }
.card-capsula__descriere { font-weight: 500; }
.card-capsula__imagine { transition: all 300ms cubic-bezier(0.68, -0.6, 0.32, 1.6); }

.card-capsula--cafea { align-items: center; background-size: cover; background-position: center; }
.card-capsula--cafea::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(hsla(40, 17%, 93%, 0.7), hsla(40, 17%, 93%, 0.7)); } /* văl crem de 70% peste fundalul cafelei */
.card-capsula--cafea:hover .card-capsula__imagine, .card-capsula--cafea:focus-visible .card-capsula__imagine { transform: scale(1.1); }

.card-capsula--bautura { min-height: 50rem; background-color: var(--bej); }
.card-capsula--bautura .card-capsula__imagine { position: absolute; top: 50%; left: 50%; max-width: 25rem; transform: translate(-50%, -50%); }
.card-capsula--bautura:hover .card-capsula__imagine, .card-capsula--bautura:focus-visible .card-capsula__imagine { transform: translate(-50%, -50%) scale(1.1) rotate(-20deg); }
.card-capsula--info { justify-content: center; gap: 3rem; text-align: left; }
.card-capsula--info .marime-h5 { font-weight: 600; }

.scoruri { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin: 0; text-align: left; }
.scor { display: flex; align-items: center; column-gap: var(--gol-2); max-width: 20rem; } /* fără lățime fixă: încap două pe rând */
.scor dt { min-width: 9rem; }
.scor dd { margin: 0; }
.scor__buline { display: flex; align-items: center; gap: 5px; }
.scor__buline i { width: 10px; aspect-ratio: 1; border: 1px solid var(--negru); border-radius: 100%; }
.scor__buline[data-valoare="1"] i:nth-of-type(-n + 1), .scor__buline[data-valoare="2"] i:nth-of-type(-n + 2),
.scor__buline[data-valoare="3"] i:nth-of-type(-n + 3), .scor__buline[data-valoare="4"] i:nth-of-type(-n + 4),
.scor__buline[data-valoare="5"] i:nth-of-type(-n + 5) { background: var(--negru); }

/* fereastra de detalii: <dialog> nativ; fundalul blurat e ::backdrop */
.fereastra-capsula { width: 100%; max-width: none; max-height: none; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--negru); overflow: auto; }
.fereastra-capsula::backdrop { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
/* ca în reper: panoul are înălțimea conținutului și stă lipit de josul ecranului; deasupra se vede pagina blurată.
   display: flex doar pe [open] — altfel ar călca display: none al ferestrelor închise. */
.fereastra-capsula[open] { display: flex; flex-direction: column; justify-content: flex-end; }
.fereastra-capsula__panou { position: relative; display: flex; flex-direction: column; align-items: center; flex: none; max-height: 100%; overflow-y: auto; background-color: var(--fundal-fereastra); }
.fereastra-capsula[open] .fereastra-capsula__panou { animation: fereastra-apare 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes fereastra-apare { from { opacity: 0; transform: translateY(18px) scale(0.985); } }
.fereastra-capsula__inchide { position: absolute; top: 5%; right: 5%; z-index: 2; display: flex; width: 3rem; }
.fereastra-capsula .grila-12 { align-items: start; } /* imaginea și titlul pornesc de sus, ca în reper */
.fereastra-capsula__subtitlu { display: flex; flex-direction: column; gap: 1rem; }
.fereastra-capsula__subtitlu p, .fereastra-capsula__ideal { margin: 0; }
.fereastra-capsula .scoruri { width: 50%; }
.fereastra-capsula .buton { align-self: flex-start; }
body:has(dialog[open]) { overflow: hidden; }

/* caruselul personajelor: derulare nativă cu oprire pe fiecare element, săgețile doar o împing */
.container--carusel-cap { display: flex; align-items: center; gap: 3rem; padding-bottom: 3rem; }
.carusel__sageti { display: flex; gap: 3rem; padding: 0 3rem; }
.carusel__sageata { display: flex; }
.container--carusel { padding-top: 0; padding-right: 0; }
.carusel { display: flex; gap: 3rem; padding-right: 6rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carusel::-webkit-scrollbar { display: none; }
.personaj { flex: 0 0 calc((100% - 6rem) / 3); /* 100% = lățimea fără spațiul din dreapta; rămân de scăzut doar cele două goluri */ display: flex; justify-content: center; align-items: center; gap: 3rem; scroll-snap-align: start; }
.personaj__imagine { width: 50%; aspect-ratio: 1; object-fit: cover; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.personaj__text { display: flex; flex-direction: column; gap: 1rem; width: 50%; margin: 0; }
.personaj__text blockquote, .personaj__text p { margin: 0; }


/* --- pagina Espressoare (reper /macchine-diva/, măsurat la 1440 și 390 px) ------------------------------ */
/* cardurile: bej, conținutul distanțat pe verticală; la trecerea mouse-ului, imaginea din față cedează locul celei laterale */
.card-aparat { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; padding: 3rem; background-color: var(--bej); }
.card-aparat__titlu { align-items: center; }
.card-aparat__nume { text-transform: uppercase; line-height: 110%; }
.card-aparat__imagini { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; }
.card-aparat__imagini img { width: 100%; height: 100%; transition: all 500ms cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.card-aparat__lateral { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; }
.card-aparat:hover .card-aparat__fata, .card-aparat:focus-visible .card-aparat__fata { opacity: 0; }
.card-aparat:hover .card-aparat__lateral, .card-aparat:focus-visible .card-aparat__lateral { opacity: 1; }

/* fișa unui aparat: imaginea în stânga, panoul crem în dreapta */
.fisa-aparat { align-items: start; scroll-margin-top: 2rem; }
.fisa-aparat__imagine { width: 100%; aspect-ratio: 1 / 1; }
.fisa-aparat__panou { display: flex; flex-direction: column; align-items: flex-start; gap: 4rem; padding: 4rem; background-color: var(--crem); }
.fisa-aparat__cap { display: flex; flex-direction: column; gap: 1rem; }
.fisa-aparat__cap .marime-h5 { margin: 0; }
.fisa-aparat__culori { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 0; }
.fisa-aparat__culori p { margin: 0; }
.culori { display: flex; flex-wrap: wrap; gap: 2rem; list-style: none; }
.culoare { display: flex; align-items: center; gap: 5px; }
.culoare__punct { display: block; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 100%; }
.fisa-aparat__date { display: flex; gap: 4rem; margin: 0; }
.fisa-aparat__date > div { display: flex; flex-direction: column; justify-content: space-between; }
.fisa-aparat__date dd { margin: 0; font-weight: 600; }
.fisa-aparat__documente { display: flex; gap: 3rem; }
.fisa-aparat__documente a { text-decoration: underline; }

/* ==========================================================================
   10. ECRANE ÎNGUSTE — la sfârșit, ca să calce peste definițiile de bază.
       Pragurile sunt ale reperului: 767 px (o coloană, meniu-panou) și 478 px.
   ========================================================================== */
@media (max-width: 767px) {
  .antet__interior { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .antet .sigla { width: 170px; }
  .antet .meniu-principal { display: none; }
  .buton-meniu { display: block; }


  /* grila de 12 trece pe o coloană; cardurile mari, unul sub altul */
  .grila-12 > * { grid-column: 1 / -1; }
  .grila-2 { grid-template-columns: 1fr; }
  .container.grila--inversata { display: flex; flex-direction: column-reverse; }
  .fundal-fix { background-attachment: scroll; }
  /* fișa aparatului: datele tehnice și linkurile unele sub altele, ca în reper */
  .fisa-aparat__date { flex-direction: column; gap: 2rem; }
  .fisa-aparat__documente { flex-direction: column; gap: 3rem; } /* iOS nu suportă fundal fix; fără asta imaginea se mărește aiurea */
  /* subsolul rămâne grilă până la 478 px (în reper sigla doar se micșorează) */
  .subsol__sus > .col-2 { grid-column: span 2; }
  .subsol__sus > .col-3-12 { grid-column: 3 / 13; }

  .forma--hero-dreapta { bottom: -18rem; width: 10rem; }
  .forma--hero-stanga { width: 8rem; }
}

/* sub 478 px: subsolul pe o coloană, centrat (în reper rămâne grilă până aici) */
@media (max-width: 478px) {
  .subsol__interior { align-items: center; }
  .subsol__sus { display: flex; flex-direction: column; align-items: center; width: auto; }
  .subsol .sigla { width: 228px; }
  .subsol .meniu { flex-direction: column; }
  .subsol .meniu a { justify-content: center; }

  .forma--hero-dreapta { width: 5rem; }
  .forma--hero-stanga { width: 3rem; }
  .forma--final-dreapta { width: 11rem; }
  .casete-focus { grid-template-columns: 1fr; }
  /* un titlu dintr-un singur cuvânt lung (SUSTENABILITATE, FENNTARTHATÓSÁG: 15 litere) nu încape la 48 px;
     9.2vw = 36 px la 390 px lățime. Doar unde șablonul cere, ca celelalte titluri să rămână ca în reper. */
  .titlu-mare--lung { font-size: min(4.8rem, 9.2vw); }
  /* ESPRESSOARE (11 litere) cere 371 px la 48 px, în 358: și în reper iese din casetă cu 13 px. 11.8vw = 46 px la 390 px. */
  .titlu-mare--11 { font-size: min(4.8rem, 11.8vw); }
  .caseta-focus { padding: 5rem 3rem; }
}

/* grilele de carduri: pragurile reperului (cafele 3/2/1, băuturi 5/4/3/2/1) */
@media (max-width: 1600px) { .grila-carduri--5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1250px) { .grila-carduri--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) {
  .grila-carduri--3, .grila-carduri--5 { grid-template-columns: repeat(2, 1fr); }
  .card-capsula--bautura { min-height: 60rem; }
  .carusel { gap: 1.5rem; padding-right: 3rem; }
  .personaj { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 767px) {
  .grila-carduri--3, .grila-carduri--5 { grid-template-columns: 1fr; }
  .card-capsula--bautura .card-capsula__imagine { max-width: 40rem; }
  .personaj { flex-direction: column; }
  .personaj__imagine { width: 100%; max-width: 25rem; }
  .personaj__text { width: 100%; }
  .fereastra-capsula .scoruri { width: 100%; }
}
@media (max-width: 578px) { .card-capsula--bautura .card-capsula__imagine { max-width: 30rem; } }
@media (max-width: 478px) {
  .personaj { flex-basis: 100%; }
  .container--carusel-cap { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}