/* =========================================================
   MATTERIA — editorial luxury · Miami
   Colores por paleta en identidad.css
   ========================================================= */
:root {
  --bg: #f3ede4; --bg-alt: #ebe3d7; --line: rgb(20 17 15 / .14);
  --ink: #14110f; --ink-soft: #4a433d;
  --accent: #14110f; --accent-ink: #f3ede4;
  --tone1: #f2b8a0; --tone2: #f6dccb; --tone3: #a9d3d0;
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --gutter: clamp(18px, 4vw, 56px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; transition: background-color .5s, color .5s; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: .95; letter-spacing: -.02em; }
em { font-style: italic; }
h2 { font-size: clamp(2.6rem, 7vw, 6.4rem); }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--bg); }

.label { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; margin: 0 0 1.6rem; display: flex; gap: 1rem; }
.label span { opacity: .5; }
.split-lines > span { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.14em; }
.split-lines > span > .li { display: block; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  padding: .95rem 1.7rem; border-radius: 999px; font-size: .82rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--ease); white-space: nowrap; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tone1); transform: translateY(101%); border-radius: inherit; transition: transform .6s var(--ease); }
.btn:hover::after { transform: translateY(0); }
.btn:hover { color: var(--ink); }
.btn .arrow { transition: transform .5s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--sm { padding: .65rem 1.2rem; font-size: .72rem; }
.btn--lg { padding: 1.15rem 2.1rem; }
.btn--light { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.btn--line { background: transparent; color: var(--ink); }
.btn--full { width: 100%; }
.link-u { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .6s var(--ease); }
.link-u:hover { background-size: 0 1px; background-position: 100% 100%; }


/* grano */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }



/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.1rem var(--gutter); transition: background-color .5s, padding .5s, translate .6s var(--ease); }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); padding-top: .7rem; padding-bottom: .7rem; }
.nav.hide { translate: 0 -100%; }
.nav__logo img { height: 30px; width: auto; }
.nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: 1.4rem; }
.contact__note::before { content: ""; display: inline-block; width: .45em; height: .45em; border-radius: 50%; background: #25d366; margin-right: .5em; vertical-align: .12em; }
.nav__menu { background: none; border: 0; cursor: pointer; display: flex; align-items: center; gap: .6rem; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; padding: .4rem 0; position: relative; z-index: 2; }
.nav__menu i { display: block; width: 22px; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.nav__menu i:first-of-type { transform: translateY(-3px); }
.nav__menu i + i { margin-left: -28px; transform: translateY(3px); }
@media (max-width: 900px) { .nav .btn { display: none; } }


/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; padding: 7rem var(--gutter) 2.2rem; display: flex; flex-direction: column; justify-content: flex-end; }
.hero > :not(.atmos) { position: relative; z-index: 2; }
.hero__kicker { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1.6rem; }
.hero__title { font-size: clamp(3.4rem, min(11.5vw, 19vh), 12rem); line-height: .86; letter-spacing: -.035em; }
.hero__title > span:nth-child(2) { padding-left: 12vw; }
.hero__title > span:nth-child(3) { padding-left: 4vw; }
.hero__bottom { display: grid; grid-template-columns: 1fr auto auto; gap: 2.5rem; align-items: end; margin-top: 2.2rem; padding-right: 70px; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.hero__sub { max-width: 420px; margin: 0; font-size: 1.12rem; color: var(--ink-soft); }
.hero__ctas { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.badge { display: block; position: relative; width: 132px; height: 132px; border: 0; background: none; padding: 0; cursor: pointer; }
.badge svg { width: 100%; height: 100%; animation: spin 18s linear infinite; }
.badge text { font: 500 12.5px var(--sans); letter-spacing: .32em; fill: var(--ink); }
.badge__m { position: absolute; inset: 34px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; transition: scale .5s var(--ease); }
.badge__m img { width: 34px; filter: invert(1); }
.badge:hover .badge__m { scale: 1.1; }
@media (max-width: 900px) {
  .hero__bottom { grid-template-columns: 1fr; gap: 1.6rem; }
  .badge { position: absolute; right: 0; top: -130px; width: 104px; height: 104px; }
  .badge__m { inset: 27px; }
  .badge__m img { width: 28px; }
}


/* ---------- manifiesto ---------- */
.manifesto { padding: clamp(100px, 16vw, 220px) var(--gutter) clamp(80px, 10vw, 140px); }
.manifesto__text { font: 400 clamp(1.9rem, 4.6vw, 4.4rem)/1.08 var(--serif); letter-spacing: -.015em; margin: 0; max-width: 1300px; text-indent: 14vw; }
.manifesto__text .w { opacity: .14; }
.no-motion .manifesto__text .w { opacity: 1; }
.manifesto__foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; margin-top: clamp(60px, 8vw, 120px); align-items: end; }
.manifesto__aside { max-width: 380px; color: var(--ink-soft); margin: 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stat { border-top: 1px solid var(--line); padding-top: 1rem; }
.stat b { display: block; font: 400 clamp(2.4rem, 4.5vw, 4rem)/1 var(--serif); font-style: italic; }
.stat span { font-size: .78rem; color: var(--ink-soft); }
@media (max-width: 900px) { .manifesto__foot { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } .manifesto__text { text-indent: 0; } }

.svc { padding: clamp(60px, 8vw, 120px) var(--gutter); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(40px, 6vw, 80px); }
.sec-head .label { align-self: flex-start; }


/* fondos placeholder (hasta tener fotos) */
.ph-1 { background: radial-gradient(circle at 30% 25%, var(--tone2), transparent 55%), radial-gradient(circle at 70% 80%, var(--tone1), transparent 60%), var(--tone3); }
.ph-2 { background: radial-gradient(circle at 70% 30%, var(--tone1), transparent 55%), radial-gradient(circle at 20% 80%, var(--tone3), transparent 60%), var(--tone2); }
.ph-3 { background: radial-gradient(circle at 50% 60%, var(--tone3), transparent 55%), radial-gradient(circle at 80% 10%, var(--tone2), transparent 50%), var(--tone1); }


/* ---------- método ---------- */
.method { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5vw; padding: clamp(80px, 12vw, 160px) var(--gutter); }
.method__side { position: sticky; top: 120px; align-self: start; }
.method__side h2 { font-size: clamp(2.6rem, 5.6vw, 5.4rem); margin-bottom: 2.4rem; }
.method__steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.method__steps li { counter-increment: s; border-top: 1px solid var(--line); padding: 2.2rem 0 3.4rem; display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; }
.method__steps li::before { content: "0" counter(s); font: italic 400 3.2rem/1 var(--serif); }
.method__steps h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-bottom: .8rem; }
.method__steps p { margin: 0; color: var(--ink-soft); max-width: 440px; }
@media (max-width: 900px) { .method { grid-template-columns: 1fr; } .method__side { position: static; } .method__steps li { grid-template-columns: 4rem 1fr; } }

/* ---------- testimonios ---------- */
.quotes-sec { padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--bg-alt); }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; }
.quote { margin: 0; }
.quote p { font: italic 400 clamp(1.6rem, 2.6vw, 2.4rem)/1.15 var(--serif); margin: 0 0 1.2rem; }
.quote cite { font-style: normal; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }

/* ---------- BTS ---------- */
.bts-sec { padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--bg-alt); overflow: hidden; }
.collage { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2vw; margin-bottom: clamp(60px, 8vw, 110px); }
.collage > div { border-radius: 3px; overflow: hidden; position: relative; display: grid; place-items: end start; padding: .8rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.collage > div img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collage > div:nth-child(1) { grid-column: 1 / 6; aspect-ratio: 4/5; }
.collage > div:nth-child(2) { grid-column: 7 / 11; aspect-ratio: 1; margin-top: 18vh; }
.collage > div:nth-child(3) { grid-column: 2 / 5; aspect-ratio: 3/4; margin-top: -8vh; }
.collage > div:nth-child(4) { grid-column: 6 / 13; aspect-ratio: 16/10; margin-top: 6vh; }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.member__photo { aspect-ratio: 4/5; border-radius: 3px; overflow: hidden; margin-bottom: 1rem; display: grid; place-items: center; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member h3 { font-size: 1.8rem; }
.member p { margin: .3rem 0 0; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 700px) { .collage > div:nth-child(n) { grid-column: span 12; margin-top: 0; aspect-ratio: 4/3; } }

/* ---------- FAQ ---------- */
.faq-sec { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5vw; padding: clamp(80px, 12vw, 160px) var(--gutter); }
.faq-side { position: sticky; top: 120px; align-self: start; }
.faq-side h2 { font-size: clamp(2.6rem, 5.6vw, 5.4rem); margin-bottom: 2rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.7rem 0; font: 400 clamp(1.3rem, 2vw, 1.75rem)/1.2 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 1.6rem; line-height: 1; transition: transform .5s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { font-style: italic; }
.faq details p { margin: 0 0 1.7rem; color: var(--ink-soft); max-width: 560px; }
@media (max-width: 900px) { .faq-sec { grid-template-columns: 1fr; } .faq-side { position: static; } }

/* ---------- contacto ---------- */
.contact { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--bg); display: grid; grid-template-columns: 1.2fr 1fr; gap: 5vw; padding: clamp(90px, 12vw, 170px) var(--gutter); }
.contact > :not(.atmos) { position: relative; z-index: 1; }
.contact__title { font-size: clamp(4rem, 13vw, 12rem); line-height: .9; }
.contact__sub { font: 400 clamp(1.3rem, 2.2vw, 2rem)/1.2 var(--serif); margin: 1.4rem 0 3rem; }
.contact__number { display: block; font: italic 400 clamp(2.4rem, 7vw, 6.4rem)/1 var(--serif); letter-spacing: -.02em; transition: opacity .3s; }
.contact__number:hover { opacity: .7; }
.contact__note { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin: 1rem 0 2.4rem; }
.contact__links { display: flex; gap: 2rem; flex-wrap: wrap; font-size: .95rem; }
.contact__links a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.contact__form { align-self: end; background: var(--bg); color: var(--ink); border-radius: 4px; padding: clamp(24px, 3vw, 40px); }
.contact__formtitle { font: italic 400 2rem/1 var(--serif); margin: 0 0 1.4rem; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.footer { padding: 2rem var(--gutter) 0; overflow: hidden; }
.footer__top { display: flex; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }

/* ---------- formularios ---------- */
.form { display: flex; flex-direction: column; gap: 1rem; }
.form label { display: flex; flex-direction: column; gap: .35rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); flex: 1; min-width: 0; }
.form input, .form select, .form textarea { font: 400 1rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .55rem 0; width: 100%; transition: border-color .3s; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-bottom-color: var(--ink); }
.form .row { display: flex; gap: 1.2rem; }
@media (max-width: 480px) { .form .row { flex-direction: column; } }
.form__fields { display: flex; flex-direction: column; gap: 1rem; }
.form__micro { margin: 0; font-size: .72rem; color: var(--ink-soft); text-align: center; }
.form__status { margin: 0; font-size: .9rem; min-height: 1.2em; text-align: center; }
.form .btn { margin-top: .4rem; }
.hp { position: absolute; left: -9999px; }
.survey-cta p:first-child { margin: .4rem 0 1.2rem; color: var(--ink-soft); }
.survey-cta .form__micro { margin-top: .9rem; }
.survey__lang { display: flex; gap: .4rem; }
.survey__lang button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: .35rem 1rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.survey__lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.survey__frame { display: block; width: 100%; height: min(760px, 68vh); border: 0; border-radius: 4px; margin-top: .8rem; background: #fff; }

/* ---------- modal ---------- */
.modal { border: 0; border-radius: 4px; padding: clamp(24px, 4vw, 44px); width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; background: var(--bg); color: var(--ink); }
.modal--survey { width: min(860px, calc(100% - 24px)); }
.modal[open] { animation: modalIn .7s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(.98); } }
.modal::backdrop { background: rgb(10 8 7 / .6); backdrop-filter: blur(6px); }
.modal__title { font: 400 clamp(2rem, 4vw, 2.8rem)/1 var(--serif); margin: 0; }
.modal__sub { color: var(--ink-soft); margin: .6rem 0 1.6rem; font-size: .92rem; }
.modal__close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: 0; font-size: 2rem; font-weight: 300; cursor: pointer; line-height: 1; }

/* ---------- lightbox ---------- */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100svh; max-width: none; max-height: none; background: var(--ink); color: var(--bg); }
.lightbox[open] { display: flex; flex-direction: column; animation: lbIn .8s var(--ease); }
@keyframes lbIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.lightbox__top, .lightbox__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem var(--gutter); }
.lightbox__title { font: italic 400 clamp(1.6rem, 3vw, 2.6rem)/1 var(--serif); margin: 0; }
.lightbox__count { font-size: .75rem; letter-spacing: .2em; }
.lightbox__close, .lightbox__nav { background: none; border: 0; cursor: pointer; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bg); }
.lightbox__nav { font-size: 1.4rem; width: 56px; height: 56px; border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); border-radius: 50%; }
.lightbox__stage { flex: 1; position: relative; overflow: hidden; margin: 0 var(--gutter); border-radius: 3px; }
.lightbox__stage > div { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font: italic 400 1.4rem var(--serif); }
.lightbox__stage img { width: 100%; height: 100%; object-fit: contain; }
.lightbox::backdrop { background: transparent; }

/* ---------- barra móvil ---------- */
.mobilebar { display: none; }
@media (max-width: 760px) {
  .mobilebar { display: flex; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: .6rem 12px calc(.6rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .mobilebar .btn { flex: 1; padding: .85rem; font-size: .7rem; }
  body { padding-bottom: 72px; }
}

/* ---------- Matteo ---------- */
.matteo { position: fixed; right: 18px; bottom: 18px; z-index: 42; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
@media (max-width: 760px) { .matteo { bottom: 84px; } }
.matteo__bubble { width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 30%, transparent), 0 10px 30px rgb(0 0 0 / .25); transition: scale .5s var(--ease); }
.matteo__bubble:hover { scale: 1.08; }
.matteo__panel { width: min(330px, calc(100vw - 36px)); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 20px 50px rgb(0 0 0 / .2); overflow: hidden; }
.matteo__head { background: var(--ink); color: var(--bg); padding: .9rem 1.1rem; display: flex; flex-direction: column; }
.matteo__head strong { font: italic 400 1.4rem var(--serif); }
.matteo__head > div > span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.matteo__msgs { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; max-height: 260px; overflow-y: auto; }
.matteo__msgs p { margin: 0; padding: .6rem .85rem; border-radius: 3px; font-size: .9rem; max-width: 88%; }
.matteo__msgs .bot { background: var(--bg-alt); align-self: flex-start; }
.matteo__msgs .me { background: var(--ink); color: var(--bg); align-self: flex-end; }
.matteo__opts { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem 1rem; }
.matteo__opts button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: .4rem .85rem; font-size: .8rem; cursor: pointer; }

@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 900px) { .hero__bottom { padding-right: 0; } }

/* ---------- footer simple ---------- */
.footer__top { align-items: center; }
.footer__logo { height: 28px; width: auto; }
.footer { padding-bottom: 2rem; }
.footer__top { border-bottom: 0; padding-bottom: 0; }


/* ---------- servicios: pestañas + sub-pestañas ---------- */
.svc__tabs { display: flex; gap: clamp(1.4rem, 3.2vw, 3.4rem); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: clamp(36px, 5vw, 64px); }
.svc__tabs::-webkit-scrollbar { display: none; }
.svc__tab { all: unset; cursor: pointer; position: relative; padding: 0 0 1.1rem; font: 400 clamp(1.4rem, 2.5vw, 2.3rem)/1 var(--serif); white-space: nowrap; opacity: .4; transition: opacity .4s; }
.svc__tab sup { font: 500 .68rem var(--sans); letter-spacing: .15em; margin-right: .5rem; vertical-align: top; position: relative; top: .2em; }
.svc__tab:hover { opacity: .8; }
.svc__tab[aria-selected="true"] { opacity: 1; font-style: italic; }
.svc__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.svc__tab[aria-selected="true"]::after { transform: scaleX(1); }
.svc__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.svc__panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4vw; align-items: start; }
.svc__panel > * { min-width: 0; }
.svc__n { font-size: .8rem; letter-spacing: .16em; opacity: .55; }
.svc__title { font-size: clamp(3rem, 6vw, 5.6rem); margin: .5rem 0 1.2rem; }
.svc__desc { font-size: 1.1rem; color: var(--ink-soft); max-width: 470px; margin: 0 0 2.2rem; }
.svc__sublabel { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; margin: 0 0 .9rem; }
.svc__subs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2.4rem; }
.svc__subs button { flex: none; white-space: nowrap; border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: .55rem 1.05rem; font-size: .92rem; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.svc__subs button:hover { border-color: var(--ink); }
.svc__subs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.svc__media { position: sticky; top: 100px; }
.svc__stage { position: relative; aspect-ratio: 4/3; max-height: 72vh; width: 100%; border-radius: 3px; overflow: hidden; cursor: zoom-in; }
.svc__slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity 1s var(--ease), transform 1.8s var(--ease); display: flex; align-items: flex-end; padding: 1.2rem; }
.svc__slide.on { opacity: 1; transform: scale(1); }
.svc__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc__slide span { position: relative; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.svc__bar { display: flex; align-items: center; gap: 1.2rem; padding-top: 1rem; }
.svc__caption { flex: 1; font: italic 400 1.35rem/1.2 var(--serif); }
.svc__count { font-size: .78rem; letter-spacing: .16em; }
.svc__arrows { display: flex; gap: .5rem; }
.svc__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 1.05rem; transition: background-color .3s, color .3s; }
.svc__arrow:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 900px) {
  .svc__panel { grid-template-columns: 1fr; }
  .svc__media { position: static; order: 2; }
  .svc__subs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .svc__title { font-size: clamp(2.6rem, 11vw, 3.6rem); }
}

/* ---------- nav: menú izquierda · logo centro · CTA derecha ---------- */
.nav__logo { justify-self: center; }
.nav__menu { justify-self: start; flex-direction: row; gap: .7rem; }
.nav__menu i + i { margin-left: -28px; }

/* ---------- menú lateral ---------- */
.menu { position: fixed; top: 0; left: 0; bottom: 0; z-index: 45; width: min(400px, 86vw); background: var(--ink); color: var(--bg);
  display: flex; flex-direction: column; padding: 6.5rem 2.4rem 2.2rem; transform: translateX(-102%); visibility: hidden;
  transition: transform .7s var(--ease), visibility 0s .7s; }
.menu-open .menu { transform: none; visibility: visible; transition: transform .7s var(--ease); }
.menu-scrim { position: fixed; inset: 0; z-index: 44; background: rgb(10 8 7 / .35); opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.menu-open .menu-scrim { opacity: 1; visibility: visible; transition: opacity .5s; }
.menu-open .nav__menu { color: var(--bg); }
.menu-open .nav { background: transparent; backdrop-filter: none; }
.menu__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.menu__links a { display: inline-flex; align-items: baseline; gap: .9rem; font: 400 clamp(1.7rem, 2.4vw, 2.1rem)/1.25 var(--serif); transition: padding .4s var(--ease), opacity .3s; }
.menu__links a:hover { font-style: italic; padding-left: .5rem; }
.menu__links sup { font: 500 .66rem var(--sans); letter-spacing: .16em; opacity: .5; }
.menu__foot { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; font-size: .88rem; opacity: .75; }
.nav__menu i + i { margin-left: calc(-22px - .7rem); }
.menu-open .nav__menu i:first-of-type { transform: rotate(45deg); }
.menu-open .nav__menu i + i { transform: rotate(-45deg); }
@media (max-width: 900px) { .menu-open .nav__logo { opacity: 0; pointer-events: none; } .nav__logo { transition: opacity .3s; } }

/* ---------- íconos de línea ---------- */
.ico { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 50%; transition: background-color .4s, color .4s, border-color .4s; }
.ico svg { width: 15px; height: 15px; }
.menu__foot { gap: .7rem; opacity: .85; }
.menu__foot > * { display: flex; align-items: center; gap: .85rem; letter-spacing: .02em; }
.menu__foot a:hover .ico, .contact__links a:hover .ico { background: currentColor; }
.menu__foot a:hover .ico svg, .contact__links a:hover .ico svg { color: var(--ink); }
.contact__links a { display: inline-flex; align-items: center; gap: .8rem; background: none; padding: 0; }

/* ---------- contacto: tono tranquilo ---------- */
.contact { background: var(--bg-alt); color: var(--ink); align-items: end; }
.contact__title { font-size: clamp(2.8rem, 5.4vw, 4.8rem); }
.contact__sub { font: 400 clamp(1.1rem, 1.6vw, 1.35rem)/1.4 var(--serif); color: var(--ink-soft); margin: 1rem 0 2.6rem; }
.contact__list { list-style: none; margin: 0; padding: 0; max-width: 460px; border-top: 1px solid var(--line); }
.contact__list li { border-bottom: 1px solid var(--line); }
.contact__list a, .contact__item { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; font-size: 1rem; }
.contact__list small { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .15rem; }
.contact__list a:hover .ico { background: var(--ink); }
.contact__list a:hover .ico svg { color: var(--bg); }
.contact__form { background: var(--bg); border: 1px solid var(--line); }
.atmos--soft { opacity: .5; }
.atmos--soft::after { display: none; }

/* ---------- Matteo: mascota con ojitos ---------- */
:root { --matteo: #6b1e2e; } /* burdeo */
.matteo__bubble { width: 66px; height: 66px; background: var(--matteo); box-shadow: 0 10px 30px rgb(0 0 0 / .18); transition: scale .4s var(--ease); }
.matteo__bubble:hover { scale: 1.08; animation: hop .6s var(--ease); }
@keyframes hop { 30% { translate: 0 -6px; } 60% { translate: 0 0; } 80% { translate: 0 -2px; } }
.eyes { display: flex; gap: 4px; --px: 0px; --py: 2.5px; }
.eye { position: relative; width: 22px; height: 14px; background: #fff; border-radius: 7px; overflow: hidden; transition: transform .09s ease-in; }
.pupil { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #000;
  transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))); transition: transform .12s ease-out; }
.eyes.blink .eye { transform: scaleY(.1); }
.matteo__bubble:hover .eye { transform: scaleY(1.15); }
.eyes--sm { gap: 3px; width: 40px; height: 40px; flex: none; justify-content: center; align-items: center; background: var(--matteo); border-radius: 50%; }
.eyes--sm .eye { width: 13px; height: 9px; border-radius: 5px; }
.eyes--sm .pupil { width: 6px; height: 6px; }
.matteo__head { flex-direction: row; align-items: center; gap: .8rem; }
.matteo__head > div { display: flex; flex-direction: column; }

/* ---------- Matteo: escribir + "escribiendo…" ---------- */
.matteo__msgs { max-height: 300px; }
.matteo__input { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; border-top: 1px solid var(--line); }
.matteo__input input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 .95rem var(--sans); color: var(--ink); padding: .4rem .2rem; }
.matteo__input input:focus { outline: 0; }
.matteo__input button { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--matteo); color: #fff; cursor: pointer; display: grid; place-items: center; transition: scale .3s var(--ease); }
.matteo__input button:hover { scale: 1.08; }
.matteo__input svg { width: 17px; height: 17px; }
.matteo__msgs .typing { display: flex; gap: 4px; padding: .75rem .85rem; }
.matteo__msgs .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); animation: dot 1s infinite ease-in-out; }
.matteo__msgs .typing i:nth-child(2) { animation-delay: .15s; }
.matteo__msgs .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.matteo__opts { padding-bottom: .8rem; }

/* ---------- banner de cookies ---------- */
.cookies { position: fixed; left: 50%; bottom: 18px; translate: -50% 0; z-index: 60; width: min(620px, calc(100vw - 24px)); display: flex; align-items: center; gap: 1.2rem;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 1rem 1.2rem; box-shadow: 0 18px 50px rgb(0 0 0 / .14); font-size: .88rem; animation: modalIn .7s var(--ease); }
.cookies p { margin: 0; flex: 1; }
.cookies a, .form__micro a { text-decoration: underline; text-underline-offset: 3px; }
.cookies__btns { display: flex; gap: .5rem; flex: none; }
@media (max-width: 760px) { .cookies { flex-direction: column; align-items: stretch; bottom: 84px; } .cookies__btns .btn { flex: 1; } }

/* foco: solo visible al navegar con teclado */
.modal__close:focus:not(:focus-visible), .lightbox__close:focus:not(:focus-visible) { outline: none; }
.modal__close:focus-visible, .lightbox__close:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; border-radius: 50%; }

/* ---------- barra superior fija: menú · logo al centro · links a la derecha ---------- */
.nav { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .4s, padding .5s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav__links { justify-self: end; display: flex; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.nav__links a { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; position: relative; padding: .3rem 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav__links a:hover::after, .nav__links a.on::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 760px) { .nav__links { display: none; } }

/* ---------- tipografías (selector en el panel Identidad) ----------
   --serif: títulos · --sans: texto · --serif-it: palabras en itálica */
[data-tipo="caslon"]   { --serif: "Libre Caslon Display", Georgia, serif; --serif-it: "Libre Caslon Text", Georgia, serif; --sans: "Libre Franklin", system-ui, sans-serif; }
[data-tipo="gloock"]   { --serif: "Gloock", Georgia, serif; --serif-it: "Cormorant Garamond", Georgia, serif; --sans: "Schibsted Grotesk", system-ui, sans-serif; }
[data-tipo="archivo"]  { --serif: "Archivo", system-ui, sans-serif; --serif-it: "Cormorant Garamond", Georgia, serif; --sans: "Archivo", system-ui, sans-serif; }
[data-tipo="playfair"] { --serif: "Playfair Display", Georgia, serif; --serif-it: "Playfair Display", Georgia, serif; --sans: "Libre Franklin", system-ui, sans-serif; }
em { font-family: var(--serif-it, inherit); }
[data-tipo="caslon"], [data-tipo="gloock"], [data-tipo="archivo"] { font-synthesis: none; }
[data-tipo="gloock"] em, [data-tipo="archivo"] em { font-weight: 500; font-size: 1.08em; letter-spacing: -.01em; }
/* Archivo: grotesk condensado, contundente (estilo Jacquemus) */
[data-tipo="archivo"] h1, [data-tipo="archivo"] h2, [data-tipo="archivo"] h3, [data-tipo="archivo"] .svc__tab, [data-tipo="archivo"] .menu__links a,
[data-tipo="archivo"] .faq summary, [data-tipo="archivo"] .stat b, [data-tipo="archivo"] .svc__caption { font-stretch: 75%; font-weight: 600; letter-spacing: -.03em; }

/* ---------- selector de idioma ES / EN ---------- */
.nav__right { justify-self: end; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__right .nav__links { justify-self: auto; }
.lang { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.lang button { border: 0; background: transparent; color: var(--ink); font: 500 .66rem var(--sans); letter-spacing: .14em; padding: .32rem .55rem; border-radius: 999px; cursor: pointer; opacity: .55; transition: background-color .3s, color .3s, opacity .3s; }
.lang button:hover { opacity: 1; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); opacity: 1; }
@media (max-width: 760px) { .menu-open .nav__right { opacity: 0; pointer-events: none; } }

/* ---------- MATTERIA SIGNATURE (galería) ---------- */
.sig-hero { padding: 9rem var(--gutter) clamp(40px, 6vw, 80px); }
.sig-hero h1 { font-size: clamp(3.4rem, 10vw, 9rem); line-height: .9; }
.sig-hero h1 > span:nth-child(2) { padding-left: 8vw; }
.sig-hero__sub { max-width: 460px; margin: 1.8rem 0 0; font-size: 1.1rem; color: var(--ink-soft); }
.sig { padding: 0 var(--gutter) clamp(80px, 10vw, 140px); }
.sig__filters { display: flex; gap: .45rem; flex-wrap: wrap; position: sticky; top: 70px; z-index: 5; padding: .9rem 0; margin-bottom: 1.6rem; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); }
.sig__filters button { flex: none; border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: .55rem 1.1rem; font-size: .9rem; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.sig__filters button:hover { border-color: var(--ink); }
.sig__filters button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sig__grid { columns: 3 260px; column-gap: 1rem; }
.sig__item { border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; background-color: var(--bg-alt); box-sizing: border-box; display: block; width: 100%; break-inside: avoid; margin-bottom: 1rem; position: relative; overflow: hidden; border-radius: 3px; cursor: zoom-in; }
.sig__item--v { aspect-ratio: 4/5; }
.sig__item--h { aspect-ratio: 4/3; }
.sig__item--c { aspect-ratio: 1; }
.sig__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sig__item:hover img { transform: scale(1.04); }
.sig__cap { position: absolute; left: .9rem; bottom: .8rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); opacity: .75; transition: opacity .4s; }
.sig__item:has(img) .sig__cap { color: #fff; opacity: 0; text-shadow: 0 1px 8px rgb(0 0 0 / .4); }
.sig__item:has(img):hover .sig__cap { opacity: 1; }
.sig__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sig__cta { text-align: center; padding-top: clamp(50px, 7vw, 90px); }
.sig__cta p { font: 400 clamp(1.6rem, 3vw, 2.4rem)/1.2 var(--serif); margin: 0 0 1.6rem; }
@media (max-width: 760px) { .sig__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; top: 60px; } .sig__grid { columns: 2 140px; column-gap: .6rem; } .sig__item { margin-bottom: .6rem; } }

/* enlace a Signature desde Servicios */
.svc__more { display: inline-block; margin-top: 1.2rem; }

/* ---------- FAQ por categoría ---------- */
.faq__tabs { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.faq__tabs button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: .55rem 1.15rem; font-size: .92rem; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.faq__tabs button:hover { border-color: var(--ink); }
.faq__tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- entrada: gota + m (creative lab) ---------- */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); cursor: pointer; overflow: hidden; }
.intro__blob { position: absolute; width: min(46vmin, 380px); aspect-ratio: 1; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background: radial-gradient(circle at 32% 28%, var(--tone2), var(--tone1) 48%, var(--tone3));
  transform: scale(0); animation: morph 3s ease-in-out infinite; }
.intro__m { position: relative; width: clamp(80px, 14vmin, 130px); opacity: 0; }
.intro__tag { position: absolute; bottom: 12vh; margin: 0; font: italic 400 1.1rem var(--serif-it, var(--serif)); letter-spacing: .02em; opacity: 0; }

/* ---------- PORTADA con fotos (estilo editorial) ---------- */
.hero--photo { min-height: 100svh; padding: 0; display: grid; place-items: center; color: #fff; background: #1b1512; }
.hero--photo .hero__slides, .hero--photo .hero__shade { position: absolute; inset: 0; z-index: 0; }
.hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08);
  transition: opacity 1.6s var(--ease), transform 7s linear; }
.hero__slide.on { opacity: 1; transform: scale(1); }
.hero__shade { background: linear-gradient(180deg, rgb(0 0 0 / .18) 0%, rgb(0 0 0 / .08) 40%, rgb(0 0 0 / .42) 100%); }
/* fondos de muestra mientras no hay fotos */
.hph-1 { background: radial-gradient(circle at 25% 30%, #c99a83, transparent 55%), radial-gradient(circle at 75% 75%, #6a4a3e, transparent 60%), #3a2a24; }
.hph-2 { background: radial-gradient(circle at 70% 25%, #8fa9a6, transparent 55%), radial-gradient(circle at 25% 80%, #4d3a33, transparent 60%), #2e2522; }
.hph-3 { background: radial-gradient(circle at 50% 40%, #b98576, transparent 50%), radial-gradient(circle at 85% 85%, #3f2f2a, transparent 60%), #2a201d; }
.hph-4 { background: radial-gradient(circle at 30% 70%, #a7b9b3, transparent 50%), radial-gradient(circle at 80% 20%, #8a5c4d, transparent 55%), #33282a; }
.hero__center { position: relative; z-index: 2; text-align: center; padding: 7rem var(--gutter) 5rem; max-width: 1100px; }
.hero--photo .hero__kicker { color: #fff; opacity: .85; margin-bottom: 1.4rem; }
.hero--photo .hero__title { font-size: clamp(2.8rem, 7.4vw, 7rem); line-height: .95; color: #fff; text-shadow: 0 2px 30px rgb(0 0 0 / .25); }
.hero--photo .hero__title > span:nth-child(n) { padding-left: 0; }
.hero--photo .hero__ctas { justify-content: center; margin-top: 2.6rem; gap: .8rem; }
.btn--glass { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .75); backdrop-filter: blur(6px); }
.btn--glass:hover { color: var(--ink); }
.btn--glass::after { background: #fff; }
.hero--photo .btn--light::after { background: var(--tone2); }
.hero__dots { position: absolute; z-index: 2; bottom: 1.8rem; left: 50%; translate: -50% 0; display: flex; gap: .5rem; }
.hero__dots button { width: 26px; height: 2px; border: 0; padding: 0; background: rgb(255 255 255 / .45); cursor: pointer; transition: background-color .3s, width .4s var(--ease); }
.hero__dots button[aria-selected="true"] { background: #fff; width: 42px; }
/* menú Email / WhatsApp */
.contact-pop { position: relative; }
.contact-pop__menu { position: absolute; top: calc(100% + .6rem); left: 50%; translate: -50% 0; min-width: 220px; background: var(--bg); color: var(--ink);
  border-radius: 4px; padding: .4rem; box-shadow: 0 18px 50px rgb(0 0 0 / .25); display: grid; animation: modalIn .4s var(--ease); z-index: 5; }
.contact-pop__menu a { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; border-radius: 3px; font-size: .95rem; text-align: left; }
.contact-pop__menu a:hover { background: var(--bg-alt); }
.contact-pop__menu .ico { width: 30px; height: 30px; }
@media (max-width: 600px) { .hero--photo .hero__ctas { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; } .contact-pop .btn { width: 100%; } }
/* la barra arriba de la portada con foto: siempre clara y legible */
.nav { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.hero.hero--photo > .hero__slides, .hero.hero--photo > .hero__shade { position: absolute; inset: 0; z-index: 0; }
.hero.hero--photo > .hero__dots { position: absolute; z-index: 2; }
.hero.hero--photo > .hero__center { grid-area: 1 / 1; }
.hero.hero--photo { justify-content: center; align-content: center; }


/* ---------- Signature: cinta de reels ---------- */
.reelstrip { padding: 0 0 clamp(50px, 7vw, 90px); overflow: hidden; }
.reelstrip__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--gutter); margin-bottom: 1.2rem; }
.reelstrip__head .label { margin: 0; }
.reelstrip__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reelstrip__track { display: flex; gap: 1rem; width: max-content; animation: reelscroll 60s linear infinite; }
.reelstrip__viewport:hover .reelstrip__track, .reelstrip__track:focus-within { animation-play-state: paused; }
@keyframes reelscroll { to { transform: translateX(calc(-50% - .5rem)); } }
.reelcard { border: 0; padding: 0; background: var(--bg-alt); cursor: pointer; position: relative; flex: none; width: clamp(180px, 17vw, 250px); aspect-ratio: 9/16; border-radius: 4px; overflow: hidden; }
.reelcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.reelcard:hover img { transform: scale(1.05); }
.reelcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgb(0 0 0 / .35)); }
.reelcard__play { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .8); background: rgb(255 255 255 / .12); backdrop-filter: blur(6px); transition: scale .4s var(--ease), background-color .3s; }
.reelcard__play::before { content: ""; position: absolute; left: 53%; top: 50%; translate: -50% -50%; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.reelcard:hover .reelcard__play { scale: 1.1; background: rgb(255 255 255 / .25); }
.reelcard:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* reel en grande */
.reelbox { border: 0; padding: 0; background: transparent; width: min(420px, 92vw); max-height: 92vh; overflow: visible; }
.reelbox::backdrop { background: rgb(10 8 7 / .8); backdrop-filter: blur(6px); }
.reelbox[open] { animation: modalIn .6s var(--ease); }
.reelbox__frame { aspect-ratio: 9/16; max-height: 88vh; width: 100%; border-radius: 6px; overflow: hidden; background: #000; }
.reelbox__frame iframe { width: 100%; height: 100%; border: 0; }
.reelbox__close { position: absolute; top: -2.6rem; right: 0; background: none; border: 0; color: #fff; font-size: 2rem; font-weight: 300; cursor: pointer; }
.sig--end { padding-bottom: clamp(80px, 10vw, 140px); }
@media (prefers-reduced-motion: reduce) { .reelstrip__viewport { overflow-x: auto; } }
.reelbox__close { top: -3rem; } .reelbox__close:focus:not(:focus-visible) { outline: none; }
/* cinta manejable */
.reelstrip__viewport { overflow-x: auto; scrollbar-width: none; cursor: grab; }
.reelstrip__viewport::-webkit-scrollbar { display: none; }
.reelstrip__viewport.dragging { cursor: grabbing; user-select: none; }
.reelstrip__viewport.dragging .reelcard { pointer-events: none; }
.reelstrip__track { animation: none !important; }
.reelcard img { -webkit-user-drag: none; user-select: none; }
.reelstrip__ctrl { display: flex; align-items: center; gap: .6rem; }
.reelstrip__ctrl .link-u { margin-right: .8rem; }
.reelstrip__ctrl .svc__arrow { width: 42px; height: 42px; }


/* ---------- Matteo: masita con gorro de fiesta ---------- */
.matteo__bubble { background: transparent !important; box-shadow: none !important; width: 74px; height: 74px; overflow: visible; }
.matteo__bubble:hover { animation: none; }
.mt { position: relative; display: block; width: 64px; height: 58px; }
.mt-body { position: absolute; inset: 0; background: radial-gradient(circle at 35% 30%, #8a2e40, var(--matteo) 60%); display: grid; place-items: center;
  border-radius: 48% 52% 46% 54% / 56% 54% 46% 44%; box-shadow: 0 10px 24px rgb(80 15 30 / .35); animation: mtBlob 5s ease-in-out infinite; }
.mt .eyes { position: relative; top: 2px; }
.mt-blush { position: absolute; width: 9px; height: 5px; border-radius: 50%; background: #f2a3a3; opacity: .55; top: 62%; }
.mt-blush--l { left: 17%; } .mt-blush--r { right: 17%; }
.mt-hat { position: absolute; z-index: 2; width: 26px; height: 30px; left: 50%; top: -22px; translate: -30% 0; rotate: 14deg; transform-origin: 50% 100%; animation: mtHat 5s ease-in-out infinite; }
.mt-arm { position: absolute; z-index: 0; width: 20px; height: 13px; right: -9px; top: 46%; background: var(--matteo); border-radius: 60% 50% 50% 60%; transform-origin: 0% 60%; rotate: 20deg; }
.mt.hola { animation: mtHop .9s var(--ease); }
.mt.hola .mt-arm { animation: mtWave 1.5s ease-in-out; }
.mt.hola .mt-hat { animation: mtHatHop .9s var(--ease); }
@keyframes mtBlob { 0%, 100% { border-radius: 48% 52% 46% 54% / 56% 54% 46% 44%; transform: scale(1, 1); } 50% { border-radius: 54% 46% 52% 48% / 50% 58% 42% 50%; transform: scale(1.03, .97); } }
@keyframes mtHat { 0%, 100% { rotate: 14deg; } 50% { rotate: 9deg; } }
@keyframes mtHop { 0% { translate: 0 0; } 25% { translate: 0 -14px; } 45% { translate: 0 0; scale: 1.08 .92; } 60% { translate: 0 -5px; scale: 1; } 100% { translate: 0 0; } }
@keyframes mtHatHop { 25% { rotate: -6deg; translate: -30% -4px; } 60% { rotate: 20deg; } }
@keyframes mtWave { 0% { rotate: 20deg; } 15% { rotate: -70deg; translate: 2px -10px; } 30% { rotate: -35deg; translate: 2px -10px; } 45% { rotate: -75deg; translate: 2px -10px; } 60% { rotate: -35deg; translate: 2px -10px; } 75% { rotate: -70deg; translate: 2px -10px; } 100% { rotate: 20deg; } }
/* tamaño chico en la cabecera del chat */
.mt--sm { width: 40px; height: 36px; flex: none; margin-top: 8px; }
.mt--sm .eyes { gap: 2px; } .mt--sm .eye { width: 12px; height: 8px; } .mt--sm .pupil { width: 5px; height: 5px; }
.mt--sm .mt-hat { width: 17px; height: 20px; top: -15px; }
.mt--sm .mt-arm { width: 12px; height: 8px; right: -5px; }
.mt--sm .mt-blush { width: 6px; height: 3px; }
.mt--sm .mt-body { box-shadow: none; }
/* grande al abrir el chat */
.matteo__hello { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.4rem 0 .4rem; }
.matteo__hello p { margin: 0; font: 400 1.15rem var(--serif); background: none !important; }
.mt--lg { width: 96px; height: 86px; }
.mt--lg .eye { width: 28px; height: 18px; } .mt--lg .pupil { width: 12px; height: 12px; } .mt--lg .eyes { gap: 5px; }
.mt--lg .mt-hat { width: 38px; height: 44px; top: -32px; }
.mt--lg .mt-arm { width: 28px; height: 18px; right: -13px; }
.mt--lg .mt-blush { width: 13px; height: 7px; }
.mt--lg.hola .mt-arm { animation: mtWave 1.5s ease-in-out .3s 2; }
@media (prefers-reduced-motion: reduce) { .mt, .mt *, .mt-body { animation: none !important; } }
/* gorro de fiesta (CSS, sin SVG) */
.mt-cone { position: absolute; inset: 0; clip-path: polygon(50% 6%, 100% 100%, 0 100%);
  background: repeating-linear-gradient(125deg, #f6dccb 0 4px, #f2b8a0 4px 8px, #f6dccb 8px 10px, #a9d3d0 10px 12px); }
.mt-cone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: #fff; }
.mt-pom { position: absolute; width: 34%; aspect-ratio: 1; left: 50%; top: -6%; translate: -50% 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #f2b8a0; }
.matteo__head { padding-top: 1.3rem; } .mt--sm { margin-top: 4px; }

/* ---------- Matteo: el panel nunca se sale de la pantalla ---------- */
.matteo__panel:not([hidden]) { display: flex; flex-direction: column; max-height: calc(100svh - 180px); }
.matteo__head, .matteo__opts, .matteo__input { flex: none; }
.matteo__msgs { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
.matteo__hello { flex: none; }
@media (max-width: 760px) { .matteo__panel:not([hidden]) { max-height: calc(100svh - 250px); } }
@media (max-height: 720px) { .matteo__hello { padding-top: .8rem; } .matteo__hello .mt--lg { width: 64px; height: 58px; } .matteo__hello .mt--lg .eye { width: 22px; height: 14px; } .matteo__hello .mt--lg .pupil { width: 10px; height: 10px; } .matteo__hello .mt--lg .mt-arm { width: 20px; height: 13px; right: -9px; } .matteo__hello .mt--lg .mt-blush { width: 9px; height: 5px; } }
.matteo__msgs > * { flex: none; }
@media (max-height: 720px) { .matteo__opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .matteo__opts::-webkit-scrollbar { display: none; } .matteo__opts button { flex: none; white-space: nowrap; } }

/* ---------- Matteo: calendario "buscando" ---------- */
.matteo__cal { background: var(--bg-alt); border-radius: 6px; padding: .8rem; max-width: 92%; align-self: flex-start; animation: modalIn .5s var(--ease); }
.matteo__calhead { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .55rem; }
.matteo__calhead b { font: 400 1.05rem var(--serif); text-transform: capitalize; }
.matteo__calhead span { font-size: .7rem; color: var(--ink-soft); }
.matteo__calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.matteo__calgrid span { display: grid; place-items: center; aspect-ratio: 1; font-size: .68rem; border-radius: 50%; transition: background-color .15s, color .15s; }
.matteo__calgrid span.on { background: var(--matteo); color: #fff; }
.matteo__cal.listo .matteo__calhead span { color: var(--matteo); font-weight: 600; }

/* ---------- Matteo: el chat se abre sobre la burbuja y la reemplaza ---------- */
.matteo__panel:not([hidden]) ~ .matteo__bubble { display: none; }
.matteo__panel:not([hidden]) { max-height: calc(100svh - 104px); }
@media (max-width: 760px) { .matteo__panel:not([hidden]) { max-height: calc(100svh - 170px); } }
.matteo__head > div { flex: 1; min-width: 0; }
.matteo__close { flex: none; align-self: flex-start; width: 34px; height: 34px; margin: -.3rem -.3rem 0 0; background: none; border: 0; color: var(--bg); font-size: 1.6rem; font-weight: 300; line-height: 1; cursor: pointer; opacity: .8; transition: opacity .2s; }
.matteo__close:hover { opacity: 1; }
/* calendario: ancho fijo, sin saltos */
.matteo__cal { width: 92%; }
.matteo__calhead { flex-wrap: nowrap; }
.matteo__calhead b { white-space: nowrap; }
.matteo__calhead span { white-space: nowrap; }
.matteo__calgrid span { aspect-ratio: auto; height: 24px; }
/* un solo Matteo: el de la cabecera, más grande */
.mt--sm { width: 52px; height: 46px; margin-top: 2px; }
.mt--sm .eye { width: 15px; height: 10px; } .mt--sm .pupil { width: 7px; height: 7px; } .mt--sm .eyes { gap: 3px; }
.mt--sm .mt-arm { width: 15px; height: 10px; right: -7px; }
.matteo__head { padding-top: 1rem; }
.hero__shade { background: linear-gradient(180deg, rgb(0 0 0 / .32) 0%, rgb(0 0 0 / .28) 45%, rgb(0 0 0 / .5) 100%); }
.label span { display: none; } .label { gap: 0; }

/* flechas de fotos centradas (Matteo vive en la esquina derecha) */
.svc__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.svc__caption { justify-self: start; }
.svc__arrows { justify-self: center; grid-column: 2; grid-row: 1; }
.svc__count { justify-self: end; grid-column: 3; grid-row: 1; }
.lightbox__bottom { justify-content: center; gap: 1.2rem; }
.lightbox[open] ~ .matteo, body:has(dialog[open]) .matteo { display: none; }
.lightbox__stage > div { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lightbox__stage > div > img { position: static; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; }
.lightbox__close { border: 0 !important; outline: none; }
.lightbox__close:focus { outline: none; box-shadow: none; } .lightbox__close:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
/* reel con reproductor propio */
.reelbox { width: min(440px, 92vw); }
.reelbox__frame { background: #000; border-radius: 8px; }
.reelbox__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* acentos burdeo en la paleta oficial */
[data-paleta="burdeo"] .btn:not(.btn--light):not(.btn--glass):not(.btn--line) { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-paleta="burdeo"] .btn:not(.btn--light):not(.btn--glass)::after { background: #111; }
[data-paleta="burdeo"] .btn:not(.btn--light):not(.btn--glass):hover { color: #fff; }
[data-paleta="burdeo"] h1 em, [data-paleta="burdeo"] h2 em { color: var(--accent); }
[data-paleta="burdeo"] .hero--photo h1 em { color: #fff; }
[data-paleta="burdeo"] .svc__tab[aria-selected="true"], [data-paleta="burdeo"] .nav__links a.on { color: var(--accent); }
[data-paleta="burdeo"] .svc__tab::after { background: var(--accent); }
[data-paleta="burdeo"] .svc__subs button[aria-selected="true"], [data-paleta="burdeo"] .faq__tabs button[aria-selected="true"], [data-paleta="burdeo"] .sig__filters button[aria-selected="true"], [data-paleta="burdeo"] .lang button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-paleta="burdeo"] .matteo__head, [data-paleta="burdeo"] .menu { background: #111; }
[data-paleta="burdeo"] .contact { background: var(--bg-alt); }
.label { margin-bottom: 1.4rem; display: block; }

/* nada azul del navegador: foco, selección y controles en burdeo */
:root { accent-color: #6b1e2e; }
:focus-visible { outline: 2px solid #6b1e2e; outline-offset: 3px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
::selection { background: #6b1e2e; color: #fff; }
a { -webkit-tap-highlight-color: transparent; }
input, select, textarea { caret-color: #6b1e2e; }

/* ===== PALETA FIJA: blanco · burdeo · negro (no depende de nada más) ===== */
:root, html[data-paleta] {
  --bg: #ffffff; --bg-alt: #f7f2f3; --line: rgba(17,17,17,.12);
  --ink: #111111; --ink-soft: #555055; --accent: #6b1e2e; --accent-ink: #ffffff;
  --tone1: #e9d3d7; --tone2: #f7eef0; --tone3: #c99aa3; --matteo: #6b1e2e;
}
h1 em, h2 em, .svc__tab[aria-selected="true"], .nav__links a.on, .nav__links a:hover { color: #6b1e2e; }
.hero--photo h1 em { color: #fff; }
.svc__tab::after, .nav__links a::after { background: #6b1e2e; }
.lang button[aria-pressed="true"], .svc__subs button[aria-selected="true"], .faq__tabs button[aria-selected="true"], .sig__filters button[aria-selected="true"] { background: #6b1e2e; border-color: #6b1e2e; color: #fff; }

/* ---------- celular: m a la izquierda · hamburguesa a la derecha ---------- */
.menu__lang { display: none; }
@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto; padding-top: .8rem; padding-bottom: .8rem; }
  .nav__logo { order: 1; justify-self: start; }
  .nav__logo img { height: 28px !important; }
  .nav__menu { order: 2; justify-self: end; }
  .nav__menu span { display: none; }
  .nav__menu i { width: 24px; height: 1.5px; }
  .nav__right { display: none; }
  .menu { left: auto; right: 0; transform: translateX(102%); }
  .menu-open .menu { transform: none; }
  .menu-open .nav__logo { opacity: 1; pointer-events: auto; }
  .menu-open .nav__menu { color: var(--bg); z-index: 50; }
  .menu__lang { display: inline-flex; align-self: flex-start; margin-bottom: 1.6rem; border-color: rgb(255 255 255 / .3); }
  .menu__lang button { color: #fff; }
  .menu__lang button[aria-pressed="true"] { background: #fff; color: #111; }
}

/* sub-pestaña sin fotos todavía */
.svc__slide--vacio { flex-direction: column; justify-content: center; align-items: center; gap: .6rem; text-align: center; background: #111; color: #fff; padding: 2rem; }
.svc__slide--vacio .svc__m { position: static; width: 64px; height: auto; filter: invert(1); opacity: .9; }
.svc__slide--vacio p { margin: .4rem 0 0; font: italic 400 clamp(1.8rem, 3vw, 2.6rem)/1.1 var(--serif); }
.svc__slide--vacio span { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; max-width: 320px; }
.sin-fotos .svc__arrows, .sin-fotos .svc__count { visibility: hidden; }
.sin-fotos .svc__stage { cursor: default; }

/* adelanto de Matteria Signature en el inicio */
.sigteaser { padding: clamp(70px, 9vw, 120px) var(--gutter); background: var(--bg-alt); }
.sigteaser h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
.sigteaser__row { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr 1fr 1.2fr; gap: .8rem; height: clamp(260px, 34vw, 480px); }
.sigteaser__row span { border-radius: 3px; background-size: cover; background-position: center; transition: transform 1s var(--ease), filter .6s; }
.sigteaser__row span:nth-child(even) { margin-top: 2.4rem; }
.sigteaser__row:hover span { filter: brightness(.92); }
.sigteaser__row span:hover { transform: scale(1.03); filter: none; }
.sigteaser__sub { margin: 1.6rem 0 0; color: var(--ink-soft); max-width: 520px; }
@media (max-width: 760px) { .sigteaser__row { grid-template-columns: 1fr 1fr; height: auto; } .sigteaser__row span { aspect-ratio: 3/4; } .sigteaser__row span:nth-child(n+5) { display: none; } .sigteaser__row span:nth-child(even) { margin-top: 1.4rem; } }
@media (max-width: 900px) { .svc__subs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 2.5rem; } }

/* celular: todo visible, sin deslizar */
@media (max-width: 900px) {
  .svc__subs { flex-wrap: wrap !important; overflow: visible !important; margin-inline: 0 !important; padding-inline: 0 !important; padding-right: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .svc__subs button { padding: .5rem .9rem; font-size: .88rem; }
  .svc__tabs { flex-wrap: wrap; overflow: visible; gap: .5rem; border-bottom: 0; margin-bottom: 2rem; }
  .svc__tab { font-size: 1.15rem; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; opacity: 1; color: var(--ink); }
  .svc__tab::after { display: none; }
  .svc__tab[aria-selected="true"] { background: #6b1e2e; border-color: #6b1e2e; color: #fff !important; font-style: normal; }
  .faq__tabs { gap: .4rem; }
}