:root{
  --crema-base:#F4ECD8;
  --crema-clara:#FAF7F0;
  --marron-gaal:#5A4327;
  --marron-medio:#8B5A3C;
  --dorado-tan:#C9A267;
  --sage:#A8B89A;
  --texto:#3A2E1F;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--crema-base);
  color:var(--texto);
  font-family:'Inter',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ─── Tipografía ─── */
.h-display{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(40px,6vw,84px);line-height:1.05;letter-spacing:-0.02em;color:var(--marron-gaal)}
.h-display em{font-style:italic;color:var(--sage);font-weight:500}
.h-section{font-family:'Playfair Display',serif;font-weight:500;font-style:italic;font-size:clamp(32px,4vw,52px);line-height:1.15;color:var(--marron-gaal);margin-bottom:24px}
.h-card{font-family:'Inter',sans-serif;font-weight:600;font-size:18px;letter-spacing:0.04em;text-transform:uppercase;color:var(--marron-gaal)}
.tag{display:inline-block;font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--sage);margin-bottom:20px}
.lead{font-size:21px;font-weight:300;color:var(--marron-medio);max-width:620px;line-height:1.5}

/* ─── Layout ─── */
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
section{padding:120px 0;position:relative}
section.alt{background:var(--crema-clara)}
.divider-mini{width:48px;height:1px;background:var(--dorado-tan);margin:32px 0}

/* ─── Botones ─── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:18px 38px;font-family:'Inter',sans-serif;font-weight:500;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:all 350ms cubic-bezier(0.4,0,0.2,1);border:none}
.btn-primary{background:var(--marron-gaal);color:var(--crema-base)}
.btn-primary:hover{background:var(--dorado-tan);color:var(--marron-gaal);transform:translateY(-2px)}
.btn-secondary{background:transparent;color:var(--sage);border:1.5px solid var(--sage)}
.btn-secondary:hover{background:var(--sage);color:var(--crema-clara)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--marron-gaal);border-bottom:1px solid var(--dorado-tan);padding-bottom:4px;transition:gap 300ms}
.btn-ghost:hover{gap:14px}

/* ─── Menú sticky ─── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:14px 32px;
  display:flex;align-items:center;justify-content:space-between;
  transition:all 400ms cubic-bezier(0.4,0,0.2,1);
}
.nav.scrolled{background:rgba(244,236,216,0.95);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(90,67,39,0.08)}
.nav-logo{display:flex;align-items:center;height:64px;transition:height 400ms}
.nav.scrolled .nav-logo{height:48px}
.nav-logo img{height:100%;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)) brightness(0) invert(1);transition:filter 400ms}
.nav.scrolled .nav-logo img{filter:none}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{font-family:'Inter',sans-serif;font-weight:500;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--crema-base);transition:color 300ms;position:relative;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.nav.scrolled .nav-links a{color:var(--marron-gaal);text-shadow:none}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--dorado-tan);transition:width 300ms}
.nav-links a:hover::after{width:100%}
.nav-cta{padding:12px 24px;background:var(--sage);color:var(--crema-clara);font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;transition:all 300ms}
.nav-cta:hover{background:var(--dorado-tan);color:var(--marron-gaal)}

/* ═══════════════════════════════════════════════════
   HERO con video dissolve + texto totalmente cream
   ═══════════════════════════════════════════════════ */
.hero-container{
  height:160vh;
  position:relative;
  z-index:1;
}
.hero-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;align-items:center;
}
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:1;
}
/* Overlay reforzado: linear oscuro + viñeta lateral protectora del texto */
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(58,46,31,.85) 0%,rgba(58,46,31,.65) 45%,rgba(58,46,31,.45) 100%),
    linear-gradient(180deg,rgba(58,46,31,.45) 0%,rgba(58,46,31,.55) 50%,rgba(58,46,31,.75) 100%);
  z-index:2;
}
/* Mimetización con el fondo crema al hacer scroll */
.hero-fade{
  position:absolute;
  bottom:0;left:0;right:0;
  height:35vh;
  background:linear-gradient(180deg,transparent 0%,rgba(244,236,216,.4) 50%,var(--crema-base) 100%);
  z-index:3;
  pointer-events:none;
}
.hero-content{
  position:relative;z-index:5;
  max-width:1200px;margin:0 auto;padding:0 32px;
  width:100%;
}
/* TODO EL TEXTO DEL HERO EN CREAM BRILLANTE — sombras fuertes para legibilidad sobre cualquier frame */
.hero-content .tag{color:var(--dorado-tan)!important;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.hero-content .h-display{color:#FFFFFF!important;max-width:900px;text-shadow:0 4px 28px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.6)}
.hero-content .h-display em{color:#FFFFFF!important;font-style:italic;font-weight:500;text-shadow:0 4px 28px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.6)}
.hero-content .lead{color:#FAF7F0!important;margin:32px 0 40px;max-width:560px;text-shadow:0 2px 14px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.5);opacity:1}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-sticky .btn-primary{box-shadow:0 8px 30px -10px rgba(0,0,0,.5)}
.hero-sticky .btn-secondary{color:var(--crema-base);border-color:rgba(244,236,216,.7);background:rgba(0,0,0,.15);backdrop-filter:blur(6px)}
.hero-sticky .btn-secondary:hover{background:var(--crema-base);color:var(--marron-gaal);border-color:var(--crema-base)}
.scroll-indicator{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);z-index:5;color:var(--crema-base);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;opacity:.7;display:flex;flex-direction:column;align-items:center;gap:12px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.scroll-indicator::after{content:"";width:1px;height:40px;background:var(--crema-base);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(0.4);opacity:.3}50%{transform:scaleY(1);opacity:.9}}

/* ─── PROPUESTA DE VALOR ─── */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:64px}
.value-item .num{font-family:'Playfair Display',serif;font-style:italic;font-size:48px;color:var(--sage);line-height:1;margin-bottom:16px}
.value-item h3{font-family:'Playfair Display',serif;font-weight:500;font-size:24px;color:var(--marron-gaal);margin-bottom:12px;line-height:1.3}
.value-item p{color:var(--marron-medio);font-size:16px}

/* ─── SERVICIOS ─── */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.service-card{background:var(--crema-clara);border-radius:4px;overflow:hidden;transition:transform 600ms cubic-bezier(0.4,0,0.2,1),box-shadow 600ms;cursor:pointer;border:1px solid rgba(90,67,39,.06)}
.service-card:hover{transform:translateY(-8px);box-shadow:0 30px 50px -25px rgba(90,67,39,.2)}
.service-card:hover .service-img img{transform:scale(1.05)}
.service-img{aspect-ratio:4/3;overflow:hidden;position:relative}
.service-img img{width:100%;height:100%;object-fit:cover;transition:transform 800ms cubic-bezier(0.25,0.1,0.25,1)}
.service-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(90,67,39,.3) 100%);z-index:1;pointer-events:none}
.service-body{padding:28px 28px 32px}
.service-body .h-card{margin-bottom:8px;font-size:16px}
.service-body p{color:var(--marron-medio);font-size:14px;margin-bottom:18px;min-height:42px}

/* ─── DETALLES (galería extendida con captions legibles) ─── */
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.detail-item{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/5;cursor:pointer}
.detail-item img{width:100%;height:100%;object-fit:cover;transition:transform 1000ms cubic-bezier(0.25,0.1,0.25,1)}
.detail-item:hover img{transform:scale(1.05)}
.detail-item figcaption{position:absolute;bottom:0;left:0;right:0;padding:60px 24px 24px;background:linear-gradient(180deg,transparent 0%,rgba(58,46,31,.55) 40%,rgba(58,46,31,.94) 100%);color:var(--crema-base);font-family:'Inter';font-weight:500;line-height:1.4}
.detail-item figcaption .label{display:block;font-weight:600;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dorado-tan);margin-bottom:6px;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.detail-item figcaption .title{font-family:'Playfair Display',serif;font-style:italic;font-size:22px;font-weight:500;text-shadow:0 1px 10px rgba(0,0,0,.45)}

/* ─── PROCESO ─── */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:64px;position:relative}
.process::before{content:"";position:absolute;top:32px;left:8%;right:8%;height:1px;background:var(--dorado-tan);opacity:.4;z-index:0}
.step{position:relative;z-index:2;text-align:left}
.step .step-num{width:64px;height:64px;border-radius:50%;background:var(--crema-base);border:2px solid var(--dorado-tan);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-style:italic;font-size:24px;color:var(--marron-gaal);margin-bottom:24px}
.step h4{font-family:'Playfair Display',serif;font-weight:500;font-size:22px;color:var(--marron-gaal);margin-bottom:10px}
.step p{color:var(--marron-medio);font-size:15px}

/* ─── NOSOTRAS ─── */
.about{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:center}
.about-img{aspect-ratio:3/4;border-radius:4px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--crema-base),var(--sage))}
.about-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1200ms cubic-bezier(0.25,0.1,0.25,1)}
.about-img:hover img{transform:scale(1.04)}
.about-content .lead{margin-bottom:32px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.value{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--marron-medio);font-weight:500}
.value::before{content:"";display:block;width:6px;height:6px;background:var(--sage);border-radius:50%;flex-shrink:0}

/* ─── CLIENTES ─── */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:32px;margin-top:64px;align-items:center}
.logo-box{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;padding:18px;filter:grayscale(1);opacity:.55;transition:all 400ms cubic-bezier(0.25,0.1,0.25,1)}
.logo-box img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.logo-box:hover{filter:grayscale(0);opacity:1;transform:scale(1.05)}

/* ─── CASOS DE ÉXITO ─── */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.case-card{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:3/4;cursor:pointer;display:block}
.case-card .case-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1000ms cubic-bezier(0.25,0.1,0.25,1);z-index:1}
.case-card:hover .case-img{transform:scale(1.06)}
.case-card .case-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,46,31,.18) 0%,rgba(58,46,31,.55) 45%,rgba(58,46,31,.94) 100%);z-index:2}
.case-card .case-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:32px 28px 28px;color:var(--crema-base);z-index:3}
.case-card .case-logo{width:64px;height:36px;margin-bottom:auto;background:rgba(244,236,216,.95);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:6px;align-self:flex-start}
.case-card .case-logo img{max-width:100%;max-height:100%;object-fit:contain}
.case-card .case-meta{font-family:'Inter';font-weight:600;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dorado-tan);margin-bottom:8px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.case-card .case-title{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:24px;line-height:1.2;margin-bottom:14px;text-shadow:0 1px 10px rgba(0,0,0,.5);color:var(--crema-clara)}
.case-card .case-desc{font-size:14px;line-height:1.55;color:var(--crema-base);margin-bottom:18px;text-shadow:0 1px 8px rgba(0,0,0,.5);opacity:.95}
.case-card .case-cta{font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--crema-base);display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--dorado-tan);padding-bottom:4px;align-self:flex-start;transition:gap 300ms;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.case-card:hover .case-cta{gap:14px}
.cases-foot{text-align:center;margin-top:48px}

/* ─── TESTIMONIO ─── */
.testimonial{text-align:center;max-width:880px;margin:0 auto}
.testimonial .quote-mark{font-family:'Playfair Display',serif;font-style:italic;font-size:120px;line-height:1;color:var(--sage);opacity:.4;margin-bottom:-20px}
.testimonial blockquote{font-family:'Playfair Display',serif;font-weight:400;font-style:italic;font-size:32px;line-height:1.4;color:var(--marron-gaal);margin-bottom:32px}
.testimonial cite{font-style:normal;font-weight:600;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--marron-medio)}
.testimonial-dots{display:flex;justify-content:center;gap:10px;margin-top:40px}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(90,67,39,.2)}
.dot.active{background:var(--marron-gaal);width:24px;border-radius:4px}

/* ─── CTA FINAL ─── */
.cta-final{background:var(--marron-gaal);color:var(--crema-base);text-align:center;position:relative;overflow:hidden}
.cta-final::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(168,184,154,.15),transparent 50%)}
.cta-final .wrap{position:relative;z-index:2}
.cta-final .tag{color:var(--dorado-tan)}
.cta-final .h-display{color:var(--crema-base);margin-bottom:24px}
.cta-final .h-display em{color:var(--sage)}
.cta-final .lead{color:rgba(244,236,216,.85);margin:0 auto 40px;max-width:560px}
.cta-final .btn-primary{background:var(--dorado-tan);color:var(--marron-gaal)}
.cta-final .btn-primary:hover{background:var(--crema-base)}

/* ─── FOOTER ─── */
.footer{background:#3A2E1F;color:rgba(244,236,216,.7);padding:80px 0 40px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:64px}
.footer-logo{height:84px;margin-bottom:20px;display:block;filter:brightness(0) invert(1) opacity(0.95)}
.footer h5{font-family:'Inter';font-weight:600;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--crema-base);margin-bottom:20px}
.footer ul{list-style:none}
.footer ul li{margin-bottom:10px}
.footer a:hover{color:var(--dorado-tan)}
.footer-bottom{padding-top:32px;border-top:1px solid rgba(244,236,216,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:12px;letter-spacing:0.06em}
.social-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.social-row a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(244,236,216,.08);color:var(--crema-base);transition:background .25s ease,color .25s ease,transform .25s ease;text-decoration:none}
.social-row a:hover{background:var(--dorado-tan);color:var(--marron-gaal);transform:translateY(-2px)}
.social-row svg{display:block;width:18px;height:18px;fill:currentColor}

/* ─── Reveal on scroll ─── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 700ms cubic-bezier(0.25,0.1,0.25,1),transform 700ms cubic-bezier(0.25,0.1,0.25,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ─── Responsive ─── */
@media(max-width:900px){
  .nav-links{display:none}
  .value-grid,.services-grid,.process{grid-template-columns:1fr 1fr;gap:32px}
  .process::before{display:none}
  .about{grid-template-columns:1fr;gap:48px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .logos{grid-template-columns:repeat(3,1fr)}
  .hero-container{height:120vh}
  .cases-grid{grid-template-columns:1fr;gap:20px}
  .case-card{aspect-ratio:16/10}
  .detail-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .value-grid,.services-grid,.process,.values,.detail-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .testimonial blockquote{font-size:22px}
  section{padding:80px 0}
}

/* ═══════════════════════════════════════════════════
   ELEMENTOS DECORATIVOS FLOTANTES (scroll parallax)
   Cada elemento vive dentro de su sección, entre el
   fondo y el contenido (z-index 1 vs wrap z-index 2)
   ═══════════════════════════════════════════════════ */
#valor, #servicios, #nosotras, #testimonio { z-index:0 }
#valor .wrap, #servicios .wrap, #nosotras .wrap, #testimonio .wrap {
  position:relative;
  z-index:2;
}
.deco-inside{
  position:absolute;
  z-index:1;
  height:auto;
  pointer-events:none;
  user-select:none;
  will-change:transform,opacity;
  filter:drop-shadow(0 14px 30px rgba(90,67,39,0.20));
  opacity:0;
}
.deco-canape{ width:286px; top:80px;  right:6% }
.deco-copa  { width:264px; top:60px;  right:7% }
.deco-tomate{ width:280px; top:25%;   right:3% }
.deco-hoja  { width:200px; top:25%;   left:3%  }
@media(max-width:1099px){
  .deco-inside{display:none}
}
@media(prefers-reduced-motion:reduce){
  .deco-inside{display:none}
}

/* ─── TIPOS DE EVENTO (sección nueva 19 may) ─── */
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
@media(max-width:980px){.events-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.events-grid{grid-template-columns:1fr}}
.event-card{background:#fff;border-radius:14px;overflow:hidden;display:block;text-decoration:none;color:inherit;transition:transform 400ms cubic-bezier(0.4,0,0.2,1),box-shadow 400ms;box-shadow:0 2px 10px rgba(90,67,39,.05)}
.event-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(90,67,39,.15)}
.event-img{aspect-ratio:4/3;overflow:hidden;background:var(--crema-base)}
.event-img img{width:100%;height:100%;object-fit:cover;transition:transform 800ms cubic-bezier(0.4,0,0.2,1)}
.event-card:hover .event-img img{transform:scale(1.05)}
.event-body{padding:24px 24px 28px}
.event-tag{display:inline-block;font-family:'Inter',sans-serif;font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin-bottom:12px}
.event-body h4{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:22px;line-height:1.25;color:var(--marron-gaal);margin-bottom:10px}
.event-body p{font-size:14px;color:var(--marron-medio);line-height:1.55;margin:0}

/* ─── Páginas hijas (contacto, casos, aviso-privacidad) ─── */
.page-hero{padding:160px 0 80px;background:linear-gradient(180deg,var(--marron-gaal) 0%,var(--marron-medio) 100%);color:var(--crema-base);text-align:center}
.page-hero .tag{color:var(--dorado-tan)}
.page-hero h1{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(36px,5vw,64px);line-height:1.1;margin:14px 0;color:var(--crema-base)}
.page-hero h1 em{font-style:italic;color:var(--dorado-tan)}
.page-hero .lead{color:rgba(244,236,216,.85);max-width:680px;margin:14px auto 0}

/* ─── Formulario contacto ─── */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;margin-top:48px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-info{padding:32px;background:#fff;border-radius:14px}
.contact-info h3{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:24px;color:var(--marron-gaal);margin-bottom:24px}
.contact-info ul{list-style:none;padding:0}
.contact-info li{padding:12px 0;border-bottom:1px solid rgba(90,67,39,.08);font-size:15px;display:flex;gap:12px;align-items:flex-start}
.contact-info li:last-child{border-bottom:none}
.contact-info li strong{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:4px}
.contact-info a{color:var(--marron-gaal);font-weight:500;border-bottom:1px solid var(--dorado-tan);padding-bottom:1px}
.map-embed{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--crema-base)}
.map-embed iframe{width:100%;height:100%;border:0}
.contact-form{background:#fff;padding:32px;border-radius:14px}
.contact-form h3{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:24px;color:var(--marron-gaal);margin-bottom:8px}
.contact-form p{color:var(--marron-medio);font-size:14px;margin-bottom:20px}
.contact-form label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-weight:600;margin:14px 0 6px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:12px 14px;border:1px solid rgba(90,67,39,.2);border-radius:8px;font-family:'Inter',sans-serif;font-size:15px;color:var(--texto);background:var(--crema-clara);transition:border-color 200ms}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--dorado-tan)}
.contact-form textarea{resize:vertical;min-height:100px}
.contact-form .btn{width:100%;margin-top:20px;justify-content:center}

/* ─── Páginas casos / aviso ─── */
.legal-content{max-width:820px;margin:0 auto;padding:60px 32px 100px}
.legal-content h2{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:28px;color:var(--marron-gaal);margin:40px 0 14px}
.legal-content h3{font-family:'Inter',sans-serif;font-weight:600;font-size:16px;color:var(--marron-gaal);margin:24px 0 10px;letter-spacing:.02em}
.legal-content p,.legal-content li{font-size:15px;color:var(--marron-medio);line-height:1.7;margin-bottom:12px}
.legal-content ul,.legal-content ol{padding-left:22px;margin:12px 0}
.legal-content a{color:var(--marron-gaal);font-weight:500;border-bottom:1px solid var(--dorado-tan)}

/* ─── PÁGINA DE CASO DE ÉXITO INDIVIDUAL ─── */
.case-detail-hero{position:relative;height:70vh;min-height:480px;overflow:hidden}
.case-detail-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.case-detail-hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,46,31,.3) 0%,rgba(58,46,31,.85) 100%);z-index:2}
.case-detail-hero .content{position:relative;z-index:3;max-width:1100px;margin:0 auto;padding:0 32px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:64px;color:var(--crema-base)}
.case-detail-hero .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dorado-tan);margin-bottom:14px}
.case-detail-hero h1{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1.08;color:var(--crema-base);max-width:820px;text-shadow:0 4px 28px rgba(0,0,0,.55)}
.case-detail-hero h1 em{font-style:italic;color:var(--dorado-tan)}
.case-detail-hero .client-logo{margin-top:24px;display:flex;align-items:center;gap:14px}
.case-detail-hero .client-logo img{position:static;width:auto;height:50px;filter:brightness(0) invert(1);opacity:.9}
.case-detail-hero .client-logo span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}

/* Strip de métricas */
.metrics-strip{background:var(--marron-gaal);color:var(--crema-base);padding:32px 0}
.metrics-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:740px){.metrics-strip .wrap{grid-template-columns:repeat(2,1fr)}}
.metric{text-align:center}
.metric .num{font-family:'Playfair Display',serif;font-weight:500;font-size:42px;line-height:1;color:var(--dorado-tan);margin-bottom:6px}
.metric .label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}

/* Bloques de caso */
.case-block{padding:80px 0}
.case-block.alt{background:var(--crema-clara)}
.case-block .wrap{max-width:880px}
.case-block .tag{margin-bottom:14px}
.case-block h2{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:clamp(30px,4vw,44px);line-height:1.2;color:var(--marron-gaal);margin-bottom:24px}
.case-block p{font-size:17px;color:var(--marron-medio);line-height:1.7;margin-bottom:16px}

/* Quote pull */
.case-quote{margin:40px 0;padding:32px 38px;background:#fff;border-left:5px solid var(--dorado-tan);border-radius:8px}
.case-quote blockquote{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:24px;line-height:1.4;color:var(--marron-gaal);margin:0 0 16px}
.case-quote cite{font-style:normal;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--marron-medio)}

/* Galería 3 fotos */
.case-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
@media(max-width:740px){.case-gallery{grid-template-columns:1fr}}
.case-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;box-shadow:0 6px 20px rgba(90,67,39,.08)}

/* Servicios usados */
.services-used{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media(max-width:740px){.services-used{grid-template-columns:1fr}}
.service-used{background:#fff;border:1px solid rgba(90,67,39,.1);border-radius:12px;padding:22px;text-align:center}
.service-used .icon{font-size:32px;margin-bottom:10px}
.service-used h4{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--marron-gaal);margin-bottom:6px;text-transform:uppercase}
.service-used p{font-size:13px;color:var(--marron-medio);margin:0}

/* ─── ESTAMPA "CASO DESTACADO" en cards ─── */
.case-stamp{position:absolute;top:16px;left:16px;z-index:4;background:var(--dorado-tan);color:var(--marron-gaal);padding:8px 14px;border-radius:999px;font-family:'Inter',sans-serif;font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 4px 14px rgba(90,67,39,.25);display:flex;align-items:center;gap:6px;animation:stampPulse 3s ease-in-out infinite}
.case-stamp::before{content:"★"}
.case-card.featured{position:relative}
.case-card.featured:hover .case-stamp{transform:scale(1.05)}
@keyframes stampPulse{0%,100%{box-shadow:0 4px 14px rgba(90,67,39,.25)}50%{box-shadow:0 4px 24px rgba(201,162,103,.5)}}

/* ════════════════════════════════════════════════════════════
   MOBILE-FIRST · SWIPE HORIZONTAL (19 may 2026)
   Activo solo en pantallas <= 740px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 740px) {

  /* HERO más compacto */
  .hero-container{height:120vh}
  .hero-content .h-display{font-size:36px;line-height:1.05}
  .hero-content .lead{font-size:15px;margin:20px 0 24px}
  .hero-ctas{flex-direction:column;gap:10px}
  .hero-ctas .btn{justify-content:center;text-align:center}

  /* Secciones más compactas */
  section{padding:60px 0}
  .wrap{padding:0 20px}
  .h-section{font-size:30px;line-height:1.18;margin-bottom:16px}
  .lead{font-size:16px}

  /* ─── PROPUESTA DE VALOR (3 bloques) → SWIPE ─── */
  .value-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin:32px -20px 0;
    padding:8px 20px 20px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .value-grid::-webkit-scrollbar{display:none}
  .value-item{
    flex:0 0 86%;
    scroll-snap-align:center;
    background:#fff;
    padding:24px;
    border-radius:14px;
    box-shadow:0 4px 14px rgba(90,67,39,.06);
  }
  .value-item .num{font-size:36px;margin-bottom:8px}
  .value-item h3{font-size:20px;margin-bottom:8px}
  .value-item p{font-size:14px}

  /* ─── SERVICIOS (6 cards) → SWIPE ─── */
  .services-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin:48px -20px 0;
    padding:8px 20px 20px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .services-grid::-webkit-scrollbar{display:none}
  .service-card{
    flex:0 0 78%;
    scroll-snap-align:center;
    margin:0;
  }

  /* ─── TIPOS DE EVENTO (5 cards) → SWIPE ─── */
  .events-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin:40px -20px 0;
    padding:8px 20px 20px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .events-grid::-webkit-scrollbar{display:none}
  .event-card{
    flex:0 0 78%;
    scroll-snap-align:center;
  }

  /* ─── DETALLES → OCULTAR EN MOBILE (es secundario) ─── */
  #detalles{display:none}

  /* ─── PROCESO → COMPACTO VERTICAL ─── */
  .process{flex-direction:column;gap:24px}
  .process::before{display:none}
  .step{text-align:left;flex-direction:row;align-items:flex-start;gap:16px;max-width:none;padding:0}
  .step-num{flex:0 0 auto;font-size:36px;line-height:1}
  .step h4{font-size:17px;margin-bottom:4px}
  .step p{font-size:14px;margin:0}

  /* ─── NOSOTRAS → foto arriba + texto abajo ─── */
  .about{flex-direction:column;gap:24px}
  .about-img{max-width:100%;border-radius:14px;overflow:hidden}
  .about-img img{aspect-ratio:4/3;object-fit:cover}
  .about-content .h-section{font-size:28px}
  .values{grid-template-columns:1fr;gap:8px}
  .value{font-size:13px;padding:10px 14px}

  /* ─── CLIENTES → grid 3 cols compacto ─── */
  .clients-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .clients-grid img{max-height:36px}

  /* ─── CASOS → SWIPE HORIZONTAL ─── */
  .cases-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin:32px -20px 0;
    padding:8px 20px 20px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cases-grid::-webkit-scrollbar{display:none}
  .case-card{flex:0 0 82%;scroll-snap-align:center;margin:0}

  /* ─── TESTIMONIO compacto ─── */
  .testimonial blockquote{font-size:20px}

  /* ─── CTA FINAL compacto ─── */
  .cta-final .h-display{font-size:30px}
  .cta-final .btn{font-size:13px;padding:14px 24px;width:100%;justify-content:center}

  /* ─── FOOTER compacto ─── */
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-logo{max-width:140px}

  /* ─── NAV mobile: ocultar links, dejar logo + CTA ─── */
  .nav-links{display:none}
  .nav-cta{padding:10px 18px;font-size:11px}

  /* ─── Indicador visual "← swipe →" en grids ─── */
  .value-grid::after,
  .services-grid::after,
  .events-grid::after,
  .cases-grid::after{
    content:"";
    flex:0 0 4px;
  }

  /* Hint visual antes del primer scroll */
  .swipe-hint{
    display:block;
    text-align:center;
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--sage);
    margin-top:12px;
    opacity:.85;
  }
  .swipe-hint::before{content:"← "}
  .swipe-hint::after{content:" →"}

  /* ─── Decoraciones (PNG flotantes): ocultar en mobile ─── */
  .deco-inside{display:none}

  /* ─── Page hero (páginas hijas) ─── */
  .page-hero{padding:120px 20px 60px}
  .page-hero h1{font-size:34px}

  /* ─── Contact grid → 1 col en mobile ─── */
  .contact-grid{grid-template-columns:1fr;gap:20px}

  /* ─── Case detail (caso individual) ─── */
  .case-detail-hero{height:60vh;min-height:380px}
  .case-detail-hero h1{font-size:30px}
  .metrics-strip .wrap{grid-template-columns:repeat(2,1fr);gap:16px}
  .metric .num{font-size:32px}
  .case-block{padding:48px 0}
  .case-block h2{font-size:26px}
  .case-quote{padding:22px 24px;margin:24px 0}
  .case-quote blockquote{font-size:18px}
  .case-gallery{grid-template-columns:1fr;gap:10px}
  .services-used{grid-template-columns:1fr;gap:10px}

  /* ─── Estampa más grande y visible en mobile ─── */
  .case-stamp{font-size:11px;padding:10px 16px}
}

/* Desktop: ocultar el swipe-hint */
@media (min-width: 741px) {
  .swipe-hint{display:none !important}
}

/* ════════════════════════════════════════════════════════════
   MENÚ HAMBURGUESA MOBILE + DRAWER (19 may 2026)
   ════════════════════════════════════════════════════════════ */

/* Botón hamburguesa — oculto en desktop */
.nav-burger{
  display:none;
  width:44px;height:44px;
  background:transparent;border:none;cursor:pointer;
  padding:10px;margin-left:auto;margin-right:8px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  z-index:60;
}
.nav-burger span{
  display:block;width:24px;height:2px;
  background:var(--crema-base);
  transition:all 300ms cubic-bezier(0.4,0,0.2,1);
  border-radius:2px;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.nav.scrolled .nav-burger span{background:var(--marron-gaal);box-shadow:none}

/* Drawer overlay */
.drawer-overlay{
  position:fixed;inset:0;
  background:rgba(58,46,31,.6);
  backdrop-filter:blur(8px);
  z-index:100;
  opacity:0;visibility:hidden;
  transition:opacity 300ms,visibility 300ms;
}
.drawer-overlay.open{opacity:1;visibility:visible}

/* Drawer lateral */
.drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(86vw,360px);
  background:var(--crema-base);
  z-index:101;
  transform:translateX(100%);
  transition:transform 400ms cubic-bezier(0.4,0,0.2,1);
  box-shadow:-20px 0 60px rgba(58,46,31,.25);
  display:flex;flex-direction:column;
  padding:24px;
  overflow-y:auto;
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:24px;border-bottom:1px solid rgba(90,67,39,.1);
  margin-bottom:24px;
}
.drawer-logo img{height:48px}
.drawer-close{
  width:44px;height:44px;background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--marron-gaal);
  border-radius:50%;
  transition:background 200ms;
}
.drawer-close:hover{background:rgba(90,67,39,.08)}
.drawer-links{display:flex;flex-direction:column;gap:4px}
.drawer-links a{
  display:flex;align-items:center;gap:12px;
  padding:16px 14px;
  font-family:'Inter',sans-serif;font-weight:500;font-size:15px;
  color:var(--marron-gaal);
  border-radius:10px;
  transition:background 200ms;
  letter-spacing:.04em;
}
.drawer-links a:hover{background:rgba(201,162,103,.12)}
.drawer-links a.active{background:rgba(201,162,103,.18);color:var(--marron-gaal);font-weight:600}
.drawer-links a .icon{font-size:18px;width:22px;text-align:center}
.drawer-cta{
  margin-top:auto;padding-top:24px;
  border-top:1px solid rgba(90,67,39,.1);
}
.drawer-cta .btn{display:flex;justify-content:center;width:100%}
.drawer-contact{
  margin-top:16px;font-size:13px;color:var(--marron-medio);
  text-align:center;line-height:1.6;
}
.drawer-contact a{color:var(--marron-gaal);font-weight:600}

/* Activar hamburguesa en mobile */
@media (max-width:740px){
  .nav-burger{display:flex}
  .nav .nav-links{display:none !important}
  .nav .nav-cta{display:none}  /* ocultamos el cotizar del nav, ya está en el drawer */
}

/* En desktop el drawer no aparece nunca */
@media (min-width:741px){
  .drawer,.drawer-overlay,.nav-burger{display:none !important}
}

/* ─── BREADCRUMB de páginas hijas ─── */
.breadcrumb{
  background:var(--crema-clara);
  border-bottom:1px solid rgba(90,67,39,.08);
  padding:14px 0;
  font-size:13px;
}
.breadcrumb .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.breadcrumb a{
  color:var(--marron-gaal);font-weight:500;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:6px;
  background:rgba(201,162,103,.12);
  transition:all 200ms;
}
.breadcrumb a:hover{background:rgba(201,162,103,.25);gap:10px}
.breadcrumb a::before{content:"←";font-size:14px}
.breadcrumb .sep{color:var(--gris-texto,#999);opacity:.5}
.breadcrumb .current{color:var(--marron-medio);font-weight:500}

@media (max-width:740px){
  .breadcrumb{padding:10px 0;font-size:12px}
  .breadcrumb .wrap{padding:0 16px}
}

/* ─── FOOTER STICKY "Volver al inicio" en mobile (páginas hijas) ─── */
.back-fab{
  display:none;
  position:fixed;bottom:24px;left:24px;z-index:50;
  background:var(--marron-gaal);color:var(--crema-base);
  width:52px;height:52px;border-radius:50%;
  align-items:center;justify-content:center;
  text-decoration:none;font-size:22px;
  box-shadow:0 8px 24px rgba(58,46,31,.4);
  transition:transform 200ms,background 200ms;
}
.back-fab:hover{transform:scale(1.08);background:var(--dorado-tan);color:var(--marron-gaal)}
@media (max-width:740px){
  .back-fab{display:flex}
}

/* ─── Ajustes íconos SVG y tipográficos (no emojis) — 19 may 2026 ─── */
.drawer-links a svg.icon{
  width:22px;height:22px;flex-shrink:0;
  color:var(--marron-medio);
  transition:color 200ms;
}
.drawer-links a:hover svg.icon{color:var(--dorado-tan)}

/* Iniciales en círculo para servicios usados del caso */
.service-used .icon-letter{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--marron-gaal);
  color:var(--crema-base);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;
  font-style:italic;font-weight:500;
  font-size:20px;
  margin:0 auto 12px;
}

/* ════════════════════════════════════════════════════════════
   AJUSTES POST-DEPLOY · 19 may 2026 noche
   ════════════════════════════════════════════════════════════ */

/* 1) Caso Mazda · hero más bajo en desktop */
@media (min-width: 741px) {
  .case-detail-hero {
    height: 60vh;
    min-height: 420px;
    max-height: 600px;
  }
}

/* 2) Logos clientes +250% (de 36px a ~90px de altura) */
.clients-grid img {
  max-height: 90px !important;
  max-width: 180px !important;
  width: auto;
  object-fit: contain;
}
.clients-grid {
  gap: 32px;
}

/* Logos en case-cards: +250% (de 36px a 90px) */
.case-card .case-logo {
  width: 110px !important;
  height: 60px !important;
  padding: 10px;
  background: rgba(244,236,216,.98);
  border-radius: 6px;
}

/* Logo en caso individual hero */
.case-detail-hero .client-logo img {
  height: 70px !important;
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* 3) Mobile · arreglar overlap logo/título/hamburguesa */
@media (max-width: 740px) {
  /* Logo del nav más chico en mobile */
  .nav-logo {
    height: 44px !important;
  }
  .nav.scrolled .nav-logo {
    height: 38px !important;
  }
  /* Espacio top para que el hero no quede pegado al nav */
  .hero-container {
    padding-top: 20px;
  }
  /* Hero h1 más compacto en mobile */
  .hero-content {
    padding-top: 80px;
  }
  .hero-content .h-display {
    font-size: 32px !important;
    line-height: 1.06 !important;
    margin-top: 8px;
  }
  .hero-content .tag {
    font-size: 10px;
    letter-spacing: .14em;
  }
  /* Nav padding más controlado */
  .nav {
    padding: 10px 16px;
  }
  /* Logos en mobile compactos */
  .clients-grid img {
    max-height: 56px !important;
    max-width: 110px !important;
  }
  .clients-grid {
    gap: 16px;
  }
  /* Logos en cards mobile */
  .case-card .case-logo {
    width: 78px !important;
    height: 44px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   SERVICIOS COMO ACORDEÓN INLINE (details/summary nativo)
   ════════════════════════════════════════════════════════════ */

/* Resetear estilos default del <details> */
details.service-card {
  display: block;
  cursor: pointer;
}
details.service-card summary {
  list-style: none;
  cursor: pointer;
  outline: none;
}
details.service-card summary::-webkit-details-marker {
  display: none;
}

/* SVG icono del servicio en card */
.service-icon {
  width: 56px;
  height: 56px;
  background: var(--marron-gaal);
  color: var(--crema-base);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  transition: all 300ms;
}
details.service-card[open] .service-icon {
  background: var(--dorado-tan);
  color: var(--marron-gaal);
  transform: scale(1.1);
}

/* Detalle expandible debajo del summary */
.service-detail {
  padding: 0 26px 32px;
  border-top: 1px solid rgba(90,67,39,.08);
  margin-top: 0;
  animation: detailOpen 400ms ease-out;
}
.service-detail h4 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--marron-gaal);
  margin: 24px 0 10px;
}
.service-detail p {
  font-size: 14px;
  color: var(--marron-medio);
  line-height: 1.6;
  margin: 8px 0;
}
.service-detail ul {
  padding-left: 18px;
  margin: 8px 0;
}
.service-detail li {
  font-size: 14px;
  color: var(--marron-medio);
  line-height: 1.6;
  margin: 4px 0;
}
.service-detail li strong {
  color: var(--marron-gaal);
}
.service-cta {
  display: inline-flex;
  margin-top: 20px;
  text-decoration: none;
}

/* Indicador "+/−" del toggle */
.service-toggle::after {
  content: " +";
  font-weight: 700;
  margin-left: 4px;
  transition: transform 200ms;
}
details.service-card[open] .service-toggle::after {
  content: " −";
}

@keyframes detailOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Cuando un service-card está abierto, hover background distinto */
details.service-card[open] {
  background: var(--crema-clara);
}

/* En mobile: el detail expande dentro del swipe sin romper el grid */
@media (max-width: 740px) {
  details.service-card {
    flex: 0 0 88% !important;
  }
  details.service-card[open] {
    flex: 0 0 92% !important;
  }
  .service-detail {
    padding: 0 20px 24px;
  }
  .service-icon {
    width: 48px;
    height: 48px;
  }
}

/* ════════════════════════════════════════════════════════════
   FORMULARIO CONTACTO · Web3Forms + WhatsApp · 19 may 2026
   ════════════════════════════════════════════════════════════ */

.form-wrapper {
  position: relative;
}

.contact-form .req {
  color: var(--rojo, #E04830);
  margin-left: 2px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.form-actions .btn {
  flex: 1;
  min-width: 220px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.form-actions .btn-secondary {
  background: #25D366;
  color: #fff;
  border: none;
}
.form-actions .btn-secondary:hover {
  background: #1ebe5d;
  color: #fff;
}
.form-actions .btn[disabled] {
  opacity: 0.6;
  cursor: wait;
}

.form-disclaimer {
  margin-top: 16px;
  font-size: 12px;
  color: var(--marron-medio);
  text-align: center;
}
.form-disclaimer a {
  color: var(--marron-gaal);
  border-bottom: 1px solid var(--dorado-tan);
}

/* Mensaje de éxito */
.form-success {
  background: linear-gradient(135deg, #F4FAF6 0%, #fff 100%);
  border: 2px solid var(--verde, #1F8C5C);
  border-radius: 14px;
  padding: 40px 32px;
  text-align: center;
  animation: successPop 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.form-success-icon {
  color: var(--verde, #1F8C5C);
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}
.form-success h3 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  color: var(--marron-gaal);
  margin-bottom: 12px;
}
.form-success p {
  color: var(--marron-medio);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.form-success .btn {
  background: #25D366;
  color: #fff;
  border: none;
}
.form-success .btn:hover {
  background: #1ebe5d;
}

@keyframes successPop {
  0% { opacity: 0; transform: scale(0.95) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Mensaje de error */
.form-error {
  background: #FFF5F2;
  border: 1px solid var(--rojo, #E04830);
  border-left: 5px solid var(--rojo, #E04830);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.form-error p {
  margin: 0;
  font-size: 14px;
  color: #A8311E;
}
.form-error a {
  color: #A8311E;
  font-weight: 600;
  text-decoration: underline;
}

/* Mobile: botones en columna */
@media (max-width: 740px) {
  .form-actions {
    flex-direction: column;
  }
  .form-actions .btn {
    width: 100%;
  }
  .form-success {
    padding: 28px 20px;
  }
  .form-success h3 {
    font-size: 22px;
  }
}

/* ════════════════════════════════════════════════════════════
   AJUSTES FINALES · 19 may 2026 noche v2
   ════════════════════════════════════════════════════════════ */

/* 1) Mobile · quitar pleca beige sobre el hero del home */
@media (max-width: 740px) {
  .hero-container {
    padding-top: 0 !important;
    margin-top: 0;
  }
  .hero-content {
    padding-top: 100px;  /* espacio para nav (44px logo + paddings) */
  }
  /* Nav transparente cuando NO scrolled: fondo sutil para que se vea el logo blanco sobre el video */
  .nav:not(.scrolled) {
    background: linear-gradient(180deg, rgba(58,46,31,.55) 0%, transparent 100%);
  }
  /* Nav scrolled mantiene fondo crema sólido (lo que ya teníamos) */
  /* También en page-hero (páginas hijas), el nav scrolled debe estar siempre sólido */
}

/* 2) LOGOS EN CASE-CARDS · +250% (de 64×36 a 160×90) y MÁS visibles */
.case-card .case-logo {
  width: 160px !important;
  height: 90px !important;
  padding: 14px !important;
  background: rgba(255,255,255,.98) !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.case-card .case-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 3) Logo del caso individual (Mazda) en el hero · +250% */
.case-detail-hero .client-logo {
  margin-top: 20px;
  align-items: center;
}
.case-detail-hero .client-logo img {
  height: 90px !important;
  width: auto;
  max-width: 280px;
  filter: brightness(0) invert(1);
  opacity: 1;
  background: rgba(244,236,216,.12);
  padding: 14px 22px;
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

/* 4) Caso Mazda · hero MÁS bajo en desktop */
@media (min-width: 741px) {
  .case-detail-hero {
    height: 50vh !important;
    min-height: 380px !important;
    max-height: 520px !important;
  }
  .case-detail-hero .content {
    padding-bottom: 40px;
  }
}

/* 5) Mobile responsivo · logos en case-cards más chicos que desktop pero +grandes que antes */
@media (max-width: 740px) {
  .case-card .case-logo {
    width: 120px !important;
    height: 68px !important;
    padding: 10px !important;
  }
  .case-detail-hero .client-logo img {
    height: 70px !important;
    max-width: 220px;
  }
  .case-detail-hero {
    height: 55vh;
    min-height: 360px;
  }
}

/* ─── FIX: logo del cliente en caso individual (sin filter blanco) ─── */
.case-detail-hero .client-logo img {
  filter: none !important;
  background: rgba(255,255,255,.96) !important;
  padding: 14px 22px !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* ════════════════════════════════════════════════════════════
   FIX LOGO MAZDA EN CASE HERO · 20 may 2026
   Quitar filter blanco que dejaba el logo invisible
   ════════════════════════════════════════════════════════════ */
.case-detail-hero .client-logo {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.case-detail-hero .client-logo img {
  height: 90px !important;
  width: auto !important;
  max-width: 280px;
  filter: none !important;             /* NO blanquear */
  opacity: 1 !important;
  background: rgba(255,255,255,.96) !important;
  padding: 14px 22px !important;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  object-fit: contain;
}
@media (max-width: 740px) {
  .case-detail-hero .client-logo img {
    height: 64px !important;
    max-width: 220px;
    padding: 10px 16px !important;
  }
}