/* Acabado final: marfil, verde bosque y vino. Esta capa corrige los estilos
   heredados sin alterar los formularios ni las interacciones del sitio. */
:root {
  --st-ink: #23362d;
  --st-muted: #506057;
  --st-green: #176744;
  --st-green-hover: #105637;
  --st-paper: #fcfbf7;
  --st-tint: #f4f7f2;
  --st-line: #d9e3da;
  --st-wine: #713c51;
}
html { scroll-padding-top: 1.5rem; }
body { font-family: Inter, Arial, sans-serif; background: var(--st-paper); color: var(--st-ink); }
body, main, section, footer { max-width: 100%; }
.shell { width: 100%; max-width: 76rem; padding-inline: clamp(1rem, 3vw, 1.7rem); }
h1, h2, h3, .brand { font-family: 'Space Grotesk', Inter, Arial, sans-serif; }
.section h2, .contact h2, .review-ask h2 { line-height: 1.12; letter-spacing: -.045em; }
.section p, .feature-copy p, .contact p { line-height: 1.7; }
.section-description, .technical p, .catalog-grid p, .feature-copy p,
.solution p, .step p, .campaign p, .pack p, .business-item p,
.review-card-empty p, .faq-grid p, .maker-help, .space-note {
  color: var(--st-muted);
}

/* Cabecera compacta y menú de altura limitada en pantallas pequeñas. */
header.nav { min-height: 4.8rem; height: auto; padding-block: .6rem; }
header.nav .brand { font-size: clamp(1.06rem, 2.5vw, 1.36rem); line-height: 1; }
header.nav .brand small { font-size: .62rem; letter-spacing: .12em; }
header.nav .nav-links { gap: .72rem; }
header.nav .nav-links a { font-size: .79rem; line-height: 1.35; }
header.nav .quote-link { background: var(--st-green); border-color: #83b99b; }
header.nav .quote-link:hover { background: var(--st-green-hover); }

/* La fotografía conserva detalle y el texto permanece sobre un fondo limpio. */
#inicio.hero { background: var(--st-paper); min-height: 38rem; }
#inicio.hero .hero-image {
  inset: 0 0 0 auto; width: 61%; height: 100%; opacity: 1;
  object-fit: cover; object-position: center 46%; filter: none;
}
#inicio.hero::after {
  background: linear-gradient(90deg,
    #fcfbf7 0%, rgba(252,251,247,.99) 29%,
    rgba(252,251,247,.88) 46%, rgba(252,251,247,.1) 77%,
    rgba(252,251,247,0) 100%);
}
#inicio.hero .hero-content { max-width: 42rem; padding-block: clamp(3.8rem, 6vw, 5.5rem) 3.3rem; }
#inicio.hero h1 { color: var(--st-ink); max-width: 15ch; font-size: clamp(2.65rem, 5vw, 4.7rem); line-height: 1.08; }
#inicio.hero h1 em { color: var(--st-green); }
#inicio.hero .hero-copy { color: #3e5146; max-width: 36rem; font-size: clamp(.98rem, 1.3vw, 1.07rem); line-height: 1.67; }
#inicio.hero .hero-note { margin-top: 2rem; padding: .85rem 1rem; max-width: 38rem; border: 1px solid var(--st-line); border-radius: .8rem; }
#inicio.hero .hero-note strong { color: var(--st-ink); }
#inicio.hero .secondary-link { color: var(--st-green); border-color: #aec5b5; background: rgba(255,255,255,.82); }
#inicio.hero .secondary-link:hover { background: #edf5ee; }
.main-button, .quote-product, .game-start, .button { background: var(--st-green); border-color: var(--st-green); color: #fff; }
.main-button:hover, .quote-product:hover, .game-start:hover, .button:hover { background: var(--st-green-hover); border-color: var(--st-green-hover); color: #fff; }

/* Alternancia discreta para distinguir las secciones sin perder luminosidad. */
main > section:not(#inicio), main > section:not(#inicio).trust { background: var(--st-paper); }
main > section:is(.revenue,.works,.process,.packs,.space-lab,.reviews,.contact,.campaigns,.smarttech-faq,.technical,.lab) { background: var(--st-tint); }
main > section:is(.feature-split,.why,.business,.custom,.maker,.christmas,.behind,.catalog-section) { background: #f8f8f3; }
.trust .shell { border-block: 1px solid var(--st-line); }
.section { padding-block: clamp(3.2rem, 6vw, 5rem); }
.section-head--visual { gap: clamp(1.25rem, 4vw, 3.5rem); align-items: center; }
.section-head--visual h2 { max-width: 17ch; }
.section-visual { border: 1px solid var(--st-line); border-radius: 1rem; }
.section-visual img { object-fit: cover; }
.section-visual figcaption {
  color: #fff !important; background: linear-gradient(transparent, rgba(17,34,24,.88));
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.solution, .step, .revenue-card, .pack, .campaign, .why-point,
.business-item, .christmas-product, .review-card-empty, .faq-grid details,
.quote-form, .maker-form, .contact-card, .feature-copy, .showcase-panel {
  background: #fff; color: var(--st-ink); border: 1px solid var(--st-line);
  box-shadow: 0 8px 28px rgba(27,53,37,.045);
}
.revenue-card p, .why-point p, .business-item p, .campaign p,
.christmas-product .product-body p, .pack ul, .showcase-panel p,
.review-ask p { color: var(--st-muted); }
.revenue-card h3, .business-item h3, .christmas-product h3,
.showcase-panel h3, .why h2, .contact h2 { color: var(--st-ink); }
.revenue-no, .why-point strong, .business-item b, .campaign span { color: var(--st-wine); }
.work-label { color: #fff !important; background: linear-gradient(transparent,rgba(21,31,24,.88)); text-shadow: 0 1px 3px #15241a; }
.ribbon-card span { color: #fff !important; background: rgba(24,43,30,.82); border-radius: .4rem; text-shadow: none; }
.feature-split { gap: 0; }
.feature-photo img, .showcase-media img, .work img, .product-photo img { width: 100%; height: 100%; object-fit: cover; }
.feature-copy { border-radius: 0; box-shadow: none; }
.review-ask { color: var(--st-ink); background: #e9f1e8; border: 1px solid var(--st-line); }
.review-ask h2, .review-ask p, .review-ask .section-index { color: var(--st-ink); }
.contact { color: var(--st-ink); }
.contact p, .contact .eyebrow { color: #354c3d; }
.contact-card b { color: var(--st-muted); }
.contact-card a:not(.main-button) { color: var(--st-green); }
.smarttech-faq .section-description, .smarttech-faq details p { color: var(--st-muted); }
.faq-grid summary { color: var(--st-ink); }
.price-note, .season-note, .payment-note, .space-advisor { background: #edf3e9; color: var(--st-ink); border-color: #cadccc; }
.price-note b, .season-note strong, .payment-note strong { color: var(--st-green-hover); }
.game { color: var(--st-ink); background: #fff; border: 1px solid var(--st-line); }
.game-top, .game-foot { color: var(--st-ink); }
.game-board { background: radial-gradient(circle at 50% 40%,#e4eee2,#f8faf6 70%); }
.space-controls, .space-stage-wrap { background: #fff; border-color: var(--st-line); }
.space-upload { color: #fff !important; }
.space-upload label, .space-upload span { color: #fff !important; }
.space-advice, .space-advice strong { color: var(--st-ink); }
.space-stage:not(.has-photo)::before { color: #fff; background: rgba(18,35,23,.82); }
.material-chips span { color: #18573c; background: #eaf3e9; border-color: #b6d5bf; }
.christmas-float { z-index: 25; }
a.wa.wa--contact { z-index: 26; background: #16864e; border-color: #0e6f3d; color: #fff; }
a.wa.wa--contact:hover { background: #0f6f40 !important; }
a.wa.wa--contact .wa-phone { color: #fff; }

@media (max-width: 1200px) {
  header.nav .nav-links { top: calc(100% - .05rem); left: max(1rem,env(safe-area-inset-left)); right: max(1rem,env(safe-area-inset-right)); }
}
@media (max-width: 900px) {
  #inicio.hero { min-height: 0; }
  #inicio.hero .hero-image { width: 75%; }
  #inicio.hero::after { background: linear-gradient(90deg,#fcfbf7 0%,rgba(252,251,247,.97) 40%,rgba(252,251,247,.58) 75%,rgba(252,251,247,.2)); }
  .feature-split, .technical-grid, .catalog-grid, .section-head--visual,
  .custom-grid, .maker-grid, .space-grid, .business-grid, .why-grid,
  .review-layout, .contact-grid, .lab-grid, .behind-grid, .showcase {
    grid-template-columns: minmax(0,1fr); gap: 1.4rem;
  }
  .section-visual { min-height: 0; max-height: none; aspect-ratio: 16/10; }
  .section-visual img { height: 100%; min-height: 0; max-height: none; }
  .feature-photo { min-height: 0; aspect-ratio: 16/9; }
  .feature-copy { padding: clamp(1.5rem,5vw,3rem); }
  .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .revenue-grid, .pack-grid, .campaign-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .shell { padding-inline: max(1rem,env(safe-area-inset-left),env(safe-area-inset-right)); }
  header.nav { min-height: 4.4rem; }
  header.nav .nav-links { max-height: calc(100dvh - 4.5rem - env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  #inicio.hero { min-height: 0; }
  #inicio.hero .hero-image {
    inset: auto 0 0; width: 100%; height: clamp(15rem,60vw,22rem);
    opacity: 1; object-position: center 43%;
  }
  #inicio.hero::after {
    background: none;
  }
  #inicio.hero .hero-content { padding: 2.8rem 0 clamp(15rem,61vw,22rem); max-width: 100%; }
  #inicio.hero h1 { font-size: clamp(2.4rem,9.4vw,3.55rem); max-width: 15ch; overflow-wrap: normal; }
  #inicio.hero .hero-copy { max-width: 36rem; font-size: 1rem; }
  #inicio.hero .hero-note { margin-top: 1.4rem; }
  #inicio.hero .hero-actions { display: grid; grid-template-columns: 1fr; }
  #inicio.hero .hero-actions a { width: 100%; min-height: 3rem; justify-content: center; text-align: center; }
  .section { padding-block: 3.2rem; }
  .section h2, .contact h2 { font-size: clamp(2rem,8vw,3rem); }
  .section-head--visual h2 { max-width: none; }
  .solution-grid, .steps, .revenue-grid, .pack-grid, .campaign-grid,
  .business-list, .why-points, .christmas-grid { grid-template-columns: minmax(0,1fr); }
  .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gallery .work:first-child, .gallery .work:nth-child(6), .gallery .work:nth-child(7) { grid-column: span 2; }
  .quote-form, .maker-form, .review-form { grid-template-columns: minmax(0,1fr); }
  .quote-form .wide, .maker-form .wide, .review-form textarea, .review-form button { grid-column: 1; }
  .space-stage { min-height: 0; aspect-ratio: 4/3; }
  .space-product-picks { grid-template-columns: 1fr; }
  .space-upload input { width: 100%; }
  .game-top { gap: .35rem; flex-wrap: wrap; }
  .game-foot { align-items: center; flex-wrap: wrap; }
  .footer { padding-bottom: max(6.5rem,calc(5rem + env(safe-area-inset-bottom))); }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: minmax(0,1fr); }
  .gallery .work, .gallery .work:first-child, .gallery .work:nth-child(6), .gallery .work:nth-child(7) {
    grid-column: auto; height: clamp(13rem,65vw,18rem);
  }
  .trust .shell { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trust-item { padding: .85rem .5rem; font-size: .72rem; }
  .trust-item b { font-size: 1.15rem; }
  .christmas-float { left: .7rem; bottom: max(.8rem,env(safe-area-inset-bottom)); width: 3.2rem; max-width: 3.2rem; height: 3.2rem; padding: .45rem; overflow: hidden; }
  a.wa.wa--contact { right: .7rem; bottom: max(.8rem,env(safe-area-inset-bottom)); width: 3.4rem; min-width: 3.4rem; height: 3.4rem; padding: 0; }
  a.wa.wa--contact .wa-phone { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .contact-card { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Contraste de las secciones claras: los estilos anteriores definían texto
   claro para fondos oscuros y conservaban más especificidad que el tema nuevo. */
main section:not(#navidad) .section-description,
main section:not(#navidad) .section-head--visual .section-description,
main section .maker-copy p,
main section .behind-grid p,
main section .business-copy p,
main section .space-copy p,
main section .lab-copy p,
main section .catalog-grid p,
main section .revenue-card p,
main section .showcase-panel p {
  color: #45594e !important;
}
main section#cotizar.custom,
main section#navidad.christmas,
main section#contacto.contact { overflow: hidden; }
main section#cotizar.custom::before,
main section#contacto.contact::after { display: none; }
main section#cotizar.custom .section-description { color: #45594e !important; }
main section#cotizar.custom .price-note { color: #23362d; }
main section#cotizar.custom .price-note b { color: #174c36; }

/* Una sola zona azul marino crea jerarquía para el contacto final. */
main section#contacto.contact .contact-card {
  background: #132d3c; color: #f8f8f3; border-color: #315061;
  box-shadow: 0 16px 38px rgba(14,38,49,.15);
}
main section#contacto.contact .contact-card b {
  color: #f4dac6 !important; letter-spacing: .1em;
}
main section#contacto.contact .contact-card a:not(.main-button) {
  color: #fff !important; text-decoration: underline; text-decoration-color: #a4c7bb;
  text-underline-offset: .2em; line-height: 1.4;
}
main section#contacto.contact .contact-card .main-button {
  background: #13764d !important; color: #fff !important; border-color: #5baf85 !important;
}
main section#contacto.contact .contact-card .main-button:hover {
  background: #0e5d3d !important;
}

/* Navidad: verde pino y acentos vino, sin perder la claridad de las fichas. */
main section#navidad.christmas {
  background: #153c30; color: #fff9ef;
}
main section#navidad.christmas .section-index { color: #efc89d; }
main section#navidad.christmas h2,
main section#navidad.christmas .section-description { color: #fff9ef !important; }
main section#navidad.christmas .christmas-product {
  color: #23362d; background: #fffdf8; border-color: #d7c9b3;
}
main section#navidad.christmas .christmas-product :is(h3,p,small,span) { color: #23362d; }
main section#navidad.christmas .christmas-product .product-kicker { color: #77445b; }
main section#navidad.christmas .christmas-product .product-body p { color: #45594e; }
main section#navidad.christmas .christmas-product .quote-product { color: #fff; }
main section#navidad.christmas .christmas-product .quote-product span { color: #fff; }
main section#navidad.christmas .season-note {
  background: rgba(255,249,239,.09); border-color: rgba(255,249,239,.35); color: #fff9ef;
}
main section#navidad.christmas .season-note :is(span,b,strong,p) { color: #fff9ef; }
.festive-bar {
  background: #713c51; color: #fff9ef; border-bottom: 2px solid #d6ad7e;
  display: flex; justify-content: center; align-items: center; gap: .45rem 1.2rem;
  padding: .65rem 1rem; text-align: center; line-height: 1.35;
}
.festive-bar :is(b,span,a) { color: #fff9ef; }
.festive-bar a { text-underline-offset: .25rem; font-weight: 800; }
.festive-bar a:hover { color: #f2d7aa; }

/* Imágenes de portafolio legibles a tamaño real; ningún texto minúsculo
   incrustado en collages es necesario para entender las piezas. */
.gallery .work img, .ribbon-card img { object-fit: cover; object-position: center; }
.work-label { font-size: clamp(.9rem, 1.5vw, 1.1rem); line-height: 1.2; }
.ribbon-card span { font-size: .82rem; line-height: 1.2; }
.showcase-media { position: relative; }
.showcase-media::after {
  content: 'Ambientación ilustrativa'; position: absolute; left: .8rem; bottom: .8rem;
  padding: .25rem .55rem; background: rgba(18,42,32,.85); color: #fff;
  border-radius: .3rem; font-size: .75rem;
}
.contact-grid > *, .section-head--visual > *, .gallery > *, .christmas-grid > * { min-width: 0; }
.footer a { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .festive-bar { flex-wrap: wrap; gap: .25rem .65rem; padding: .6rem 1rem; font-size: .78rem; }
  .festive-bar b { flex-basis: 100%; }
  .festive-bar a { grid-column: auto; justify-self: auto; }
  main section#cotizar.custom,
  main section#contacto.contact { padding-block: 2.75rem; }
  main section#contacto.contact .contact-grid { gap: 1.2rem; }
  main section#contacto.contact .contact-card { padding: 1.2rem; }
  .christmas-float { display: none; }
  .ribbon-track { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; overflow: visible; }
  .ribbon-card { min-width: 0; width: auto; height: clamp(8.5rem,39vw,12rem); }
  .ribbon-card span { inset: auto .5rem .5rem; font-size: .72rem; }
  .footer .shell { align-items: center; text-align: center; }
  .footer .shell > * { max-width: 100%; }
}
@media (max-width: 360px) {
  .festive-bar span { flex-basis: 100%; }
  .ribbon-track { grid-template-columns: minmax(0,1fr); }
  .ribbon-card { height: 11rem; }
}