/* ============================================================
   Miriam González — UGC Creator · Hoja de estilos optimizada
   ============================================================ */

/* === Variables y reset === */
:root{--granate:#720010;--granate-2:#560009;--bone:#FFFBF8;--ink:#000000;--meta:#6F6F6F;--radius:16px;--shadow:0 12px 28px rgba(0,0,0,.12);--font-title:'DM Serif Text',serif;--font-ui:'Cormorant Garamond',serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:80px}
body{margin:0;font-family:var(--font-ui);font-weight:400;color:var(--ink);background-color:var(--bone);font-size:17px;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-width:320px}
body.menu-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* === Utilidades === */
.container{width:min(1200px,92vw);margin-inline:auto;overflow-x:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hidden{display:none !important}
.sub{color:var(--meta)}
.muted{color:var(--meta)}

.span-all{grid-column:1 / -1}
:focus-visible{outline:2px solid var(--granate);outline-offset:2px;border-radius:10px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* === Tipografía === */
h1,h2,h3{font-family:var(--font-title);color:var(--granate);text-align:center;text-transform:none;margin:0 0 .4em}
h1{font-size:2.8rem;line-height:1.15;font-weight:400}
h2{font-size:2.2rem;line-height:1.2;font-weight:400}
h2::after{content:"";display:block;width:52px;height:4px;border-radius:4px;background:var(--granate);margin:6px auto 0}
h3{font-size:1.3rem;line-height:1.3;font-weight:400}
p{font-family:var(--font-ui);color:var(--ink);line-height:1.75;font-size:1.5rem;font-weight:600}
.proceso-subtitle,.tools-subtitle,.reviews-label,.proceso-label,.servicios-intro p,.pack-subtitle,.hero-tagline,.about-intro p{font-family:var(--font-ui);color:var(--meta);font-style:italic;font-size:1.6rem;font-weight:600;text-align:center}
nav a,.nav-link{font-family:var(--font-ui);font-size:1.3rem;font-weight:700;color:var(--ink);letter-spacing:0.02em}
button,.btn,a.btn,input[type="submit"]{font-family:var(--font-ui);font-weight:700;font-size:1.3rem}
small,.meta,.pack-note,.timeline-num,.paso-num,.price-from,.section-label,.chip,.reviews-label,.proceso-label{font-family:var(--font-ui);color:var(--meta);font-size:1.3rem;font-weight:600}
li{font-family:var(--font-ui);font-size:1.3rem;font-weight:600;line-height:1.6}
#proceso p,#herramientas p,.timeline-content p,.tool-card span,.pack p,.pack li,.pack h3{font-family:var(--font-ui);font-size:1.3rem;font-weight:600;color:rgba(255,251,248,0.95)}
#proceso h2,#proceso h3,#herramientas h2,.timeline-content h3,.pack h3{font-family:var(--font-title);color:var(--bone);text-align:center}
#proceso .proceso-label,#proceso .proceso-subtitle{color:rgba(255,251,248,0.75);font-style:italic}
#herramientas .tools-subtitle{color:rgba(255,251,248,0.75);font-style:italic}
.price-amount{font-family:var(--font-title);color:var(--bone);font-size:2rem;font-weight:400}
.pack li{font-family:var(--font-ui);font-size:1.4rem;font-weight:600;color:rgba(255,251,248,0.9);line-height:1.6}

/* === Botones === */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border-radius:12px;border:1px solid rgba(0,0,0,.08);transition:.2s transform,.2s filter,.2s box-shadow;font-weight:700;font-family:var(--font-ui);font-size:1.1rem;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--granate);color:#fff;border:none;box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:#fff;color:var(--granate);border-color:var(--granate)}
.btn-ghost:hover{background:rgba(122,14,33,.08)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:700px){.cta-row{justify-content:center}}
@media (max-width:480px){.btn{padding:.8rem 1rem;font-size:15px}.cta-row{flex-direction:column;gap:8px}.cta-row .btn{width:100%;justify-content:center}}

/* === Chips / filtros === */
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(0,0,0,.08);background:#fff;color:#572;font-weight:500;font-family:"DM Serif Text",Georgia,serif;cursor:pointer}
.chip:hover{border-color:var(--granate);color:var(--granate)}
.chip[data-active="true"]{background:var(--granate);color:#fff;border-color:var(--granate)}

/* === Reveal animation === */
[data-reveal]{opacity:0;transform:translateY(10px);transition:.25s}
[data-reveal].in{opacity:1;transform:none}

/* === Header === */
header.site{position:sticky;top:0;z-index:50;background:rgba(247,244,239,.7);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.06)}
.elev{box-shadow:0 10px 30px rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-logo{height:50px;width:auto;image-rendering:auto;transition:transform .2s ease}
.brand-logo:hover{transform:scale(1.05)}
@media (min-width:768px){.brand-logo{height:60px}}
@media (min-width:1000px){.brand-logo{height:70px}}
.menu{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.menu a{padding:.5rem .7rem;border-radius:10px;font-size:15px;font-family:"DM Serif Text",Georgia,serif}
.menu a:hover{background:rgba(122,14,33,.08);color:var(--granate)}
.hamburger{display:none;border:none;padding:.5rem;border-radius:10px;background:rgba(255,255,255,.9);color:var(--granate);cursor:pointer;transition:all .2s ease;width:40px;height:40px;place-items:center;font-size:16px;font-weight:600;backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,.1)}
@media (min-width:881px){.hamburger{display:none !important}}
.hamburger:hover{background:var(--granate);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(122,14,33,.25)}
.hamburger:active{transform:translateY(0)}
@media (max-width:880px){
  .hamburger{display:inline-flex}
  .menu{position:fixed;inset:64px 4vw auto 4vw;background:rgba(247,244,239,.97);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:10px;display:none;opacity:0;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease}
  .menu.open{display:flex;flex-direction:column;gap:4px;opacity:1;transform:translateY(0)}
}
@media (max-width:480px){.nav{padding:.6rem 0}.brand-logo{height:40px}.hamburger{width:36px;height:36px;font-size:14px;padding:.4rem}.menu{inset:56px 3vw auto 3vw;padding:12px}.menu a{padding:.7rem 1rem;font-size:16px}}

/* === Secciones (base) === */
section{padding:60px 0;border-top:1px solid rgba(0,0,0,.06)}
#hero{padding:0;border-top:none}

/* ===========================
   HERO — foto de fondo + contenido a la izquierda
   =========================== */
#hero{position:relative;min-height:85vh;background-color:var(--bone);overflow:hidden;display:flex;align-items:center}
.hero-photo-bg{position:absolute;top:0;right:0;height:100%;width:48%;object-fit:cover;object-position:top center;z-index:0}
.hero-bg-mg{position:absolute;font-family:'Mea Culpa',cursive;font-size:clamp(7rem,12vw,12rem);color:rgba(114,0,16,0.06);top:5%;left:52%;transform:translateX(-50%);pointer-events:none;user-select:none;z-index:0;line-height:1;white-space:nowrap}
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;padding:4rem 4rem 4rem 6rem;max-width:620px}
.hero-signature{font-family:'Mea Culpa',cursive;font-size:2.2rem;color:rgba(114,0,16,0.75);display:block;margin-bottom:0.2rem;line-height:1.3}
.hero-tag{font-family:var(--font-ui);font-size:1rem;font-weight:600;color:var(--granate);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:1.4rem;display:block}
#hero h1{font-family:var(--font-title);font-size:3.2rem;color:var(--granate);line-height:1.15;font-weight:400;margin:0 0 0.5rem;text-align:left;text-transform:none;max-width:600px;white-space:normal}
#hero h1 em{font-style:italic;color:rgba(114,0,16,0.55)}
#hero h1::after{display:none}
.hero-sub{font-family:var(--font-ui);font-size:1.25rem;color:var(--meta);font-style:italic;line-height:1.6;margin:1.2rem 0 1.8rem;font-weight:400}
.hero-stats{display:flex;gap:1.5rem;padding:1rem 0;border-top:1px solid rgba(114,0,16,0.12);border-bottom:1px solid rgba(114,0,16,0.12);margin-bottom:1.8rem}
.hero-stat{display:flex;flex-direction:column;gap:3px}
.stat-num{font-family:var(--font-title);font-size:1.5rem;color:var(--granate);line-height:1;display:block}
.stat-label{font-family:var(--font-ui);font-size:0.72rem;color:var(--meta);letter-spacing:0.06em;font-weight:600;display:block}
.hero-btns{display:flex;gap:0.8rem;flex-wrap:wrap;margin-bottom:1.6rem}
#hero .btn-primary{background:var(--granate);color:var(--bone);font-family:var(--font-ui);font-size:1.15rem;font-weight:600;padding:0.85rem 2rem;border-radius:999px;text-decoration:none;letter-spacing:0.04em;transition:background 0.3s ease;display:inline-block;box-shadow:none}
#hero .btn-primary:hover{background:var(--granate-2)}
.btn-outline{background:transparent;color:var(--granate);font-family:var(--font-ui);font-size:1.15rem;font-weight:600;padding:0.8rem 2rem;border-radius:999px;border:1.5px solid rgba(114,0,16,0.4);text-decoration:none;letter-spacing:0.04em;box-shadow:none;transition:border-color 0.3s ease}
.btn-outline:hover{border-color:var(--granate)}
.hero-socials{display:flex;gap:0.8rem;align-items:center}
.hero-socials a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(114,0,16,0.2);display:flex;align-items:center;justify-content:center;color:var(--granate);text-decoration:none;box-shadow:none;transition:border-color 0.3s ease}
.hero-socials a:hover{border-color:var(--granate)}
@media (max-width:768px){
  #hero{flex-direction:column;min-height:auto;align-items:flex-start}
  .hero-photo-bg{position:relative;width:100%;height:55vw;object-fit:cover;object-position:top center;top:auto;right:auto}
  .hero-bg-mg{font-size:8rem;top:2%;left:50%;transform:translateX(-50%)}
  .hero-content{padding:2rem 1.5rem;max-width:100%;border-left:none}
  .hero-signature{font-size:1.6rem}
  .hero-tag{font-size:0.8rem;margin-bottom:1rem}
  #hero h1{font-size:2.4rem;max-width:100%}
  .hero-sub{font-size:1.1rem;margin:0.8rem 0 1.4rem}
  .hero-stats{gap:1.2rem;margin-bottom:1.4rem}
  .stat-num{font-size:1.3rem}
  .hero-btns{flex-direction:column;gap:0.7rem;margin-bottom:1.4rem}
  #hero .btn-primary,.btn-outline{width:100%;text-align:center;padding:0.85rem 1rem;font-size:1.1rem}
  .hero-socials{gap:0.7rem}
}

/* ===========================
   PORTFOLIO
   =========================== */
#portfolio{background:var(--granate);color:#fff;padding:80px 0}
#portfolio h2{color:#fff;margin-bottom:8px}
#portfolio h2::after{content:'';display:block;width:48px;height:3px;background:var(--bone);margin:0.6rem auto 0;border-radius:2px}
#portfolio .sub{color:#f2e9ec;margin-bottom:20px;text-align:center;display:block;width:100%}
#portfolio .filters{display:flex;gap:0.8rem;flex-wrap:wrap;margin-bottom:28px;justify-content:center}
#portfolio .filters .chip{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.25);padding:.55rem 1rem;border-radius:999px;font-weight:600;cursor:pointer;transition:.2s}
#portfolio .filters .chip[data-active="true"]{background:#fff;color:var(--granate)}
#portfolio .grid{display:grid;gap:20px}
@media(min-width:1100px){#portfolio .grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1099px){#portfolio .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){#portfolio .grid{grid-template-columns:1fr}}
#portfolio .card{background:#fff;color:#000;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:.25s transform}
#portfolio .card:hover{transform:translateY(-6px)}
#portfolio .more-wrap{display:flex;justify-content:center;margin-top:22px}
@media (max-width:480px){#portfolio .filters{gap:8px;margin-bottom:20px}#portfolio .filters .chip{padding:.45rem .8rem;font-size:14px}}

/* Video player */
.video-wrap{position:relative;aspect-ratio:9/16;background:#000;cursor:pointer}
.video-wrap video{width:100%;height:100%;object-fit:cover;display:block;background:#000;transition:opacity .3s ease}
.video-wrap .play-btn{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.35);transition:.2s;pointer-events:none;z-index:2}
.video-wrap .play-btn::before{content:"";border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--granate);margin-left:4px}
.video-wrap.playing .play-btn{display:none}
.video-wrap:hover .play-btn{transform:scale(1.1);background:#fff}
.video-wrap.loading::after{content:"";position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid rgba(255,255,255,0.3);border-top:3px solid var(--granate);border-radius:50%;animation:spin 1s linear infinite;z-index:1}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Portfolio · móvil */
@media(max-width:700px){
  #portfolio .grid{grid-template-columns:1fr;gap:24px;padding:0 8px}
  #portfolio .card{margin:0 auto;max-width:380px;border-radius:16px}
  #portfolio .card:hover{transform:none}
  .video-wrap .play-btn{width:80px;height:80px;background:rgba(255,255,255,.98);box-shadow:0 12px 32px rgba(0,0,0,.4);border:3px solid rgba(122,14,33,.1)}
  .video-wrap .play-btn::before{border-width:16px 0 16px 24px;margin-left:6px}
  .video-wrap.touched{transform:scale(.98);transition:transform .1s ease}
  .video-wrap.loading .play-btn{background:rgba(255,255,255,.8)}
}
@media(max-width:480px){
  #portfolio .grid{gap:20px;padding:0 4px}
  #portfolio .card{max-width:340px;border-radius:12px}
  #portfolio .filters{gap:6px;margin-bottom:16px;justify-content:center}
  #portfolio .filters .chip{padding:.4rem .7rem;font-size:13px;min-height:36px}
  .video-wrap .play-btn{width:72px;height:72px}
  .video-wrap .play-btn::before{border-width:14px 0 14px 20px;margin-left:5px}
}

/* ===========================
   SERVICIOS · PACKS PRO
   =========================== */
#servicios.packs-pro{position:relative;background:var(--bone);padding:96px 0 80px;isolation:isolate}
#servicios.packs-pro h2{text-align:center;margin:0 0 10px;font-size:clamp(28px,4vw,42px)}
#servicios.packs-pro .sub{text-align:center;color:var(--meta);margin:0 0 28px}
.packs-grid{display:grid;gap:22px;grid-template-columns:repeat(3,minmax(260px,1fr))}
@media (max-width:1000px){.packs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.packs-grid{grid-template-columns:1fr}}
@media (max-width:768px){.pack{padding:1.8rem 1.4rem}.pack .features li{font-size:1rem;line-height:1.5}.pack .foot{flex-direction:column;align-items:flex-start;gap:.8rem}.pack .btn,.pack a[href*="contacto"],.pack button{width:100%;text-align:center;font-size:1rem;padding:.8rem 1rem}.pack .eta,.pack-note,.pack small{font-size:.82rem}}
.pack{background:var(--granate);border:none;border-radius:var(--radius);padding:2.5rem 2rem;display:flex;flex-direction:column;gap:1.2rem;box-shadow:0 8px 32px rgba(0,0,0,0.12);transition:transform 0.3s ease,box-shadow 0.3s ease;position:relative}
.pack:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.16)}
.pack--featured{background:var(--granate)}
.pack h3,.pack .pack-title{color:var(--bone);font-size:1.3rem;margin:0}
.pack .hint,.pack > p{color:rgba(255,251,248,0.95);font-family:var(--font-ui);font-size:1.1rem;font-weight:600;font-style:italic;margin:0}
.pack .features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.7rem}
.pack .features li{display:flex;gap:0.7rem;align-items:flex-start;margin:0;color:rgba(255,251,248,0.95);font-family:var(--font-ui);font-size:1rem;font-weight:600;line-height:1.5}
.pack .features li::before{content:'';display:inline-block;width:18px;height:18px;min-width:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFBF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;margin-top:2px;flex-shrink:0}
.pack .features li strong{color:var(--bone)}
.pack .features .chk{display:none}
.pack .badge{background:var(--bone);color:var(--granate);font-family:var(--font-ui);font-size:0.85rem;font-weight:600;padding:0.3rem 0.9rem;border-radius:999px;position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;letter-spacing:0.04em}
.pack .head{display:flex;align-items:center;gap:10px;margin-bottom:0}
.pack .icon{width:38px;height:38px;border-radius:var(--radius);display:grid;place-items:center;background:rgba(247,244,239,0.15);flex:0 0 auto}
.pack .icon svg{filter:brightness(0) invert(1)}
.pack .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.pack .eta{color:rgba(247,244,239,0.55);font-weight:600;font-size:0.78rem}
.pack .btn,.pack a[href*="contacto"],.pack button{display:inline-block;background:var(--bone);color:var(--granate);font-weight:600;font-size:1rem;padding:0.75rem 1.5rem;border-radius:999px;text-decoration:none;text-align:center;border:none;cursor:pointer;transition:background 0.3s ease,transform 0.2s ease;width:100%;font-family:var(--font-ui);letter-spacing:0.04em}
.pack .btn:hover,.pack a[href*="contacto"]:hover,.pack button:hover{background:rgba(247,244,239,0.85);transform:scale(1.02);filter:none}
.pack-price{display:flex;align-items:baseline;gap:0.4rem;margin:0.5rem 0;border-top:1px solid rgba(247,244,239,0.15);border-bottom:1px solid rgba(247,244,239,0.15);padding:0.8rem 0}
.price-from{font-size:0.8rem;color:rgba(247,244,239,0.6);font-style:italic}
.price-amount{font-size:2rem;font-weight:400;color:var(--bone);font-family:var(--font-title);line-height:1}
.extras-wrap{margin-top:34px}
.extras-wrap h3{text-align:center;margin:0 0 12px;font-family:var(--font-ui);font-size:1.3rem;font-weight:600;font-style:italic}
.extras{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.extras .chip{display:inline-flex;align-items:center;gap:8px;padding:.6rem .9rem;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.12);font-weight:400;color:var(--granate)}
.extras .chip svg{width:16px;height:16px}

/* ===========================
   PROCESO · Timeline
   =========================== */
#proceso{background-color:var(--granate);padding:5rem 2rem;text-align:center}
.proceso-label{font-family:var(--font-ui);font-size:1rem;font-weight:600;text-transform:none;letter-spacing:0.02em;color:rgba(255,251,248,0.75);margin-bottom:.5rem;font-style:italic}
#proceso h2{color:var(--bone);font-size:2.2rem;margin-bottom:.8rem}
#proceso h2::after{background:var(--bone);margin:6px auto 0}
.proceso-subtitle{color:rgba(255,251,248,0.75);font-family:var(--font-ui);font-size:1.3rem;font-weight:600;font-style:italic;margin-bottom:4rem;text-align:center;text-transform:none;letter-spacing:normal}
.proceso-subtitle strong{color:var(--bone)}
.proceso-timeline{display:flex;align-items:flex-start;justify-content:center;width:100%;margin:0 auto;position:relative}
.proceso-timeline::before{content:'';position:absolute;top:20px;left:5%;width:90%;height:2px;background:rgba(247,244,239,.25);z-index:0}
.timeline-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.timeline-dot{width:14px;height:14px;background:var(--bone);border-radius:50%;margin-bottom:1.5rem;border:3px solid var(--granate);box-shadow:0 0 0 3px rgba(247,244,239,.3);flex-shrink:0}
.timeline-content{text-align:center;padding:0 1rem}
.timeline-num{display:block;font-family:var(--font-ui);font-size:1rem;font-weight:600;letter-spacing:0.02em;color:rgba(255,251,248,0.75);margin-bottom:.4rem}
.timeline-content h3{font-size:1rem;color:var(--bone);margin-bottom:.5rem;font-weight:400}
.timeline-content p{font-size:.82rem;color:rgba(247,244,239,.72);line-height:1.6}
@media (max-width:768px){.proceso-timeline{flex-direction:column;align-items:flex-start;padding-left:1.2rem;gap:0}.proceso-timeline::before{top:0;left:18px;width:2px;height:100%}.timeline-step{flex-direction:row;align-items:flex-start;gap:0.8rem;padding-bottom:1.5rem;width:100%}.timeline-dot{margin-top:0.2rem;flex-shrink:0;width:12px;height:12px}.timeline-content{text-align:left;padding:0}.timeline-num{font-size:0.65rem;display:block;margin-bottom:0.1rem}.timeline-content h3{font-size:1rem;margin-bottom:0.2rem;text-align:left}.timeline-content p{font-size:0.9rem;line-height:1.5;text-align:left}#proceso{padding:3rem 1.5rem}#proceso h2{font-size:1.7rem}.proceso-subtitle{font-size:0.95rem;margin-bottom:2rem}}

/* ===========================
   MARCAS
   =========================== */
#marcas{background-color:var(--bone);padding:3rem 0;overflow:hidden}
#marcas h2{color:var(--granate);text-align:center;text-transform:none !important;margin-bottom:.5rem;padding:0 2rem}
#marcas h2::after{margin:6px auto 0}
.brands-subtitle{text-align:center;color:var(--meta);font-family:var(--font-ui);font-size:1.3rem;font-weight:600;font-style:italic;margin:0 auto 1.5rem;padding:0 2rem;max-width:600px;letter-spacing:normal;text-transform:none}
.brands-carousel{display:flex;width:100%;overflow:hidden}
.brands-track{display:flex;align-items:center;gap:3rem;animation:marquee 20s linear infinite;flex-shrink:0;padding:.5rem 0}
.brands-track img{height:173px;width:auto;min-width:250px;max-width:500px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 0 1px rgba(0,0,0,.15));opacity:1}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.brands-carousel:hover .brands-track{animation-play-state:paused}
@media (max-width:768px){#marcas{padding:2.5rem 0}#marcas h2{font-size:1.5rem;margin-bottom:0.4rem;padding:0 1.5rem}#marcas .brands-subtitle,#marcas>p{font-size:0.95rem;margin-bottom:1.5rem;padding:0 1.5rem}.brands-track{gap:2rem}.brands-track img{height:36px;min-width:55px;max-width:100px}}

/* ===========================
   SOBRE MÍ
   =========================== */
#sobre-mi{background-color:var(--bone);padding:5rem 2rem}
.about-title{text-align:center;font-size:2.2rem;color:var(--granate);margin-bottom:3rem}
.about-title::after{margin:6px auto 0}
.about-hero{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;align-items:stretch;max-width:1100px;margin:0 auto 4rem}
.about-photo{display:flex;align-items:stretch}
.about-photo img{width:100%;height:100%;max-width:100%;aspect-ratio:unset;object-fit:cover;object-position:top center;border-radius:var(--radius);display:block}
.about-intro{display:flex;flex-direction:column;justify-content:center;gap:1.2rem}
.about-intro p{font-size:1.1rem;line-height:1.8;color:var(--ink);text-align:justify;font-weight:500}
.about-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;max-width:1000px;margin:0 auto}
.stat-card{background:white;border:1px solid rgba(122,14,33,.12);border-radius:var(--radius);padding:2rem 1.5rem;text-align:center;display:flex;flex-direction:column;gap:.5rem}
.stat-number{font-size:2rem;font-weight:700;color:var(--granate);font-family:'DM Serif Text',serif}
.stat-label{font-size:.85rem;color:var(--meta);line-height:1.4}
@media (max-width:768px){.about-hero{grid-template-columns:1fr;gap:1.5rem}.about-photo img{max-width:280px;margin:0 auto;height:auto;aspect-ratio:3/4}.about-intro p{text-align:left !important;font-size:1rem;line-height:1.7}.about-title{font-size:1.8rem}.about-stats{grid-template-columns:repeat(2,1fr);gap:0.7rem;margin-top:1.5rem}.stat-card{padding:1rem 0.8rem}.stat-number{font-size:1.5rem}.stat-label{font-size:0.75rem}}

/* ===========================
   HERRAMIENTAS · GRID
   =========================== */
#herramientas{background-color:var(--granate);padding:5rem 2rem;text-align:center}
#herramientas h2{color:var(--bone);font-size:2.2rem;margin-bottom:.5rem}
#herramientas h2::after{background:var(--bone);margin:6px auto 0}
.tools-subtitle{color:rgba(255,251,248,0.75);font-family:var(--font-ui);font-size:1.3rem;font-weight:600;font-style:italic;margin-bottom:3rem;letter-spacing:normal;text-transform:none}
.tools-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;max-width:1200px;margin:0 auto;padding:0 1rem}
.tool-card{background:rgba(247,244,239,.08);border:1px solid rgba(247,244,239,.15);border-radius:var(--radius);padding:2rem 1rem 1.2rem;display:flex;flex-direction:column;align-items:center;gap:1rem;transform:none;transition:background .3s ease,transform .3s ease}
.tool-card:hover{transform:scale(1.04);background:rgba(247,244,239,.15)}
.tool-card img{width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25))}
.tool-card span{color:var(--bone);font-family:var(--font-ui);font-size:1.1rem;font-weight:600;text-align:center;letter-spacing:.02em;text-transform:none}
@media (max-width:900px){.tools-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.tools-grid{grid-template-columns:repeat(2,1fr);gap:0.8rem;padding:0 1rem}.tool-card{padding:1.2rem 0.8rem 0.8rem;gap:0.6rem}.tool-card img{width:90px;height:90px}.tool-card span{font-size:0.75rem}#herramientas{padding:3rem 0}#herramientas h2{font-size:1.7rem;padding:0 1rem}.tools-subtitle{font-size:0.95rem;padding:0 1rem;margin-bottom:2rem}}
@media (max-width:480px){.tools-grid{grid-template-columns:repeat(2,1fr)}}

/* ===========================
   RESEÑAS
   =========================== */
#resenas{background-color:var(--bone);padding:5rem 1rem;text-align:center}
.reviews-label{font-family:var(--font-ui);font-size:1.3rem;font-weight:600;font-style:italic;text-transform:none;letter-spacing:normal;color:var(--meta);margin-bottom:.4rem}
#resenas h2{font-size:2.2rem;color:var(--granate);margin-bottom:3rem}
#resenas h2::after{margin:6px auto 0}
.reviews-carousel-wrapper{display:flex;align-items:center;gap:1rem;width:100%;margin:0 auto}
.reviews-carousel{overflow:hidden;flex:1}
.reviews-track{display:flex;gap:1.5rem;transition:transform .4s ease}
.review-slide{flex:0 0 calc((100% - 3rem) / 3);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.07);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:white}
.review-slide img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius);display:block}
.reviews-arrow{background:var(--granate);color:white;border:none;border-radius:50%;width:44px;height:44px;font-size:1.1rem;cursor:pointer;flex-shrink:0;transition:background .3s ease,transform .2s ease;display:flex;align-items:center;justify-content:center}
.reviews-arrow:hover{background:var(--granate-2);transform:scale(1.08)}
@media (max-width:768px){#resenas{padding:3rem 0.5rem}.reviews-carousel-wrapper{gap:0.4rem;padding:0 0.3rem}.reviews-arrow{width:34px;height:34px;font-size:0.85rem;flex-shrink:0}.review-slide{flex:0 0 100%;aspect-ratio:4/3}.review-slide img{object-fit:contain}}
@media (max-width:480px){.review-slide{flex:0 0 100%}}

/* ===========================
   CONTACTO
   =========================== */
#contacto h2{margin-bottom:14px}
#contacto .contact-card{position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.06);border-radius:18px;box-shadow:var(--shadow);padding:20px;background:radial-gradient(140% 90% at -10% -10%,#7a0e210f 0%,transparent 60%),radial-gradient(120% 80% at 110% 110%,#7a0e2112 0%,transparent 60%),#fff}
#contacto .contact-card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--granate),var(--granate-2))}
#contacto .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
#contacto .card-head h3{margin:.1rem 0;font-family:var(--font-title);font-size:1.8rem;color:var(--granate);text-align:left;font-weight:400;margin-bottom:0.3rem}
#contacto .lead{color:var(--meta);max-width:56ch;margin:0;font-size:1rem;text-align:left}
#contacto .quick{display:flex;gap:8px;flex-wrap:wrap;margin:.4rem 0 0}
#contacto .quick .btn{padding:.6rem .8rem}
#contacto form{display:grid;gap:12px;margin-top:14px}
#contacto .form-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
#contacto input:not([type="checkbox"]):not([type="radio"]),#contacto select,#contacto textarea{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fff;color:var(--ink);font:inherit}
#contacto input::placeholder,#contacto textarea::placeholder{color:#777}
#contacto input:focus,#contacto select:focus,#contacto textarea:focus{border-color:var(--granate);box-shadow:0 0 0 3px rgba(122,14,33,.12);outline:0}
#contacto textarea{min-height:120px;resize:vertical}
#contacto .field-label{font-weight:600;margin-bottom:6px}
#contacto .segmented{display:flex;gap:8px;flex-wrap:wrap}
#contacto .segmented input{position:absolute;opacity:0;pointer-events:none}
#contacto .segmented label{padding:.55rem .8rem;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:#fff;cursor:pointer;font-weight:600;font-size:14px;transition:.2s}
#contacto .segmented label:hover{transform:translateY(-1px);border-color:var(--granate)}
#contacto .segmented input:checked+label{background:var(--granate);color:#fff;border-color:var(--granate)}
#contacto .policy-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
#contacto .policy-badges .pill{display:inline-flex;align-items:center;gap:6px;padding:.25rem .55rem;border-radius:999px;font-weight:600;font-size:12px;background:#fff;border:1px solid rgba(0,0,0,.08);color:var(--granate)}
#contacto .consent-wrap{display:flex;flex-direction:column;gap:8px}
#contacto .consent-card{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;border:1px solid rgba(0,0,0,.12);background:#fff;transition:.2s border-color,.2s box-shadow}
#contacto .consent-card:hover{border-color:rgba(122,14,33,.35)}
#contacto .consent-card[data-error="1"]{border-color:#a00;box-shadow:0 0 0 3px rgba(170,0,0,.1)}
#contacto .consent-card input[type="checkbox"]{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--granate)}
#contacto .consent-title{font-weight:500;font-family:"DM Serif Text",Georgia,serif}
#contacto .consent-text{color:var(--meta);font-size:14px;line-height:1.45}
#contacto .consent-link{font-weight:500;color:var(--granate);text-decoration:underline;font-family:"DM Serif Text",Georgia,serif}
#contacto .consent-status{margin-left:auto;align-self:center;font-size:12px;font-weight:500;padding:.2rem .5rem;border-radius:999px;border:1px solid rgba(0,0,0,.08);background:#fff;color:#1a7f50;display:none;font-family:"DM Serif Text",Georgia,serif}
#contacto .consent-card input[type="checkbox"]:checked~.consent-status{display:inline-block}
#contacto .form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
#contacto .help{color:var(--meta);font-size:13px}
#contacto .form-msg{margin-top:4px;font-weight:600}
#contacto .btn-loading{display:none}
#contacto .is-loading .btn-text{display:none}
#contacto .is-loading .btn-loading{display:inline}
@media (max-width:768px){#contacto .btn-outline,#contacto a.btn-outline,.contact-form .btn-outline{font-size:0.9rem;padding:0.6rem 1.2rem;width:auto;display:inline-block;margin:0 auto}#contacto .btn-primary,#contacto button[type="submit"],.contact-form input[type="submit"]{width:100%;font-size:1.1rem;padding:0.9rem 1rem}}
@media (max-width:760px){#contacto .form-grid{grid-template-columns:1fr}#contacto .contact-card{margin:0 4px}#contacto .form-actions{flex-wrap:wrap;gap:8px}}
@media (max-width:480px){
  #contacto{padding:40px 0}
  #contacto .contact-card{padding:16px;margin:0 8px}
  #contacto .card-head{flex-direction:column;align-items:flex-start;gap:10px}
  #contacto .quick{justify-content:center;flex-wrap:wrap}
  #contacto .quick .btn{padding:.7rem 1rem;font-size:15px;min-width:120px}
  #contacto input:not([type="checkbox"]):not([type="radio"]),#contacto select,#contacto textarea{padding:14px;font-size:16px}
  #contacto textarea{min-height:100px}
  #contacto .form-actions{flex-direction:column;gap:8px}
  #contacto .form-actions .btn{width:100%;justify-content:center}
  #contacto .segmented{justify-content:center}
  #contacto .segmented label{padding:.6rem 1rem;font-size:14px}
}

/* ===========================
   SERVICIOS INTRO
   =========================== */
.servicios-intro{text-align:center;max-width:600px;margin:0 auto 3rem}
.servicios-intro p{color:var(--meta);font-family:var(--font-ui);font-size:1.3rem;font-weight:600;font-style:italic;line-height:1.7;margin-top:.8rem}

/* ===========================
   FOOTER
   =========================== */
footer{background-color:var(--granate);color:var(--bone);padding:3rem 2rem 1.5rem}
.footer-inner{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;max-width:1100px;margin:0 auto 2rem;gap:2rem}
.footer-brand p{font-size:1.1rem;color:rgba(255,251,248,0.8);margin-top:.5rem}
.footer-logo{height:40px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.footer-cta{text-align:center}
.footer-cta p{font-size:1.2rem;color:rgba(255,251,248,0.85);margin-bottom:1rem;font-weight:600}
.footer-whatsapp{display:inline-block;background:var(--bone);color:var(--granate);padding:0.7rem 1.6rem;border-radius:999px;font-size:1.1rem;font-weight:700;text-decoration:none;transition:background .3s ease;font-family:var(--font-ui)}
.footer-whatsapp:hover{background:rgba(255,251,248,0.85)}
.footer-social{display:flex;justify-content:flex-end;gap:1.2rem}
.footer-social a{color:rgba(255,251,248,0.8);transition:color .3s ease}
.footer-social a:hover{color:var(--bone)}
.footer-bottom{border-top:1px solid rgba(255,251,248,0.2);padding-top:1.2rem;display:flex;justify-content:space-between;font-size:1rem;color:rgba(255,251,248,0.6);max-width:1100px;margin:0 auto}
.footer-bottom a{color:rgba(255,251,248,0.6);text-decoration:none}
.footer-bottom a:hover{color:var(--bone)}
@media (max-width:768px){.footer-inner{grid-template-columns:1fr;text-align:center}.footer-social{justify-content:center}.footer-bottom{flex-direction:column;gap:.5rem;text-align:center}}

/* ===========================
   LEGAL OVERLAY
   =========================== */
.legal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:140;align-items:center;justify-content:center;padding:4vh;display:none}
.legal-dialog{width:min(1100px,96vw);max-height:88vh;overflow:auto;background:var(--bone);border-radius:16px;padding:18px;border:1px solid rgba(0,0,0,.08)}
.legal-header{display:flex;justify-content:space-between;align-items:center;gap:10px;position:sticky;top:0;background:var(--bone);padding-bottom:8px}
.legal-title{margin:0}
.sep{border:none;border-top:1px solid rgba(0,0,0,.08);margin:16px 0}

/* ===========================
   FLOATING + TOAST + COOKIES
   =========================== */
.floating{position:fixed;right:18px;bottom:18px;display:none;flex-direction:column;gap:10px;z-index:60}
.floating .circle{border-radius:999px}
.backtop{background:#fff}
@media (min-width:1024px){.floating{display:flex}}
@media (max-width:480px){.floating{right:12px;bottom:12px;gap:8px}.floating .circle{width:44px;height:44px}}

.toast{position:fixed;right:16px;bottom:16px;background:#fff;border:1px solid rgba(0,0,0,.1);padding:12px 14px;border-radius:12px;box-shadow:var(--shadow);display:none;z-index:110}
.toast.show{display:block}
@media (max-width:480px){.toast{right:8px;bottom:8px;padding:10px 12px;font-size:14px}}

.cookie-banner{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid rgba(0,0,0,.1);box-shadow:0 -10px 30px rgba(0,0,0,.06);display:none;z-index:120}
.cookie-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;flex-wrap:wrap}
.cookie-banner .text{max-width:760px}
.cookie-banner.show{display:block}
.cookie-actions{display:flex;gap:10px}
@media (max-width:480px){.cookie-banner{padding:16px}.cookie-banner .text{font-size:14px}}

/* === Tipografía global móvil === */
@media (max-width:768px){h2{font-size:1.7rem !important}h3{font-size:1.05rem !important}p{font-size:1rem !important;line-height:1.65 !important}section{padding-top:3rem !important;padding-bottom:3rem !important}}

/* === Lazy rendering secciones pesadas === */
#herramientas,#servicios.packs-pro,#proceso,#contacto{content-visibility:auto;contain-intrinsic-size:1000px 800px}

/* === Google Translate widget flotante === */
.translate-float{position:fixed;bottom:2rem;left:1.5rem;z-index:9999;display:flex;align-items:center;gap:0;background:var(--granate);border-radius:999px;padding:0.5rem 1rem 0.5rem 0.8rem;cursor:pointer;transition:background 0.3s ease}
.translate-float:hover{background:var(--granate-2)}
.translate-icon{color:var(--bone);display:flex;align-items:center;margin-right:0.4rem;flex-shrink:0}
.translate-float .goog-te-gadget-simple{background:transparent !important;border:none !important;border-radius:0 !important;padding:0 !important}
.translate-float .goog-te-menu-value,.translate-float .goog-te-menu-value span{color:var(--bone) !important;font-weight:600 !important;font-size:0.85rem !important;font-family:var(--font-ui) !important}
.goog-te-gadget-icon,.goog-logo-link,.goog-te-gadget span:not(.goog-te-menu-value){display:none !important}
.goog-te-menu-value span:last-child{display:none !important}
@media (max-width:768px){.translate-float{bottom:1.2rem;left:1rem;padding:0.35rem 0.7rem 0.35rem 0.6rem;opacity:0.85}.translate-float .goog-te-menu-value,.translate-float .goog-te-menu-value span{font-size:0.75rem !important}.translate-icon svg{width:14px;height:14px}}