:root{
    --vino: #800020;
    --vino-dark: #46000f;
    --vino-darker: #300009;
    --vino-hover: #6a001a;
    --gris: #464646;
    --gris-suave: #717070;
    --rosa: #faf0f4;
    --fondo: #f5f5f5;
    --borde: rgba(128,0,32,0.15);
    --blanco: #ffffff;

    --font-heading: 'Poppins', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Playfair Display', serif;

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 32px;
    --radius-xl: 56px;

    --header-h: 76px;
    --container-w: 1240px;

    --shadow-md: 0 8px 30px rgba(70,0,15,0.12);
    --shadow-lg: 0 20px 50px rgba(70,0,15,0.18);
  }

  *, *::before, *::after{ box-sizing: border-box; }
  html{
    font-size: 16px;
    scroll-behavior: smooth;
  }
  body{
    margin:0;
    font-family: var(--font-body);
    color: var(--gris);
    background: var(--blanco);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color: inherit; }
  h1,h2,h3,h4{
    font-family: var(--font-heading);
    line-height: 1.25;
    margin: 0 0 var(--space-2);
    color: var(--gris);
    font-weight: 700;
  }
  p{ margin: 0 0 var(--space-2); color: var(--gris-suave); }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family: inherit; }

  .container{
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 var(--space-3);
  }

  section{ scroll-margin-top: var(--header-h); }

  /* Utility */
  .visually-hidden{
    position:absolute; width:1px;height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .eyebrow{
    display:inline-block;
    font-size:0.8rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color: var(--vino);
    background: var(--rosa);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: var(--space-2);
  }
  .section-head{
    max-width: 720px;
    margin: 0 auto var(--space-5);
    text-align:center;
  }
  .section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
  .section-head p{ font-size:1.05rem; margin-bottom:0; }
  .section-pad{ padding: var(--space-7) 0; }
  .bg-alt{ background: var(--fondo); }
  .section-silver{
    background: linear-gradient(135deg, #ffffff 0%, #f2f3f4 45%, #e6e8ea 100%);
    /* Fondo más oscuro que blanco puro: oscurecemos --gris-suave solo en este
       bloque para mantener el texto gris en 4.5:1+ de contraste (WCAG AA). */
    --gris-suave: #595959;
  }

  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding: 12px 26px;
    border-radius: var(--radius-sm);
    font-weight:600;
    font-size:1rem;
    text-decoration:none;
    border:2px solid transparent;
    cursor:pointer;
    transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn:active{ transform: scale(0.97); }
  .btn-primary{ background: var(--vino); color:#fff; }
  .btn-primary:hover{ background: var(--vino-hover); }
  .btn-light{ background:#fff; color: var(--vino); }
  .btn-light:hover{ background: var(--rosa); }
  .btn-outline{ border-color:#fff; color:#fff; background:transparent; }
  .btn-outline:hover{ background:#fff; color: var(--vino); }
  .btn-outline-vino{ border-color: var(--vino); color: var(--vino); background:transparent; }
  .btn-outline-vino:hover{ background: var(--vino); color:#fff; }
  .btn-whatsapp{ background:#25D366; color:#fff; }
  .btn-whatsapp:hover{ background:#1ebc59; }
  .btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline: 3px solid var(--vino);
    outline-offset: 2px;
  }

  /* Skip link */
  .skip-link{
    position:absolute; left:8px; top:-48px;
    background: var(--vino); color:#fff;
    padding:10px 16px; border-radius: var(--radius-sm);
    z-index:1000; transition: top .2s ease;
    text-decoration:none; font-weight:600;
  }
  .skip-link:focus{ top:8px; }

  /* Header */
  .site-header{
    position:sticky; top:0; z-index:500;
    background:#fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    border-bottom: 3px solid var(--vino);
  }
  .site-header .container{
    display:flex; align-items:center; justify-content:space-between;
    height: var(--header-h);
    gap: var(--space-3);
  }
  .logo-link{ display:flex; align-items:center; flex-shrink:0; }
  .logo-link img{ height:52px; width:auto; }
  nav.main-nav{ display:none; }
  nav.main-nav ul{ display:flex; gap: var(--space-3); }
  nav.main-nav a{
    font-weight:600; font-size:0.95rem;
    color: var(--vino);
    text-decoration:none;
    padding:6px 2px;
    border-bottom:2px solid transparent;
    transition: border-color .2s ease, color .2s ease;
    white-space:nowrap;
  }
  nav.main-nav a:hover, nav.main-nav a[aria-current="true"]{
    border-color: var(--vino);
  }
  .header-actions{ display:flex; align-items:center; gap: var(--space-2); }
  .header-cta{ display:none; }
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px;
    background:transparent; border:1px solid var(--borde); border-radius: var(--radius-sm);
    cursor:pointer;
  }
  .menu-toggle svg{ width:24px; height:24px; stroke: var(--vino); }

  .mobile-nav{
    display:none;
    background:#fff;
    border-top:1px solid var(--borde);
  }
  .mobile-nav.open{ display:block; }
  .mobile-nav ul{ display:flex; flex-direction:column; padding: var(--space-2) var(--space-3); gap:4px; }
  .mobile-nav a{
    display:block; padding: 12px 4px; font-weight:600; color: var(--gris);
    text-decoration:none; border-bottom:1px solid var(--fondo);
  }
  .mobile-nav a:hover{ color: var(--vino); }
  .mobile-nav .btn{ margin-top: var(--space-2); width:100%; }

  @media (min-width: 1024px){
    nav.main-nav{ display:block; }
    .header-cta{ display:inline-flex; }
    .menu-toggle{ display:none; }
  }

  /* HERO */
  .hero{
    background: linear-gradient(160deg, #62001a 0%, var(--vino) 45%, var(--vino-dark) 100%);
    padding: 0 28px var(--space-6);
    position:relative;
    overflow:hidden;
  }
  .hero-visual{
    position:relative;
    margin: 0 0 var(--space-5);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    overflow:hidden;
    box-shadow: var(--shadow-lg);
  }
  @media (max-width: 640px){
    .hero{ padding-left: 14px; padding-right: 14px; }
  }
  .hero-visual img.collage{
    width:100%;
    height:auto;
    max-height: 560px;
    object-fit: cover;
    object-position: center 90%;
    display:block;
  }
  .hero-visual::after{
    content:"";
    position:absolute; inset:0;
  }
  .hero-logo-overlay{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding: var(--space-3);
    z-index:2;
  }
  .hero-logo-card{
    background: radial-gradient(ellipse 60% 68% at center, #fff 45%, rgba(255,255,255,0.9) 62%, rgba(255,255,255,0.5) 78%, rgba(255,255,255,0) 100%);
    padding: var(--space-5) var(--space-6);
    display:flex; flex-direction:column; align-items:center;
  }
  .hero-logo-card img{
    width: min(300px, 55vw);
  }
  .hero-logo-overlay .tagline{
    font-family: var(--font-accent);
    font-style: italic;
    font-weight:600;
    color:#800020;
    font-size: clamp(1.1rem, 2.4vw, 1.6rem);
    margin: var(--space-2) 0 0;
  }

  .hero-content{ max-width: 900px; margin: 0 auto; text-align:center; color:#fff; }
  .hero-content h1{
    color:#fff;
    font-size: clamp(1.8rem, 4vw, 2.9rem);
  }
  .hero-content p{
    color: rgba(255,255,255,0.88);
    font-size: 1.1rem;
    max-width: 760px;
    margin-left:auto; margin-right:auto;
  }
  .hero-ctas{
    display:flex; flex-wrap:wrap; gap: var(--space-2);
    justify-content:center; margin: var(--space-3) 0;
  }
  .hero-sectors{
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top: var(--space-3);
  }
  .hero-sectors li{
    background: rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.3);
    color:#fff;
    font-size:0.85rem; font-weight:600;
    padding:6px 14px; border-radius:999px;
  }
  .hero-badges{
    display:flex; flex-wrap:wrap; gap: var(--space-2);
    justify-content:center; margin-top: var(--space-5);
  }
  .hero-badge{
    display:inline-flex; align-items:center; gap:12px;
    background:#fff; color:var(--gris);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .hero-badge:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  .hero-badge strong{ display:block; font-size:1.6rem; color: var(--vino); font-family: var(--font-heading); }
  .hero-badge span{ font-size:0.85rem; color: var(--gris-suave); }
  @media (prefers-reduced-motion: reduce){
    .hero-badge{ transition:none; }
  }

  /* Lifecycle chart */
  .lifecycle-wrap{
    max-width: 1000px; margin: var(--space-5) auto 0;
    overflow-x: auto;
    padding-bottom: var(--space-1);
  }
  .lifecycle-wrap svg{
    display:block; width:100%; height:auto; min-width: 720px;
    font-family: var(--font-body);
  }
  .lifecycle-wrap .phase-label{ font-family: var(--font-heading); font-weight:700; fill: var(--gris); font-size:16px; }
  .lifecycle-wrap .axis-label{ font-weight:600; fill: var(--gris-suave); font-size:15px; }
  .lifecycle-wrap .milestone-label{ fill: var(--gris-suave); font-size:13px; }
  .lifecycle-wrap .axis-line{ stroke: var(--gris); stroke-width:2; }
  .lifecycle-wrap .divider-line{ stroke: var(--borde); stroke-width:2; stroke-dasharray:4 5; }
  .lifecycle-wrap .zone-band{ fill: var(--rosa); }

  /* Puntos interactivos: costo de un error por etapa */
  .error-point{ cursor:pointer; }
  .error-point .touch-target{ fill:transparent; }
  .error-point .glow{ fill: var(--vino); opacity:.16; }
  .error-point .pulse-ring{
    fill:none; stroke: var(--vino); stroke-width:2;
    transform-box: fill-box; transform-origin:center;
    opacity:0; animation: error-pulse 1.8s ease-out 4;
  }
  .error-point .pulse-ring.ring-2{ animation-delay:.6s; }
  .lifecycle-wrap.is-interacted .pulse-ring{ animation:none; opacity:0; }
  @keyframes error-pulse{
    0%{ transform:scale(.55); opacity:.5; }
    100%{ transform:scale(2.2); opacity:0; }
  }
  .error-point .dot{
    fill: var(--vino); transform-box: fill-box; transform-origin:center;
    transition: transform .15s ease;
  }
  .error-point:hover .dot,
  .error-point:focus-visible .dot,
  .error-point.active .dot{ transform: scale(1.4); }
  .error-point:focus{ outline:none; }
  .error-point:focus-visible .touch-target{ outline: 3px solid var(--vino); outline-offset:2px; }

  .error-tooltip{ pointer-events:none; }
  .error-tooltip .tt-inner{
    opacity:0; transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .error-point:hover .error-tooltip,
  .error-point:focus-visible .error-tooltip,
  .error-point.active .error-tooltip{ pointer-events:auto; }
  .error-point:hover .tt-inner,
  .error-point:focus-visible .tt-inner,
  .error-point.active .tt-inner{ opacity:1; transform: translateY(0); }
  .error-tooltip rect{ fill: url(#tooltipGrad); }
  .tooltip-grad-a{ stop-color: var(--vino); }
  .tooltip-grad-b{ stop-color: var(--vino-dark); }
  .error-tooltip .tooltip-line{ fill:#fff; font-size:12.5px; font-weight:600; }
  .error-tooltip .tooltip-badge{ fill:rgba(255,255,255,.16); }
  .error-tooltip .tooltip-mult{ fill:#fff; font-size:17px; font-weight:800; font-family: var(--font-heading); }

  @media (prefers-reduced-motion: reduce){
    .error-point .pulse-ring{ animation:none; opacity:0; }
    .error-point .dot, .error-tooltip{ transition:none; }
  }

  .chart-note{ text-align:center; font-size:0.85rem; margin-top: var(--space-3); color: var(--gris-suave); }

  .chart-legend{
    display:flex; flex-wrap:wrap; justify-content:center; gap: var(--space-4);
    margin-top: var(--space-4);
  }
  .chart-legend-item{ display:flex; align-items:center; gap:10px; font-size:0.9rem; font-weight:600; color: var(--gris); }
  .chart-legend-swatch{ width:28px; height:0; border-top-width:3px; border-top-style:solid; flex-shrink:0; }

  /* Nosotros */
  .nosotros-grid{
    display:grid; gap: var(--space-6);
    grid-template-columns: 1fr;
    align-items:center;
  }
  .nosotros-text h3{ font-size:1.2rem; margin-top: var(--space-4); }
  .pill-list{ display:flex; flex-wrap:wrap; gap:10px; margin: var(--space-2) 0 var(--space-3); }
  .pill{
    background: var(--rosa); color: var(--vino);
    font-weight:600; font-size:0.85rem;
    padding:6px 14px; border-radius:999px;
  }
  .check-list li{
    display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; color: var(--gris-suave);
  }
  .check-list svg{ flex-shrink:0; width:20px;height:20px; stroke: var(--vino); margin-top:2px; }
  .nosotros-photos{
    display:grid; grid-template-columns:1fr 1fr; gap: var(--space-2);
  }
  .nosotros-photos > div{
    display:flex; flex-direction:column; gap: var(--space-2);
  }
  .photo-slot{
    position:relative; overflow:hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }
  .photo-slot.tall{ height:320px; }
  .photo-slot.short{ height:150px; }
  .photo-slot img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; border-radius: var(--radius-md);
    opacity:1;
    transition: opacity 0.25s ease;
  }
  /* Foto entrante: arranca invisible antes de animar a opacidad 1 (sin transición en el instante del cambio de src) */
  .photo-slot img.is-fading-in{
    opacity:0; transition:none;
  }
  /* Foto saliente clonada: se desvanece por encima mientras la nueva entra debajo, así el marco nunca queda al descubierto */
  .photo-slot img.is-clone{ pointer-events:none; }
  .photo-slot img.is-clone.is-leaving{ opacity:0; }
  /* Marco metálico plateado: capa fija superpuesta, independiente del crossfade de fotos */
  .photo-slot::after{
    content:'';
    position:absolute; inset:0;
    border-radius: var(--radius-md);
    padding:2px;
    background: linear-gradient(135deg, #f4f4f4 0%, #b8bcc0 22%, #7c8085 48%, #d8dadc 68%, #9a9ea2 84%, #eef0f0 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events:none;
  }
  .nosotros-photos-wrap{ position:relative; }
  .gallery-dots{
    display:flex; justify-content:center; gap:8px; margin-top: var(--space-3);
  }
  .gallery-dots button{
    width:9px; height:9px; padding:0; border-radius:50%;
    border:1px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.25);
    cursor:pointer; transition: background 0.2s ease, transform 0.2s ease;
  }
  .gallery-dots button[aria-current="true"]{
    background:#fff; transform: scale(1.15);
  }
  @media (prefers-reduced-motion: reduce){
    .photo-slot img{ transition:none; }
  }
  .location-line{
    display:flex; align-items:center; gap:8px; margin-top: var(--space-3);
    font-weight:600; color: var(--vino);
  }
  .location-line svg{ width:20px; height:20px; stroke: var(--vino); flex-shrink:0; }

  @media (min-width: 900px){
    .nosotros-grid{ grid-template-columns: 1fr 1.25fr; }
  }

  /* Fondo degradado vino compartido (igual al hero) — reutilizable en varias secciones */
  .section-dark{
    background: linear-gradient(160deg, #62001a 0%, var(--vino) 45%, var(--vino-dark) 100%);
  }
  .section-dark .section-head h2{ color:#fff; }
  .section-dark .section-head p{ color: rgba(255,255,255,0.88); }

  /* Nosotros — ajustes de texto propios de esta sección */
  .nosotros-dark .nosotros-text h2,
  .nosotros-dark .nosotros-text h3{ color:#fff; }
  .nosotros-dark .nosotros-text > p{ color: rgba(255,255,255,0.88); }
  .nosotros-dark .check-list li{ color: rgba(255,255,255,0.9); }
  .nosotros-dark .check-list svg{ stroke:#fff; }
  .nosotros-dark .location-line{ color:#fff; }
  .nosotros-dark .location-line svg{ stroke:#fff; }
  .nosotros-dark .pill{ box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
  .nosotros-dark .nosotros-photos img{ box-shadow: 0 14px 34px rgba(0,0,0,0.4); }

  /* Proyectos — ajustes de texto propios de esta sección */
  .proyectos-dark .proyecto-card{ box-shadow: 0 14px 34px rgba(0,0,0,0.4); }

  /* Cotización — el form-card ya trae su propio fondo blanco, solo se ajusta lo que queda fuera */
  .section-dark .form-note{ color: rgba(255,255,255,0.85); }
  .section-dark .form-note a{ color:#fff !important; text-decoration:underline; }
  .section-dark .form-card{ box-shadow: 0 20px 50px rgba(0,0,0,0.35); }

  /* Servicios */
  .servicios-grid{
    display:grid; grid-template-columns: 1fr; gap: var(--space-3);
  }
  .servicio-card{
    display:flex; flex-direction:column;
    background: linear-gradient(135deg, var(--vino) 0%, var(--vino-dark) 100%);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    cursor:pointer;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .servicio-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .servicio-card:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; }
  .servicio-icon{
    width:56px; height:56px; border-radius: var(--radius-sm);
    background: var(--vino); display:flex; align-items:center; justify-content:center;
    margin-bottom: var(--space-2);
  }
  .servicio-icon svg{ width:28px; height:28px; stroke:#fff; fill:none; }
  .servicio-card .servicio-icon{
    background:#fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  }
  .servicio-card .servicio-icon svg{ stroke: var(--vino); }
  .servicio-card h3{ font-size:1.15rem; color:#fff; }
  .servicio-card p{ font-size:0.95rem; color: rgba(255,255,255,0.85); }
  .chip-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top: var(--space-2); }
  .chip{
    background: var(--rosa); color: var(--vino);
    font-size:0.78rem; font-weight:600;
    padding:4px 10px; border-radius:999px;
  }
  .servicio-card .chip{ background: rgba(255,255,255,0.92); }
  .servicio-card-more{
    display:inline-flex; align-items:center; gap:6px;
    margin-top: auto; padding-top: var(--space-3);
    font-size:0.85rem; font-weight:700; color:#fff;
  }
  .servicio-card-more svg{ width:16px; height:16px; stroke:#fff; transition: transform .2s ease; }
  .servicio-card:hover .servicio-card-more svg,
  .producto-card:hover .servicio-card-more svg{ transform: translateX(3px); }
  .servicio-card--open{
    background: var(--rosa);
    border: 2px dashed var(--vino);
  }
  .servicio-card--open h3{ color: var(--gris); }
  .servicio-card--open p{ color: var(--gris-suave); }
  .servicio-card--open .servicio-icon{ background: var(--vino); box-shadow:none; }
  .servicio-card--open .servicio-icon svg{ stroke:#fff; }
  .servicio-card--open .servicio-card-more{ color: var(--vino); }
  .servicio-card--open .servicio-card-more svg{ stroke: var(--vino); }
  @media (min-width: 700px){
    .servicios-grid{ grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 1100px){
    .servicios-grid{ grid-template-columns: repeat(3, 1fr); }
  }

  /* Tarjeta modal de servicio */
  .servicio-modal-overlay{
    position:fixed; inset:0; z-index:2000;
    display:flex; align-items:center; justify-content:center;
    padding: var(--space-3);
    background: rgba(30,0,8,0.6);
    backdrop-filter: blur(4px);
    opacity:0; transition: opacity 0.25s ease;
  }
  .servicio-modal-overlay[hidden]{ display:none; }
  .servicio-modal-overlay.open{ opacity:1; }
  .servicio-modal{
    background:#fff; width:100%; max-width:640px; max-height:88vh;
    overflow-y:auto; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform: scale(0.94) translateY(16px);
    opacity:0;
    transition: transform 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease, max-width 0.3s ease;
  }
  @media (min-width:600px){
    .servicio-modal.servicio-modal--producto{ max-width:760px; }
  }
  .servicio-modal-overlay.open .servicio-modal{ transform: scale(1) translateY(0); opacity:1; }
  .servicio-modal-media{
    position:relative; height:220px; overflow:hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--rosa);
  }
  /* Los productos usan un modal más ancho (ver .servicio-modal--producto abajo); con la altura
     fija de servicios esa galería recortaba demasiado arriba/abajo. El JS fija aspect-ratio
     inline según las dimensiones reales de la primera foto de cada producto (ver openServicioModal),
     así la ventana no recorta ni de más ni de menos; 4/3 aquí solo es respaldo si faltara el dato.
     max-height evita que en pantallas grandes la imagen se vea desproporcionadamente alta. */
  .servicio-modal--producto .servicio-modal-media{ height:auto; aspect-ratio: 4 / 3; max-height:520px; }
  .servicio-modal-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .servicio-modal-media img[hidden]{ display:none; }
  .servicio-modal-carousel{ position:absolute; inset:0; }
  .servicio-modal-carousel[hidden]{ display:none; }
  .servicio-modal-slide{
    position:absolute; inset:0; overflow:hidden;
    opacity:0; transform: translateX(100%);
    transition: transform 0.6s ease, opacity 0.6s ease;
  }
  .servicio-modal-slide.is-active{ opacity:1; transform: translateX(0); }
  .servicio-modal-slide.is-leaving{ opacity:0; transform: translateX(-100%); }
  .servicio-modal-slide.is-resetting{ transition:none; }
  .servicio-modal-slide-img{ width:100%; height:100%; object-fit:cover; display:block; }
  @media (prefers-reduced-motion: reduce){
    .servicio-modal-slide{ transition: opacity 0.3s ease; transform:none !important; }
  }
  .servicio-modal-media-placeholder{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, var(--vino) 0%, var(--vino-dark) 100%);
  }
  .servicio-modal-media-placeholder svg{ width:56px; height:56px; stroke:#fff; opacity:.85; }
  .servicio-modal-media-placeholder[hidden]{ display:none; }
  .servicio-modal-close{
    position:absolute; top: var(--space-2); right: var(--space-2);
    width:40px; height:40px; border-radius:50%;
    background: rgba(255,255,255,0.92); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow-md);
    transition: background .2s ease, transform .15s ease;
  }
  .servicio-modal-close:hover{ background:#fff; transform: scale(1.06); }
  .servicio-modal-close:focus-visible{ outline: 3px solid var(--vino); outline-offset: 2px; }
  .servicio-modal-close svg{ width:20px; height:20px; stroke: var(--gris); }
  .servicio-modal-body{ padding: var(--space-4); }
  .servicio-modal-badge{
    display:inline-block; background: var(--rosa); color: var(--vino);
    font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
    padding:4px 12px; border-radius:999px; margin-bottom: var(--space-1);
  }
  .servicio-modal-badge[hidden]{ display:none; }
  .servicio-modal-head{ display:flex; align-items:center; gap: var(--space-2); margin-bottom: var(--space-2); }
  .servicio-modal-head .servicio-icon{ margin-bottom:0; flex-shrink:0; }
  .servicio-modal-head .servicio-icon[hidden]{ display:none; }
  .servicio-modal-body h3{ font-size:1.5rem; margin:0; }
  .servicio-modal-body p{ font-size:1.02rem; line-height:1.7; color: var(--gris-suave); }
  .servicio-modal-body .chip-list{ margin-top: var(--space-3); }
  .servicio-modal-body .chip-list[hidden]{ display:none; }
  .producto-modal-features{ margin-top: var(--space-3); }
  .producto-modal-features[hidden]{ display:none; }
  .producto-modal-specs{ margin-top: var(--space-4); }
  .producto-modal-specs[hidden]{ display:none; }
  .producto-modal-specs h4{
    font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
    color: var(--vino); margin-bottom: var(--space-2);
  }
  .specs-grid{ border-top:1px solid var(--borde); }
  .specs-grid .spec-row{
    display:flex; align-items:baseline; justify-content:space-between; gap: var(--space-2);
    padding:10px 0; border-bottom:1px solid var(--borde);
  }
  .specs-grid dt{ color: var(--gris-suave); font-size:0.9rem; }
  .specs-grid dd{ margin:0; font-weight:600; color: var(--gris); font-size:0.9rem; text-align:right; }
  .specs-note{
    font-size:0.78rem !important; color: var(--gris-suave) !important;
    line-height:1.5 !important; margin-top: var(--space-1) !important;
    font-style:italic;
  }
  .servicio-modal-actions{ margin-top: var(--space-4); }
  .servicio-modal-actions .btn{ width:100%; }
  @media (min-width:600px){
    .servicio-modal-media{ height:280px; }
    .servicio-modal-actions .btn{ width:auto; }
  }
  @media (prefers-reduced-motion: reduce){
    .servicio-modal-overlay, .servicio-modal{ transition:none; }
  }

  .cta-banner{
    margin-top: var(--space-6);
    background: linear-gradient(135deg, var(--vino) 0%, var(--vino-dark) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-4);
    text-align:center; color:#fff;
    box-shadow: var(--shadow-md);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .cta-banner:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .cta-banner h3{ color:#fff; font-size:1.5rem; }
  .cta-banner p{ color: rgba(255,255,255,0.85); max-width:600px; margin-left:auto; margin-right:auto; }
  .cta-banner .hero-ctas{ margin-bottom:0; }
  @media (prefers-reduced-motion: reduce){
    .cta-banner{ transition:none; }
  }

  /* Proyectos */
  .proyectos-grid{
    display:grid; grid-template-columns: 1fr; gap: var(--space-3);
  }
  .proyecto-card{
    border-radius: var(--radius-md); overflow:hidden;
    box-shadow: var(--shadow-md);
    background:#fff;
    position:relative;
  }
  .proyecto-media{
    position:relative; height:220px; overflow:hidden;
  }
  .proyecto-card img{
    width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  }
  .proyecto-card .tag{
    position:absolute; top:14px; left:14px; z-index:2;
    background: rgba(128,0,32,0.9); color:#fff;
    font-size:0.72rem; font-weight:700; letter-spacing:0.03em;
    text-transform:uppercase;
    padding:5px 12px; border-radius:999px;
  }
  .proyecto-card .body{ padding: var(--space-3); }
  .proyecto-card h3{ font-size:1.05rem; margin-bottom:6px; }
  .proyecto-card p{ font-size:0.9rem; margin-bottom:0; }
  @media (min-width: 700px){
    .proyectos-grid{ grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 1100px){
    .proyectos-grid{ grid-template-columns: repeat(3, 1fr); }
  }

  /* Clientes */
  .clientes-marquee{
    position:relative; overflow:hidden; box-sizing:border-box;
    max-width:880px; margin: var(--space-5) auto 0;
    padding: 0 var(--space-3);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  }
  .clientes-track{
    display:flex; align-items:center; gap: var(--space-3);
    width:max-content;
    padding: 0 var(--space-3);
    animation: clientes-scroll 42s linear infinite;
  }
  .cliente-pill{
    flex:0 0 auto;
    background: var(--vino);
    color:#fff;
    font-weight:700;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    padding: 14px 30px;
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    white-space:nowrap;
  }
  @keyframes clientes-scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .clientes-track{ animation: none; }
  }

  /* Productos */
  .productos-grid{
    display:grid; grid-template-columns: 1fr; gap: var(--space-3);
  }
  .producto-card{
    display:flex; flex-direction:column;
    background:#fff; border:1px solid var(--borde); border-radius: var(--radius-md);
    overflow:hidden; text-align:center;
    box-shadow: var(--shadow-md);
    cursor:pointer;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .producto-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .producto-card:focus-visible{ outline: 3px solid var(--vino); outline-offset: 3px; }
  .producto-media{
    position:relative; aspect-ratio: 4 / 3; overflow:hidden; background: var(--rosa);
  }
  .producto-tag{
    position:absolute; top:10px; left:10px; z-index:2;
    background: rgba(128,0,32,0.78); color:#fff;
    font-size:0.6rem; font-weight:600; letter-spacing:0.03em;
    text-transform:uppercase;
    padding:3px 9px; border-radius:999px;
  }
  .producto-card img{
    width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  }
  .producto-body{
    display:flex; flex-direction:column; flex:1;
    padding: var(--space-4);
  }
  .producto-brand{
    display:inline-block;
    font-size:0.72em; font-weight:700;
    letter-spacing:0.06em;
    color: var(--vino);
  }
  .producto-card .servicio-card-more{ margin-left:auto; margin-right:auto; color: var(--vino); }
  .producto-card .servicio-card-more svg{ stroke: var(--vino); }
  @media (min-width: 700px){
    .productos-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1000px){
    .productos-grid{ grid-template-columns: repeat(4, 1fr); }
  }
  .productos-note{ text-align:center; margin-top: var(--space-4); font-size:0.9rem; }

  /* Cotizacion form */
  .form-card{
    max-width: 820px; margin:0 auto;
    background:#fff; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); border: 1px solid var(--borde);
    padding: var(--space-5);
  }
  .form-row{ display:grid; grid-template-columns:1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
  @media (min-width:700px){ .form-row.two{ grid-template-columns: 1fr 1fr; } }
  .field label{ display:block; font-weight:600; font-size:0.92rem; margin-bottom:6px; color: var(--gris); }
  .field .req{ color: var(--vino); }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea, .field input[type="file"]{
    width:100%; padding:12px 14px; border-radius: var(--radius-sm);
    border:1.5px solid var(--borde); font-size:1rem; font-family:inherit; color:var(--gris);
    background: #fff;
    min-height:48px;
  }
  .field textarea{ min-height:120px; resize:vertical; }
  .field small{ display:block; margin-top:6px; color: var(--gris-suave); font-size:0.8rem; }
  .radio-group{ display:flex; flex-wrap:wrap; gap: var(--space-3); }
  .radio-group label{ display:flex; align-items:center; gap:8px; font-weight:500; color:var(--gris); font-size:0.95rem; }
  .radio-group input{ width:20px; height:20px; accent-color: var(--vino); }
  .consent-row{ display:flex; align-items:flex-start; gap:10px; margin: var(--space-3) 0; }
  .consent-row input{ width:20px; height:20px; margin-top:2px; accent-color: var(--vino); flex-shrink:0; }
  .consent-row label{ font-size:0.9rem; color: var(--gris-suave); }
  .form-success{
    display:none; text-align:center; padding: var(--space-4);
    background: var(--rosa); border-radius: var(--radius-md);
  }
  .form-success.show{ display:block; }
  .form-success svg{ width:48px; height:48px; stroke: var(--vino); margin-bottom: var(--space-2); }
  .form-success h3{ color: var(--vino); }
  .form-note{
    text-align:center; font-size:0.85rem; color: var(--gris-suave);
    margin-top: var(--space-3); font-style:italic;
  }
  .form-error{
    display:none;
    background:#fdecec; color:#b3261e; border:1px solid rgba(179,38,30,0.25);
    border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
    font-weight:600; font-size:0.92rem; margin-bottom: var(--space-3);
  }
  .form-error.show{ display:block; }
  .btn[disabled]{ opacity:0.65; cursor:not-allowed; }

  /* Contacto */
  .contacto-grid{
    display:grid; grid-template-columns:1fr; gap: var(--space-3);
    max-width: 1000px; margin: 0 auto var(--space-4);
  }
  .contacto-card{
    background: var(--vino); border:1px solid var(--vino); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-4); display:flex; gap: var(--space-2); align-items:flex-start;
    min-width:0;
  }
  .contacto-card > div{ min-width:0; }
  .contacto-card .servicio-icon{ background: var(--rosa); flex-shrink:0; }
  .contacto-card .servicio-icon svg{ stroke: var(--vino); }
  .contacto-card h4{ font-size:1.05rem; margin-bottom:4px; color:#fff; }
  .contacto-card span{ color: rgba(255,255,255,0.85); }
  .contacto-card a{ color:#fff; font-weight:600; text-decoration:none; overflow-wrap:break-word; word-break:break-word; }
  .contacto-card a:hover{ text-decoration:underline; color:#fff; }
  .contacto-actions{ text-align:center; }
  @media (min-width: 700px){
    .contacto-grid{ grid-template-columns: repeat(3, 1fr); }
  }

  /* Footer */
  footer.site-footer{
    background: #fff; color: var(--gris-suave); padding: var(--space-6) 0 var(--space-3);
    border-top: 3px solid var(--vino);  }
  .footer-grid{
    display:grid; grid-template-columns: 1fr; gap: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--vino);  }
  .footer-brand img{ height:100px; margin-bottom: var(--space-2); }
  .footer-brand p{ color: var(--gris-suave); max-width:320px; }
  .footer-social{ display:flex; gap:12px; margin-top: var(--space-3); }
  .footer-social a{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%;
    border: 1.5px solid var(--vino); color: var(--vino);
    transition: background-color .2s ease, color .2s ease;
  }
  .footer-social a svg{ width:19px; height:19px; }
  .footer-social a:hover{ background: var(--vino); color:#fff; }
  footer h4{ color: var(--vino); font-size:1rem; margin-bottom: var(--space-2); }
  footer .footer-links li{ margin-bottom:8px; }
  footer .footer-links a{ color: var(--gris-suave); text-decoration:none; }
  footer .footer-links a:hover{ color: var(--vino); }
  .footer-contact li{ display:flex; gap:10px; margin-bottom:10px; color: var(--gris-suave); align-items:flex-start; }
  .footer-contact svg{ width:18px; height:18px; stroke: var(--vino); flex-shrink:0; margin-top:2px; }
  .footer-contact a{ color: var(--gris-suave); text-decoration:none; }
  .footer-contact a:hover{ color: var(--vino); }
  .footer-bottom{
    padding-top: var(--space-3);
    text-align:center; font-size:0.85rem; color: var(--gris-suave);
  }
  @media (min-width: 700px){
    .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  }