/* ═══════════════════════════════════════
   LIGHT THEME — tapicero.barcelona
   Load AFTER styles.css to override colors
   Based on pruebahome1: warm cream + burnt orange
   ═══════════════════════════════════════ */

/* ── Variables ── */
:root {
  --brand-50:#FFF8F0;--brand-100:#FFEDD5;--brand-200:#FED7AA;--brand-300:#FDBA74;
  --brand-400:#FB923C;--brand-500:#F97316;--brand-600:#EA580C;--brand-700:#B45309;
  --brand-800:#92400E;--brand-900:#78350F;
  --ink:#FFFAF5;--ink-light:#FFFFFF;--ink-lighter:#FAF7F2;
  --warm-50:#FFFAF5;--warm-100:#FFF8F0;--warm-200:#F5EDE4;
  --wa:#25D366;--emerald:#059669;
  --text-primary:#2D1810;--text-secondary:#3D2B1F;--text-muted:#78553E;--text-light:#9C7B65;
  --card-shadow:0 4px 24px rgba(45,24,16,.06);
  --card-shadow-hover:0 12px 40px rgba(45,24,16,.12);
}

/* ── Base ── */
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--ink) !important;
  color: var(--text-secondary) !important;
  -webkit-font-smoothing: antialiased;
}
.fs { font-family: 'DM Serif Display', Georgia, serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ── Stitch ── */
.stitch, .stitch-line {
  background-image: repeating-linear-gradient(90deg, var(--brand-300) 0px, var(--brand-300) 8px, transparent 8px, transparent 16px);
  height: 2px;
  opacity: .3;
}

/* ── Animations ── */
@keyframes pulse-wa { 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5)} 50%{box-shadow:0 0 0 14px rgba(37,211,102,0)} }
@keyframes sweep { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes countPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.pulse-wa, .wa-float { animation: pulse-wa 2s infinite; }

/* ── Reveal ── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── FAQ ── */
details[open] summary ~ * { animation: sweep .3s ease-out; }

/* ── Nav dropdown ── */
.nav-drop { visibility:hidden; opacity:0; transition:all .2s; }
.nav-parent:hover .nav-drop { visibility:visible; opacity:1; }

/* ── Grain sections: dark ones keep dark background so white text is readable ── */
section.grain:not(.bg-white):not(.bg-warm-50):not(.bg-warm-100):not(.fabric-bg):not(.bg-stone-50):not(.bg-stone-100):not([class*="py-"]) {
  background: #2D1810 !important;
  --ink-light: #292524;
  --ink: #1C1917;
  --ink-lighter: #3D2B1F;
}

/* ── Grain texture - lighter ── */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════
   TAILWIND COLOR OVERRIDES → LIGHT
   ══════════════════════════════════ */

/* ── Backgrounds ── */
.bg-warm-50, .bg-warm-50\/92, .bg-warm-50\/95 { background-color: #FFFAF5 !important; }
.bg-warm-100 { background-color: #FFF8F0 !important; }
.bg-stone-50 { background-color: #FFFAF5 !important; }
.bg-stone-100 { background-color: #FAF7F2 !important; }
.bg-white { background-color: #FFFFFF !important; }
.bg-stone-200, .bg-stone-300, .bg-gray-100 { background-color: #F5EDE4 !important; }
.bg-ink { background-color: #FFFAF5 !important; }
.bg-stone-700 { background-color: #F5EDE4 !important; }
.bg-stone-800\/60 { background-color: rgba(45,24,16,0.04) !important; }
.bg-stone-900 { background-color: #2D1810 !important; }
.bg-stone-950 { background-color: #1E0F08 !important; }

/* Colored accent backgrounds */
.bg-brand-50 { background-color: #FFF8F0 !important; }
.bg-brand-100 { background-color: #FFEDD5 !important; }
.bg-brand-200 { background-color: #FED7AA !important; }
.bg-brand-300\/20, .bg-brand-400\/20, .bg-brand-500\/20, .bg-brand-600\/20 {
  background-color: rgba(249,115,22,0.08) !important;
}
.bg-amber-50, .bg-amber-100 { background-color: #FFFBEB !important; }
.bg-blue-50, .bg-blue-100 { background-color: #EFF6FF !important; }
.bg-green-50, .bg-green-100, .bg-green-200, .bg-emerald-50 { background-color: #F0FDF4 !important; }
.bg-red-50, .bg-red-100 { background-color: #FEF2F2 !important; }
.bg-rose-50, .bg-pink-100 { background-color: #FFF1F2 !important; }
.bg-purple-100, .bg-violet-50 { background-color: #F5F3FF !important; }
.bg-sky-50, .bg-teal-50 { background-color: #F0F9FF !important; }
.bg-yellow-100, .bg-orange-100 { background-color: #FFFBEB !important; }
.bg-white\/\[0\.03\], .bg-white\/\[0\.04\] { background-color: rgba(45,24,16,0.02) !important; }

/* Fabric bg */
.fabric-bg {
  background-color: #FAF7F2 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='0.02'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Backdrop blur header override */
.backdrop-blur-lg { backdrop-filter: blur(16px) !important; }

/* ── Text colors ── */
.text-ink, .text-stone-800, .text-stone-900 { color: #2D1810 !important; }
.text-stone-700 { color: #3D2B1F !important; }
.text-stone-600 { color: #5C3D2E !important; }
.text-stone-500 { color: #78553E !important; }
.text-stone-400 { color: #9C7B65 !important; }
.text-stone-300 { color: #B49A84 !important; }
.text-white { color: #2D1810 !important; }
/* Keep text-white actually white on dark backgrounds */
.bg-brand-600 .text-white, .bg-brand-700 .text-white, .bg-brand-800 .text-white,
.bg-stone-900 .text-white, .bg-stone-950 .text-white,
.bg-blue-900 .text-white, .bg-red-900 .text-white,
section.grain .text-white,
.bg-brand-600.text-white, .bg-brand-700.text-white, .bg-brand-800.text-white,
.bg-stone-900.text-white, .bg-stone-950.text-white,
section:has(> .absolute.bg-brand-700) .text-white,
section:has(> .absolute.bg-brand-800) .text-white,
section:has(> .absolute.bg-stone-900) .text-white,
.bg-\[\#25D366\].text-white { color: #FFFFFF !important; }
.text-brand-700 { color: var(--brand-700) !important; }
.text-brand-600 { color: var(--brand-600) !important; }
.text-brand-800 { color: var(--brand-800) !important; }
.text-emerald-700 { color: #059669 !important; }

/* ── Border colors ── */
.border-stone-200, .border-stone-200\/50, .border-stone-200\/60, .border-stone-200\/40 {
  border-color: rgba(45,24,16,0.08) !important;
}
.border-warm-200 { border-color: rgba(45,24,16,0.08) !important; }
.border-stone-100 { border-color: rgba(45,24,16,0.04) !important; }
.border-stone-300 { border-color: rgba(45,24,16,0.12) !important; }
.border-brand-100, .border-brand-200 { border-color: #FED7AA !important; }
.border-brand-700\/30 { border-color: rgba(180,83,9,0.3) !important; }
.border-stone-700\/40 { border-color: rgba(45,24,16,0.08) !important; }
.border-stone-800 { border-color: rgba(45,24,16,0.12) !important; }
.border-white\/10, .border-white\/30, .border-white\/\[0\.06\] {
  border-color: rgba(45,24,16,0.06) !important;
}

/* ── Dividers ── */
.divide-stone-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(45,24,16,0.06) !important; }
.divide-stone-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(45,24,16,0.08) !important; }

/* ── Shadows ── */
.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
  --tw-shadow-color: rgba(45,24,16,0.06) !important;
}
.shadow-stone-900\/10, .shadow-stone-900\/15, .shadow-stone-300\/30 {
  --tw-shadow-color: rgba(45,24,16,0.08) !important;
}

/* ── Ring ── */
.ring-ink { --tw-ring-color: #FFFAF5 !important; }

/* ── Hover states ── */
.hover\:bg-warm-50:hover { background-color: #FFF8F0 !important; }
.hover\:bg-warm-100:hover { background-color: #FAF7F2 !important; }
.hover\:bg-brand-50:hover { background-color: #FFF8F0 !important; }
.hover\:bg-stone-50:hover { background-color: #FFFAF5 !important; }
.hover\:bg-stone-100:hover { background-color: #FAF7F2 !important; }
.hover\:text-brand-700:hover { color: var(--brand-700) !important; }
.hover\:text-brand-800:hover { color: var(--brand-800) !important; }
.hover\:border-brand-200:hover { border-color: #FED7AA !important; }
.hover\:shadow-brand-700\/30:hover { --tw-shadow-color: rgba(180,83,9,0.15) !important; }

/* ── Group hover ── */
.group-hover\/serv\:visible { visibility: visible; }
.group-hover\/serv\:opacity-100 { opacity: 1; }
.group-hover\/prof\:visible { visibility: visible; }
.group-hover\/prof\:opacity-100 { opacity: 1; }

/* ── Service cards (Tailwind version override) ── */
.service-card {
  background: white !important;
  border: 1px solid rgba(45,24,16,0.06) !important;
  box-shadow: var(--card-shadow) !important;
}
.service-card:hover {
  border-color: var(--brand-300) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* ── Polaroid cards ── */
.polaroid {
  background: white !important;
  border: 1px solid rgba(45,24,16,0.06) !important;
  box-shadow: var(--card-shadow) !important;
}
.polaroid:hover {
  border-color: var(--brand-300) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* ── FAQ details (Tailwind version) ── */
details {
  background: white !important;
  border: 1px solid rgba(45,24,16,0.06) !important;
  box-shadow: var(--card-shadow) !important;
}
details summary { color: var(--text-primary) !important; }
details summary ~ * { color: var(--text-muted) !important; }
details a { color: var(--brand-600) !important; }

/* ── Big quote ── */
.big-quote::before { color: var(--brand-300) !important; opacity: 0.5 !important; }

/* ── Diagonal sections ── */
.diagonal-top { clip-path: none !important; margin-top: 0 !important; padding-top: 3rem !important; }
.diagonal-bottom { clip-path: none !important; padding-bottom: 3rem !important; }

/* ── Timeline connector ── */
.timeline-step::after {
  background: repeating-linear-gradient(90deg, var(--brand-300) 0px, var(--brand-300) 6px, transparent 6px, transparent 12px) !important;
}

/* ── Underline accent ── */
.hand-underline::after { background: var(--brand-500) !important; }

/* ── Hero image clip ── */
.hero-img-clip { clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%); }

/* ── Article/blog cards ── */
article, .article-card {
  background: white !important;
  border-color: rgba(45,24,16,0.06) !important;
  box-shadow: var(--card-shadow) !important;
}

/* ── Forms/inputs ── */
input, textarea, select {
  background: white !important;
  color: var(--text-secondary) !important;
  border-color: rgba(45,24,16,0.12) !important;
}
input::placeholder, textarea::placeholder {
  color: #9C7B65 !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12) !important;
}

/* ── Tables ── */
table { border-color: rgba(45,24,16,0.08) !important; }
th { background: #FAF7F2 !important; color: var(--text-primary) !important; }
td { border-color: rgba(45,24,16,0.06) !important; }
tr:nth-child(even) td { background: rgba(45,24,16,0.02) !important; }

/* ── Mobile nav panel ── */
#mobileNav {
  background: white !important;
  border-color: rgba(45,24,16,0.06) !important;
}
#mobileNav a {
  color: var(--text-secondary) !important;
  border-color: rgba(45,24,16,0.06) !important;
}

/* ── Breadcrumb ── */
nav[aria-label="Breadcrumb"] a { color: #9C7B65 !important; }
nav[aria-label="Breadcrumb"] a:hover { color: var(--brand-600) !important; }

/* ── Badge/pill overrides ── */
.bg-brand-600\/15 { background-color: rgba(234,88,12,0.08) !important; }

/* ══════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════ */
@media (max-width: 639px) {
  .timeline-step::after { display: none; }
}