:root{
  --primary:#2A7FA6; --dark:#1F2F38; --light:#F6FAFD; --accent:#0078B7;
  --ring-outer:0px;              /* sin borde gris externo (pedido) */
  --ring-inner:6px;              /* aro blanco fino interior */
}

/* Reset mínimo y base */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  background:#eef3f7;
  color:#0f172a;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }

/* Contenedor */
.wrap{ max-width:1280px; margin-inline:auto; padding:24px; }
@media (max-width:480px){
  .wrap{
    padding:16px;
  }
}
/* NAV */
.nav{
  background:var(--dark);
  color:#fff;
  border-radius:20px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; color:#fff; }
.brand-accent{ color:var(--primary); font-weight:800; letter-spacing:.02em; }
.menu{ display:flex; gap:18px; }
.menu a{ color:#e5eef3; font-weight:600; }

@media (max-width: 720px){
  .nav{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .menu{
    flex-wrap: wrap;
    gap: 12px;
  }
}
/* CARD: fondo único con arcos */
.card{
  margin-top:18px;
  background: linear-gradient(135deg, var(--light) 0%, #eef2f5 70%);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 28px 70px rgba(2,8,23,.12);
  min-height:auto;
  position:relative;
}
/* Arcos tipo “slice” pegados a la derecha */
.card::before,
.card::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
.card::before{
  right:-20%; top:-16%;
  width:150%; height:150%;
  background: conic-gradient(from 258deg, transparent 0deg 188deg, rgba(42,127,166,0.22) 188deg 360deg);
}
.card::after{
  right:-10%; top:  4%;
  width:110%; height:110%;
  background: conic-gradient(from 258deg, transparent 0deg 188deg, rgba(31,47,56,0.12) 188deg 360deg);
}

/* Layout de dos columnas (hero principal) */
.grid{
  display:grid;
  grid-template-columns: minmax(380px,1fr) minmax(460px,1fr);
  grid-template-areas:'copy visual';
  align-items:center;
  column-gap:28px;
}

/* Izquierda: texto */
#card .copy{
  grid-area: copy;
  position: relative;
  z-index: 2;
}

#servicios .copy{
  grid-area: auto;
}

.contacto-copy{
  grid-area: auto !important;
}
.kicker{
  display:inline-block;
  margin-bottom:10px;
  letter-spacing:.18em;
  font-size:12px;
  text-transform:uppercase;
  color:var(--accent);
}
.title{
  font-size: clamp(30px, 3.2vw, 46px);
  line-height:1.08;
  margin:8px 0 10px;
  font-weight:900;
  color:#1f2937;
}
.desc{ color:#475569; max-width:58ch; }
.badges{ margin-top:14px; }
.chip{
  display:inline-block;
  background:#f1f5f9;
  color:#334155;
  padding:7px 11px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  margin:8px 8px 0 0;
}
.pricing{
  display:flex;
  gap:16px;
  align-items:baseline;
  margin:20px 0;
}
.price{ color:var(--primary); font-weight:900; font-size:24px; }
.extra{ color:#64748b; }
.btns{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:800;
  cursor:pointer;
}
.btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow:0 12px 26px rgba(42,127,166,.25);
}
.btn-secondary{
  background:#eef2f6;
  color:#334155;
  border-color:#e2e8f0;
}

/* Derecha: thumbs (columna) + círculo grande (hero) */
.visual{
  grid-area: visual;
  position:relative;
  min-height: clamp(320px, 45vw, 560px);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:24px;
  z-index:1;
}
.orbit{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.vgrid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 64px minmax(380px,1fr);
  align-items:center;
  justify-items:stretch;
  gap:0;
  max-width:640px;
  width:100%;
  margin-left:auto;
}

.thumbs{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-self:end;
  gap:16px;
  margin-right:-8px;
}
.thumb{
  width:60px;
  aspect-ratio:1/1;
  height:auto;
  border-radius:50%;
  border:0;
  background:transparent;
  box-shadow:0 6px 14px rgba(2,8,23,.10);
  overflow:hidden;
  cursor:pointer;
  transition: transform .2s, box-shadow .2s;
  display:block;
  position:relative;
  --tx:0; --ty:0;
  transform: translate(var(--tx), var(--ty));
}
.thumb:hover{ --ty:-2px; }
.thumb.active{
  box-shadow: 0 0 0 2px #10b981, 0 6px 14px rgba(2,8,23,.10);
}
.timg{
  position:absolute;
  inset:-2%;
  border-radius:50%;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform: translateZ(0);
}
.thumbs .thumb:nth-child(2){ --tx:-10px; }

.plate{
  width:min(480px, 38vw);
  height:min(480px, 38vw);
  border-radius:9999px;
  display:grid;
  place-items:center;
  background:#fff;
  justify-self:end;
  margin-right:0;
  box-shadow:
    inset 0 0 0 var(--ring-inner) #ffffff,
    inset 0 22px 70px rgba(15,23,42,.09),
    0 24px 70px rgba(2,8,23,.12);
  will-change: transform, opacity;
}
.hero{
  width:78%;
  height:78%;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  box-shadow:0 10px 30px rgba(2,8,23,.16);
}

/* Animaciones */
.slide-enter{ transform:translateX(100%) scale(.92); opacity:0; }
.slide-enter-active{
  transform:translateX(0) scale(1);
  opacity:1;
  transition: all .58s cubic-bezier(.22,.61,.36,1);
}
.flip-out{ transform:rotateY(0); opacity:1; }
.flip-out-active{
  transform:rotateY(90deg);
  opacity:0;
  transition: all .26s cubic-bezier(.4,.0,.2,1);
  transform-style:preserve-3d;
}
.flip-in{ transform:rotateY(-90deg); opacity:0; }
.flip-in-active{
  transform:rotateY(0);
  opacity:1;
  transition: all .26s cubic-bezier(.4,.0,.2,1);
  transform-style:preserve-3d;
}
.plate-enter{ transform: translateX(100%) scale(.96); opacity:0; }
.plate-enter-active{
  transform: translateX(0) scale(1);
  opacity:1;
  transition: all .58s cubic-bezier(.22,.61,.36,1);
}

/* Footer */
.site-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 6px;
  color:#475569;
}
.site-footer a{ color:#334155; }
@media (max-width: 720px){
  .site-footer{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* --- Logo/escudo en el header --- */
.brand svg{
  width: 54px;
  height: 54px;
}
.brand svg image{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(1.12);
}

/* Modal */
.modal.is-meet .row-meet { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal.is-meet .row-quote { display: none !important; }
.modal.is-quote .row-meet { display: none !important; }
.modal.is-quote .row-quote { display: block !important; }

.modal.hidden{ display:none; }
.modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
}
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(2,8,23,.45);
  backdrop-filter:blur(2px);
}
.modal-dialog{
  position:relative; z-index:1;
  width:min(560px,92vw);
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 70px rgba(2,8,23,.25);
  padding:20px 20px 16px;
  animation:modalIn .22s ease-out;
}
#quote{ display:none !important; }

/* Scroll coherente por tarjetas (stack general) */
.stack { scroll-snap-type: y proximity; }
.card  { scroll-snap-align: start; min-height: auto; }

/* Tarjetas internas reutilizables */
.cards-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}
.svc{
  background:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow:0 8px 24px rgba(2,8,23,.06);
  border:1px solid #eef2f6;
  display:grid;
  gap:8px;
}

.form-min { display:grid; gap:12px; max-width:460px; }
.form-min .f-row { display:grid; gap:6px; }
.btn:hover { transform:scale(1.04); box-shadow:0 6px 18px rgba(42,127,166,.25); }


/* ====== Servicios: base tarjetas texto (reutilizable) ====== */

.svc-col-header{
  background:#fff;
  border:1px solid #eef2f6;
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 8px 24px rgba(2,8,23,.06);
}
.svc-col-header h3{
  margin:0 0 4px;
  font-weight:800;
  color:#0f172a;
}
.svc-col-header .hint{
  margin:0;
  color:#64748b;
  font-size:.95rem;
}

.svc-card{
  background:#fff;
  border:1px solid #eef2f6;
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 24px rgba(2,8,23,.06);
  display:grid;
  gap:8px;
  outline:none;
  overflow:hidden;
  min-height:120px;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    border-color .22s ease;
  will-change: transform;
}
.svc-card h4{
  margin:0;
  font-weight:800;
  font-size:1.1rem;
  color:#0f172a;
}
.svc-card .brief{
  margin:0;
  color:#475569;
  line-height:1.5;
  font-size:.97rem;
}
.svc-card .more{
  margin-top:6px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .25s ease, opacity .25s ease;
}
.svc-card .more ul{
  margin:6px 0 0 18px;
  color:#64748b;
}
.svc-card .svc-actions{
  margin-top:8px;
  display:grid;
  justify-content:start;
}

/* Accesibilidad de foco */
.svc-card:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:3px;
  border-radius:18px;
}

/* Microinteracción botones dentro de la card */
.svc-card .btn{ transition: transform .15s ease, box-shadow .2s ease; }
.svc-card .btn:hover{ transform: translateY(-1px); }

/* Variante solo texto */
.svc-card--text{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:8px;
}
.svc-card--text .price-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#f1f5f9;
  color:#0f172a;
  border:1px solid #e2e8f0;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
}
.svc-card--text .price-tag .num{
  color: var(--primary);
  font-weight:900;
}
.svc-card--text .more{ color:#475569; }
.svc-card--text .more ul{ margin:10px 0 0 18px; }

/* ============================================================
   CARRUSEL DE SERVICIOS (SECCIÓN #servicios) – FIX DEFINITIVO
   ============================================================ */

/* El grid de esta sección es UNA columna (texto + carrusel debajo) */
#servicios .grid{
  grid-template-columns: 1fr !important;
  grid-template-areas: 'copy' !important;
}

/* Alineamos el contenido de la sección servicios */
#servicios .copy{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
}
.svc-shell{
  position:relative;
  padding:0 56px;
}
@media (max-width: 720px){
  .svc-shell{
    padding: 0 40px;
  }

  .svc-nav{
    width: 36px;
    height: 36px;
    font-size: 24px;
  }
}
@media (max-width: 480px){
  .svc-shell{
    padding: 0 30px;
  }

  .svc-nav{
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
} 
/* Contenedor del carrusel */
.svc-carousel{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
  border-radius:16px;
}

.svc-track{
  display:flex;
  width:100%;
}

/* Cada slide ocupa SIEMPRE el 100% del ancho visible */
.svc-slide{
  flex:0 0 100%;
  min-width:100%;
  width:100%;
  padding:16px 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
/* Fila interna de cada slide: GRID de 3 columnas en escritorio */
#servicios .svc-row{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:stretch;
  width:100%;
  min-width:0;
}

/* Cada tarjeta llena su celda y NO tiene límites de ancho que rompan el grid */
#servicios .svc-row .svc-card{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  flex:none !important;
}
#servicios .svc-row > *{
  min-width:0 !important;
}
/* Detalle oculto por defecto */
#servicios .svc-row .svc-card .more{
  max-height:0;
  opacity:0;
  transition:max-height .25s ease, opacity .25s ease;
}

/* Cuando hay interacción en la fila, SOLO la activa muestra el detalle */
#servicios .svc-row.is-hovering .svc-card.is-active .more{
  max-height:480px;
  opacity:1;
}

/* Un poquito de énfasis visual en la activa */
#servicios .svc-row.is-hovering .svc-card.is-active{
  transform:scale(1.01);
  box-shadow:0 14px 36px rgba(2,8,23,.12);
}

/* Dots del carrusel */
.svc-dots{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  padding-top:6px;
}
.svc-dots .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid #94a3b8;
  background:#fff;
  opacity:.6;
  cursor:pointer;
}
.svc-dots .dot.is-active{
  background:var(--primary);
  border-color:var(--primary);
  opacity:1;
}

/* Flechas de navegación */
.svc-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:rgba(255,255,255,0.9);
  box-shadow:0 8px 24px rgba(2,8,23,.12);
  display:grid;
  place-items:center;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  z-index:20;
  transition:all .25s ease;
}
.svc-nav.prev{ left:0; }
.svc-nav.next{ right:0; }


.svc-nav:hover,
.svc-nav:focus-visible{
  background:#fff;
  box-shadow:0 8px 24px rgba(2,8,23,.18);
  transform:translateY(-50%) scale(1.08);
}
.svc-nav.prev:hover,
.svc-nav.prev:focus-visible{
  transform:translateY(-50%) translateX(8px) scale(1.08);
}
.svc-nav.next:hover,
.svc-nav.next:focus-visible{
  transform:translateY(-50%) translateX(-8px) scale(1.08);
}

/* RESPONSIVE: en tablet/móvil, las 3 tarjetas se apilan */
@media (max-width:900px){
  #servicios .svc-row{
    grid-template-columns:1fr !important;
  }
}

/* En móvil mostramos siempre el detalle (como ya hacías) */
@media (max-width: 720px){
  .svc-card{
    padding: 14px;
  }

  .svc-card h4{
    font-size: 1rem;
  }

  .svc-card .brief{
    font-size: .95rem;
  }

  .svc-card--text .price-tag{
    font-size: 13px;
    padding: 6px 9px;
  }
}

/* === Contacto full-width (lo dejamos tal cual lo tenías) === */

#contacto {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding-block: clamp(40px, 10vh, 70px);
  background: #ffffff;  /* Fondo sólido en blanco */
  border-radius: 28px;
  box-shadow: 0 28px 70px rgba(2,8,23,.12);
  margin-top: 18px;
  overflow: hidden;
}

.contacto-inner{
  position: relative;
  z-index: 1;
  width: min(1180px, 95%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  min-height: 380px;
}

.contacto-media{
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 280px;
  border-radius: 28px;
  padding: 32px;
  background: #ffffff;
  box-shadow: 0 20px 55px rgba(15,23,42,.10);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.contacto-copy{
  position: relative;
  z-index: 1;
  grid-area: auto !important;
  padding: 0 !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:center;
}

.contacto-box h3{
  margin: 0 0 14px;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900;
  color: #0f172a;
}

.contacto-box p,
.contacto-copy .desc{
  color: #334155;
}
.c-actions{
  margin-top: 18px;
  display: flex;
  gap: 14px;
}

.c-meta li + li{
  margin-top: 6px;
}

@media (max-width: 900px){
  .contacto-inner{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .contacto-media{
    min-height: 220px;
    height: auto;
  }

  .contacto-copy{
    padding-top: 8px !important;
  }
}

/* Respeto por usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .svc-card, .svc-card .more, .svc-card .btn{
    transition: none !important;
  }
}

/* Responsive general del hero */
@media (max-width:1040px){
  .grid{ grid-template-columns: 1fr 1fr; column-gap:24px; }
  .plate{ width:min(440px, 42vw); height:min(440px, 42vw); }
    .vgrid{
    grid-template-columns: 56px minmax(300px,1fr);
    max-width: 520px;
  }

  .thumb{
    width: 52px;
  }
}
@media (max-width:1040px){
  .grid{ grid-template-columns: 1fr 1fr; column-gap:24px; }
  .plate{ width:min(440px, 42vw); height:min(440px, 42vw); }
  .vgrid{
    grid-template-columns: 56px minmax(300px,1fr);
    max-width: 520px;
  }
  .thumb{ width: 52px; }
}

@media (max-width:900px){
  .plate{ width:min(380px, 44vw); height:min(380px, 44vw); }
  .cards-3 { grid-template-columns: 1fr; }
}
@media (max-width:720px){
  .brand svg{ width: 44px; height: 44px; }
  .grid{ grid-template-columns: 1fr; grid-template-areas:'copy' 'visual'; }
  .visual{ justify-content:center; }
  .vgrid{
    margin-left:0;
    grid-template-columns: 56px minmax(240px,1fr);
    max-width: 100%;
  }
  .plate{ width:min(340px, 72vw); height:min(340px, 72vw); }
}
@media (max-width:540px){
  .modal.is-meet .row-meet { grid-template-columns: 1fr !important; }
}

@keyframes modalIn{
  from{transform:translateY(8px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.modal-title{
  margin:6px 8px 10px;
  font-size:clamp(20px,2.2vw,24px);
  font-weight:800;
  color:#1f2937;
}
.modal-close{
  position:absolute;
  right:10px; top:8px;
  width:36px; height:36px;
  border-radius:10px;
  border:1px solid #e2e8f0;
  background:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.modal-form{ padding:6px 8px; }
.f-row{ display:block; margin-bottom:12px; }
.f-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.f-row label{
  display:block;
  font-weight:700;
  color:#334155;
  margin:4px 0 6px;
}
.f-row input,
.f-row textarea{
  width:100%;
  border-radius:10px;
  border:1px solid #e2e8f0;
  padding:10px 12px;
  font:inherit;
  color:#0f172a;
  background:#fff;
}
.f-row input:focus,
.f-row textarea:focus{
  outline:2px solid #2A7FA6;
  outline-offset:1px;
}
.f-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:6px;
}
@media (max-width:540px){
  .f-row.two{ grid-template-columns:1fr; }
}
/* =========================
   AJUSTES MÓVIL FINOS
   ========================= */

@media (max-width: 720px){
  .wrap{
    padding: 16px;
  }

  .card{
    border-radius: 24px;
  }

  .kicker{
    font-size: 11px;
    letter-spacing: .14em;
    line-height: 1.35;
    word-break: break-word;
  }

  .title{
    font-size: clamp(24px, 8vw, 38px);
    line-height: 1.08;
  }

  .desc{
    font-size: 1rem;
    line-height: 1.45;
  }

  /* NAV */
  .nav{
    padding: 16px;
    border-radius: 24px;
  }

  .brand{
    gap: 12px;
  }

  .brand svg{
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
  }

  .menu{
    width: 100%;
  }

  /* HERO */
  #card .copy{
    padding: 20px 18px 8px !important;
  }

  .visual{
    min-height: 320px;
    padding: 8px 14px 20px;
  }

  .vgrid{
    grid-template-columns: 48px minmax(0,1fr);
    max-width: 100%;
    width: 100%;
    gap: 8px;
  }

  .thumb{
    width: 42px;
  }

  .plate{
    width: min(300px, 78vw);
    height: min(300px, 78vw);
  }

  .pricing{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .price{
    font-size: 22px;
  }

  .btns{
    width: 100%;
  }

  .btn{
    width: 100%;
    min-height: 48px;
  }

  /* SERVICIOS */
  #servicios .copy{
    padding: 20px 16px !important;
  }

  #servicios .svc-col-header{
    padding: 14px;
  }

  #servicios .svc-slide{
    padding: 8px 0;
  }

  #servicios .svc-row{
    gap: 10px !important;
  }

  .svc-card{
    border-radius: 18px;
    min-height: auto;
  }

  .svc-card h4{
    font-size: 1rem;
    line-height: 1.2;
  }

  .svc-card .brief{
    font-size: .95rem;
    line-height: 1.45;
  }

  .svc-card .svc-actions{
    gap: 8px;
  }

  .svc-card .btn{
    width: 100%;
  }

  /* CONTACTO */
  #contacto{
    padding-block: 28px;
    border-radius: 24px;
  }

  .contacto-inner{
    width: min(100%, 94%);
    gap: 18px;
  }

  .contacto-media{
    min-height: 180px;
    padding: 24px;
    border-radius: 24px;
  }

  .contacto-box h3{
    font-size: clamp(22px, 7vw, 32px);
  }

  .contacto-box p{
    font-size: 1rem;
  }

  .contacto-copy{
    padding: 4px 2px 0 !important;
  }

  .contacto-copy .title{
    font-size: clamp(22px, 8vw, 38px);
    line-height: 1.08;
  }

  .contacto-copy .desc{
    font-size: 1rem;
    line-height: 1.45;
  }

  .c-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .c-actions .btn{
    width: 100%;
  }

  .c-meta{
    padding-left: 18px;
    margin: 14px 0 0;
  }
}

@media (max-width: 480px){
  .wrap{
    padding: 12px;
  }

  .nav{
    padding: 14px;
  }

  .kicker{
    font-size: 10px;
    letter-spacing: .12em;
  }

  .title{
    font-size: clamp(22px, 9vw, 32px);
  }

  #card .copy{
    padding: 18px 14px 6px !important;
  }

  .visual{
    min-height: 280px;
    padding: 6px 10px 16px;
  }

  .vgrid{
    grid-template-columns: 42px minmax(0,1fr);
  }

  .thumb{
    width: 36px;
  }

  .plate{
    width: min(260px, 76vw);
    height: min(260px, 76vw);
  }

  .chip{
    font-size: 12px;
    padding: 6px 10px;
  }

  .svc-shell{
    padding: 0 26px;
  }

  .svc-nav{
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .contacto-media{
    min-height: 160px;
    padding: 20px;
  }

  .contacto-copy .title{
    font-size: clamp(20px, 9vw, 30px);
  }
}
/* =========================
   RESTAURAR DESKTOP
   ========================= */
@media (min-width: 861px){
  .grid{
    grid-template-columns: minmax(380px,1fr) minmax(460px,1fr);
    grid-template-areas: 'copy visual';
    column-gap: 28px;
    row-gap: 0;
  }

  #card .copy{
    padding: clamp(24px, 3vw, 42px) !important;
  }

  .visual{
    min-height: clamp(420px, 38vw, 560px);
    justify-content: flex-end;
    padding: 24px;
  }

  .vgrid{
    grid-template-columns: 64px minmax(380px,1fr);
    max-width: 640px;
    width: 100%;
    margin-left: auto;
    gap: 0;
  }

  .thumb{
    width: 60px;
  }

  .plate{
    width: min(480px, 38vw);
    height: min(480px, 38vw);
  }

  #servicios .copy{
    padding: clamp(24px, 3vw, 42px) !important;
  }

  .svc-shell{
    padding: 0 56px;
  }

  .svc-nav{
    width: 42px;
    height: 42px;
    font-size: 28px;
  }

  .contacto-inner{
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    min-height: 380px;
    gap: clamp(24px, 4vw, 56px);
  }

  .contacto-media{
    min-height: 280px;
  }
}

/* Evita que el kicker se vea cortado en desktop/móvil */
.kicker{
  max-width: 100%;
  overflow-wrap: anywhere;
  padding-left: 2px;
  position: relative;
  z-index: 2;
}