/* ==========================================================================
   EnBlanco · #servicios · Bento jerárquico (Task 4)
   Sección clara (hueso) tras el hero oscuro. La tarjeta de la página web
   domina; cada tarjeta tiene un detalle vivo hecho de su propio servicio
   (página que cambia de computadora a celular, perfil de Google, conversación
   con el asistente, publicaciones). Lo que incluye cada servicio se ve siempre:
   sin hover en teléfono y con teclado en escritorio.
   En reposo las tarjetas no tienen sombra (paso de tono blanco sobre hueso);
   la sombra responde a hover (puntero fino) o a foco de teclado.
   ========================================================================== */

/* ---- Cabecera de sección: titular a la izquierda, entradilla al pie derecho -- */
.sv-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-3);
  align-items: end;
  margin-bottom: clamp(var(--s-5), 5vw, var(--s-7));
}
.sv-head__title {
  grid-column: 1 / span 8;
  max-width: 15ch;
}
.sv-head__lead {
  grid-column: 9 / -1;
  max-width: 34ch;
  font-size: var(--fs-4);
  line-height: 1.35;
  color: var(--text);
}

/* ---- Grid Bento ------------------------------------------------------------ */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  grid-template-areas:
    "web web web web web web web goo goo goo goo goo"
    "web web web web web web web pre pre pre pre pre"
    "ai  ai  ai  ai  ai  ai  ai  ai  red red red red";
}
.sv-card--web    { grid-area: web; }
.sv-card--google { grid-area: goo; }
.sv-card--price  { grid-area: pre; }
.sv-card--ai     { grid-area: ai; }
.sv-card--redes  { grid-area: red; }

/* ---- Tarjeta --------------------------------------------------------------- */
.sv-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  transition:
    transform var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}
.sv-card__text { display: grid; gap: var(--s-2); align-content: start; }

/* La tipografía es la protagonista de cada tarjeta */
.sv-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.75rem);   /* 30 → 44 */
  line-height: 1;
  letter-spacing: var(--ls-display);
  max-width: 14ch;
}
.sv-card__title--xl {
  font-size: clamp(3.25rem, 1.6rem + 6vw, 7rem);         /* 52 → 112 */
  line-height: .9;
  letter-spacing: -0.045em;
}
.sv-card__body {
  max-width: 46ch;
  color: var(--text-soft);
  font-size: var(--fs-3);
  line-height: 1.55;
}
.sv-card__body strong { color: var(--text); font-weight: var(--fw-strong); }

/* Qué incluye: siempre visible */
.sv-includes { display: flex; flex-wrap: wrap; gap: var(--s-1); font-size: var(--fs-2); line-height: 1.35; }
.sv-includes--chips li {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--c-hueso);
  font-weight: var(--fw-medium);
}
.sv-includes--checks { display: grid; gap: 10px; }
.sv-includes--checks li,
.sv-includes--dots li {
  position: relative;
  padding-left: 30px;
  font-weight: var(--fw-medium);
}
.sv-includes--checks li::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-terracota)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 14px no-repeat;
  transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms + 200ms);
}
.sv-includes--checks li:nth-child(2) { --i: 1; }
.sv-includes--checks li:nth-child(3) { --i: 2; }
/* JS arma la lista; al entrar en pantalla las marcas aparecen una a una */
.sv-includes--checks.is-armed li::before { transform: scale(.6); opacity: 0; }
.sv-includes--checks.is-armed.is-on li::before { transform: none; opacity: 1; }

.sv-includes--dots { display: grid; gap: 8px; }
.sv-includes--dots li { padding-left: 22px; }
.sv-includes--dots li::before {
  content: "";
  position: absolute;
  left: 2px; top: .5em;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--c-terracota);
}

/* Etiqueta «Demostración» de cada mockup */
.sv-tag { position: absolute; top: 10px; left: 10px; z-index: 3; }

/* Hover (solo puntero fino) y foco de teclado: la tarjeta se eleva */
@media (hover: hover) and (pointer: fine) {
  .sv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
}
.sv-card:has(:focus-visible) { transform: translateY(-4px); box-shadow: var(--shadow-2); }

/* ---- Conmutador segmentado (computadora / celular · canal) ----------------- */
.sv-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  border-radius: var(--r-pill);
  background: var(--c-hueso);
}
.sv-seg__opt {
  min-height: var(--tap-min);
  padding: 0 18px;
  border-radius: var(--r-pill);
  color: var(--c-tinta);
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
  touch-action: manipulation;
  transition:
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-press) var(--ease-out);
}
.sv-seg__opt[aria-pressed="true"] { background: var(--c-tinta); color: var(--c-blanco); }
.sv-seg__opt:active { transform: scale(var(--press-scale)); }
.sv-seg__opt abbr { text-decoration: none; }
.sv-seg--dark { background: var(--c-tinta-2); }
.sv-seg--dark .sv-seg__opt { color: var(--c-arena); }
.sv-seg--dark .sv-seg__opt[aria-pressed="true"] { background: var(--c-arena); color: var(--c-tinta); }
@media (hover: hover) and (pointer: fine) {
  .sv-seg__opt:not([aria-pressed="true"]):hover { background: var(--c-blanco); }
  .sv-seg--dark .sv-seg__opt:not([aria-pressed="true"]):hover { background: var(--c-tinta); color: var(--c-blanco); }
}

/* =============================================================================
   1 · Página web (domina)
   ========================================================================== */
.sv-card--web { gap: var(--s-4); }
.sv-web__text { gap: var(--s-3); }
.sv-web__demo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 0;
}

.sv-stage {
  position: relative;
  flex: 1;
  min-height: 380px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-hueso);
}

.sv-frame {
  position: absolute;
  overflow: hidden;
  background: var(--c-blanco);
  color: var(--c-tinta);
  font-size: var(--fs-1);
  line-height: 1.35;
  transition:
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out),
    visibility 0s linear var(--dur-ui);
}
.sv-frame--desktop {
  inset: 48px 24px -24px 24px;           /* sale por abajo: es una página que sigue */
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.sv-frame--phone {
  top: 44px;
  left: 50%;
  width: 232px;
  height: 460px;
  margin-left: -116px;
  border-radius: 30px;
  background: var(--c-tinta);
  padding: 10px;
}

/* estado: solo el marco elegido se ve; el otro queda oculto y fuera del flujo */
.sv-stage[data-device="desktop"] .sv-frame--phone,
.sv-stage[data-device="phone"] .sv-frame--desktop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.96);
}
.sv-stage[data-device="desktop"] .sv-frame--desktop,
.sv-stage[data-device="phone"] .sv-frame--phone {
  transition-delay: 0s;
}
.sv-stage[data-instant] .sv-frame { transition: none; }

/* Navegador */
.sv-browser__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--c-arena);
}
.sv-browser__dots { display: inline-flex; gap: 6px; }
.sv-browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-blanco); }
.sv-browser__dots i:first-child { background: var(--c-terracota); }
.sv-browser__url {
  flex: 1;
  max-width: 260px;
  margin-inline: auto;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: var(--c-blanco);
  color: var(--c-grafito);
  text-align: center;
}

/* Página de ejemplo */
.sv-site { padding: 0 20px 20px; }
.sv-site__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}
.sv-site__logo { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 15px; white-space: nowrap; }
.sv-site__links { display: flex; gap: 16px; margin-left: auto; color: var(--c-grafito); }
.sv-site__lang { display: inline-flex; padding: 2px; border-radius: var(--r-pill); background: var(--c-hueso); }
.sv-site__lang b { padding: 1px 8px; border-radius: var(--r-pill); font-weight: var(--fw-strong); color: var(--c-grafito); }
.sv-site__lang b:first-child { background: var(--c-tinta); color: var(--c-blanco); }

.sv-site__hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 0 16px;
}
.sv-site__kicker { color: var(--c-grafito); font-weight: var(--fw-medium); }
.sv-site__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(22px, 1rem + 1.1vw, 32px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.sv-site__btn {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--c-terracota);
  color: var(--c-blanco);
  font-weight: var(--fw-strong);
}
/* foto principal de la página de ejemplo */
.sv-site__pic {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--c-arena) 50% 60% / cover no-repeat url("../assets/fotos/cocina-900.webp");
}
.sv-site__pic i { visibility: hidden; }
.sv-site__pic i { position: absolute; display: block; }
.sv-site__pic i:nth-child(1) { left: 14%; right: 14%; bottom: 0; height: 56%; background: var(--c-hueso); }
.sv-site__pic i:nth-child(2) {
  left: 8%; right: 8%; bottom: 54%; height: 30%;
  background: var(--c-tinta);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.sv-site__pic i:nth-child(3) { left: 42%; width: 16%; bottom: 0; height: 30%; background: var(--c-terracota); border-radius: 3px 3px 0 0; }

.sv-site__tiles { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.sv-site__tiles span {
  padding: 10px;
  border-radius: var(--r-xs);
  background: var(--c-hueso);
  font-weight: var(--fw-strong);
}
.sv-site__tiles span:first-child { background: var(--c-tinta); color: var(--c-blanco); }
.sv-site__sub { margin-top: 16px; font-family: var(--font-display); font-weight: var(--fw-title); font-size: 15px; }
.sv-site__gallery { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 8px; margin-top: 8px; }
.sv-site__gallery i { display: block; height: 72px; border-radius: var(--r-xs); background: var(--c-arena) center / cover no-repeat url("../assets/fotos/terraza-420.webp"); }
.sv-site__gallery i:nth-child(2) { background-image: url("../assets/fotos/bano-420.webp"); }
.sv-site__gallery i:nth-child(3) { background-image: url("../assets/fotos/sala-420.webp"); }
.sv-site__gallery i:nth-child(4) { background-image: url("../assets/fotos/cocina-420.webp"); background-position: 30% 70%; }
.sv-site--phone .sv-site__gallery i:nth-child(1) { background-image: url("../assets/fotos/cocina-420.webp"); }
.sv-site--phone .sv-site__gallery i:nth-child(2) { background-image: url("../assets/fotos/terraza-420.webp"); }

.sv-site__contact {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--c-tinta);
  color: var(--c-blanco);
}
.sv-site__contact span { margin-right: auto; font-family: var(--font-display); font-weight: var(--fw-title); font-size: 15px; }
.sv-site__contact b { padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-blanco); color: var(--c-tinta); font-weight: var(--fw-strong); }
.sv-site__contact b:first-of-type { background: var(--c-terracota); color: var(--c-blanco); }

/* Celular */
.sv-phone__notch { width: 70px; height: 18px; margin: 0 auto 6px; border-radius: var(--r-pill); background: var(--c-tinta-2); }
.sv-site--phone {
  height: calc(100% - 24px);
  overflow: hidden;
  padding: 0 14px 14px;
  border-radius: 22px;
  background: var(--c-blanco);
}
.sv-site--phone .sv-site__nav { padding: 12px 0 14px; }
.sv-site__burger { display: grid; gap: 4px; margin-left: auto; }
.sv-site__burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--c-tinta); }
.sv-site--phone .sv-site__title { font-size: 24px; }
.sv-site--phone .sv-site__tiles { grid-template-columns: 1fr 1fr; margin-top: 14px; }
.sv-site--phone .sv-site__tiles span:last-child { grid-column: 1 / -1; }
.sv-site--phone .sv-site__gallery { grid-template-columns: 1.4fr 1fr; }
.sv-site--phone .sv-site__gallery i { height: 64px; }
.sv-phone__wa {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  padding: 9px 0;
  border-radius: var(--r-pill);
  background: var(--c-tinta);
  color: var(--c-blanco);
  font-weight: var(--fw-strong);
  text-align: center;
}

/* =============================================================================
   2 · Perfil de Google
   ========================================================================== */
.sv-gp { position: relative; margin: 0; padding: 48px 16px 16px; border-radius: var(--r-md); background: var(--c-hueso); }
.sv-gp__ui { display: grid; gap: 10px; color: var(--c-tinta); font-size: var(--fs-1); line-height: 1.35; }
.sv-gp__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: var(--c-blanco);
  color: var(--c-grafito);
}
.sv-gp__search svg { flex: none; }
.sv-gp__map {
  position: relative;
  height: 92px;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--c-arena);
}
.sv-gp__road { position: absolute; display: block; background: var(--c-blanco); }
.sv-gp__road--h { left: 0; right: 0; top: 56%; height: 10px; transform: rotate(-6deg); transform-origin: left; }
.sv-gp__road--v { top: 0; bottom: 0; left: 30%; width: 8px; }
.sv-gp__block { position: absolute; display: block; right: 10%; top: 12%; width: 28%; height: 32%; border-radius: 4px; background: var(--c-hueso); }
.sv-gp__pin {
  position: absolute;
  left: 52%; top: 18%;
  width: 26px; height: 26px;
  border-radius: 50% 50% 50% 0;
  background: var(--c-terracota);
  transform: rotate(-45deg);
}
.sv-gp__pin::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--c-blanco); }
.sv-gp__card { padding: 12px 14px; border-radius: var(--r-sm); background: var(--c-blanco); }
.sv-gp__name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 18px; letter-spacing: -0.01em; }
.sv-gp__meta { color: var(--c-grafito); }
.sv-gp__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sv-gp__btns span { padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-hueso); font-weight: var(--fw-strong); }
.sv-gp__btns span:first-child { background: var(--c-tinta); color: var(--c-blanco); }

/* =============================================================================
   3 · Precio de entrada (toda la tarjeta lleva a #precios)
   ========================================================================== */
.sv-card--price {
  justify-content: space-between;
  gap: var(--s-3);
  background: var(--c-arena);
  color: var(--c-tinta);
  cursor: pointer;
}
.sv-card--price .sv-card__body { color: var(--c-tinta); }
.sv-price__big {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem);   /* 44 → 76 */
  line-height: .95;
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
}
.sv-price__from {
  display: block;
  font-size: var(--fs-4);
  letter-spacing: var(--ls-title);
}
.sv-link {
  display: inline-flex;
  align-self: flex-start;
  justify-self: start;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-min);
  color: var(--text);
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
  text-decoration: none;
  touch-action: manipulation;
  transition: transform var(--dur-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sv-link:hover .sv-arrow { transform: translateX(4px); }
  .sv-link:hover span { text-decoration: underline; text-decoration-thickness: 2px; }
}
.sv-link:not(.sv-price__link):active { transform: scale(var(--press-scale)); }
.sv-price__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* toda la tarjeta es el enlace */
.sv-price__link:focus-visible { outline: none; }
.sv-card--price:has(.sv-price__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.sv-arrow { flex: none; transition: transform var(--dur-ui) var(--ease-out); }
.sv-card--price:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
@media (hover: hover) and (pointer: fine) {
  .sv-card--price:hover .sv-arrow { transform: translateX(4px); }
}

/* =============================================================================
   4 · Asistente con IA (oscura)
   ========================================================================== */
.sv-card--ai {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s-5);
  align-items: start;
  background: var(--c-tinta);
}
.sv-card--ai .sv-card__body { color: var(--c-arena); }
.sv-card--ai .sv-card__body strong { color: var(--c-blanco); }
.sv-card--ai .sv-includes--dots { margin-top: var(--s-1); }
.sv-chip {
  justify-self: start;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--c-arena);
  color: var(--c-tinta);
  font-size: var(--fs-1);
  font-weight: var(--fw-strong);
}
.sv-ai__demo { display: grid; gap: var(--s-2); min-width: 0; }

.sv-chat { position: relative; margin: 0; }
.sv-chat .sv-tag { top: auto; bottom: 10px; left: auto; right: 10px; background: rgba(17, 17, 17, .72); }
.sv-chat__ui {
  overflow: hidden;
  border-radius: 22px;
  background: var(--c-hueso);
  color: var(--c-tinta);
  font-size: 14px;
  line-height: 1.4;
}
.sv-chat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--c-tinta-2);
  color: var(--c-blanco);
}
.sv-chat__who b { display: block; font-weight: var(--fw-strong); }
.sv-chat__who small { display: block; color: var(--c-arena); font-size: var(--fs-1); }
.sv-chat__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-terracota);
  color: var(--c-blanco);
  font-size: var(--fs-1);
  font-weight: var(--fw-strong);
}
.sv-chat__body { display: grid; gap: 8px; padding: 14px 14px 48px; }
.sv-msg {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 16px;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.sv-msg--in  { justify-self: start; background: var(--c-blanco); border-bottom-left-radius: 4px; }
.sv-msg--out { justify-self: end;   background: var(--c-arena);  border-bottom-right-radius: 4px; }
.sv-msg--done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: center;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--c-tinta);
  color: var(--c-blanco);
  font-size: var(--fs-1);
  font-weight: var(--fw-strong);
}
.sv-msg--done svg { flex: none; color: var(--c-arena); }
/* Reproducción (js/servicios.js): los mensajes guardan su sitio, no hay saltos */
.sv-chat.is-armed .sv-msg { opacity: 0; transform: translateY(8px); }
.sv-chat.is-armed .sv-msg.is-shown { opacity: 1; transform: none; }
.sv-chat__state { transition: opacity var(--dur-fast) ease; }

/* =============================================================================
   5 · Redes sociales (complemento)
   ========================================================================== */
.sv-card--redes { justify-content: space-between; }
/* Redes: las tres redes que se trabajan, como fichas */
.sv-nets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sv-net {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  aspect-ratio: 4 / 5;
  padding: 10px 6px;
  border-radius: var(--r-sm);
  background: var(--c-tinta);
  color: var(--c-blanco);
  transition: transform var(--dur-ui) var(--ease-out);
}
.sv-net--fb { background: var(--c-terracota); }
.sv-net b { font-size: var(--fs-1); font-weight: var(--fw-strong); }
@media (hover: hover) and (pointer: fine) {
  .sv-card--redes:hover .sv-net--ig { transform: rotate(-3deg) translateY(-2px); }
  .sv-card--redes:hover .sv-net--tt { transform: rotate(3deg) translateY(-2px); }
}

/* =============================================================================
   Tableta (768–1079): web a todo el ancho; luego dos columnas
   ========================================================================== */
@media (max-width: 1079px) {
  .sv-head__title { grid-column: 1 / -1; }
  .sv-head__lead { grid-column: 1 / span 9; }
  .sv-grid {
    grid-template-areas:
      "web web web web web web web web web web web web"
      "goo goo goo goo goo goo ai  ai  ai  ai  ai  ai"
      "pre pre pre pre pre pre ai  ai  ai  ai  ai  ai"
      "red red red red red red red red red red red red";
  }
  .sv-web__text {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: var(--s-4);
    align-items: end;
  }
  .sv-web__text .sv-card__title--xl { grid-row: 1 / span 2; align-self: start; }
  .sv-stage { flex: none; height: 440px; }
  .sv-card--ai { grid-template-columns: 1fr; gap: var(--s-4); align-content: start; }
  .sv-seg--dark { width: 100%; }
  .sv-seg--dark .sv-seg__opt { flex: 1; padding: 0 10px; }
  .sv-card--redes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}

/* =============================================================================
   Teléfono (< 768): otra composición. Una columna; el celular manda en la
   demostración de la página; el orden visual es el del documento.
   ========================================================================== */
@media (max-width: 767px) {
  .sv-head { grid-template-columns: 1fr; }
  .sv-head__title, .sv-head__lead { grid-column: 1; }
  .sv-head__lead { font-size: var(--fs-3); line-height: 1.5; color: var(--text-soft); }

  .sv-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "web" "goo" "pre" "ai" "red";
    gap: var(--s-2);
  }
  .sv-card { gap: var(--s-3); }
  .sv-card--web { display: flex; }
  .sv-web__text { grid-template-columns: 1fr; }
  .sv-web__text .sv-card__title--xl { grid-row: auto; }
  .sv-card__title { font-size: 1.75rem; }
  .sv-includes--chips li { padding: 6px 12px; }
  .sv-seg { width: 100%; }
  .sv-seg__opt { flex: 1; padding: 0 10px; }
  .sv-stage { flex: none; height: 384px; min-height: 0; }
  .sv-frame--desktop { inset: 48px 12px -24px 12px; }
  .sv-site { padding: 0 14px 14px; }
  .sv-site__links { display: none; }
  .sv-site__lang { margin-left: auto; }
  .sv-site__hero { grid-template-columns: 1fr; }
  .sv-site__pic { display: none; }
  .sv-site__tiles { grid-template-columns: 1fr 1fr; }
  .sv-site__tiles span:last-child { grid-column: 1 / -1; }
  .sv-frame--phone { top: 42px; width: 200px; height: 364px; margin-left: -100px; border-radius: 26px; padding: 8px; }

  .sv-gp { padding-top: 44px; }
  .sv-gp__map { height: 64px; }

  .sv-card--price { gap: var(--s-2); }
  .sv-price__big { font-size: 2.5rem; }

  .sv-card--ai { gap: var(--s-2); padding-inline: var(--s-2); }
  .sv-card--ai .sv-card__text { padding-inline: var(--s-1); }
  .sv-chat__body { gap: 5px; padding: 12px 12px 40px; }
  .sv-msg { padding: 8px 11px; }

  /* Redes: las tres fichas en una fila más baja */
  .sv-card--redes { display: flex; gap: var(--s-3); }
  .sv-nets { align-self: stretch; gap: 6px; }
  .sv-net { aspect-ratio: 1; gap: 6px; }
}

/* ---- Movimiento reducido: sin desplazamientos; fundidos cortos sí ---------- */
@media (prefers-reduced-motion: reduce) {
  .sv-card, .sv-card:hover, .sv-card:has(:focus-visible), .sv-card--price:active { transform: none; }
  .sv-card { transition-property: box-shadow; }
  .sv-frame,
  .sv-stage[data-device="desktop"] .sv-frame--phone,
  .sv-stage[data-device="phone"] .sv-frame--desktop { transform: none; }
  .sv-frame { transition-property: opacity, visibility; }
  .sv-msg, .sv-chat.is-armed .sv-msg { transform: none; }
  .sv-includes--checks li::before { transition: none; }
  .sv-seg__opt:active { transform: none; }
  .sv-net, .sv-arrow, .sv-link { transition: none; }
  .sv-link:not(.sv-price__link):active { transform: none; }
  .sv-card--redes:hover .sv-net { transform: none; }
}