/* ===========================================================================
   daClic — v3.css
   La portada de la propuesta de diseño (agosto 2026).

   TODO ESTÁ DIBUJADO
   ------------------
   El teléfono, las tarjetas flotantes, la gráfica de clics, los recuadros de
   color, el aro del avatar y el arco punteado del fondo son CSS y SVG en
   línea. En el mockup son un PNG de varios megas: puesto tal cual, la portada
   tardaría en abrir, se vería borrosa en cualquier pantalla moderna y cambiar
   un color costaría abrir Figma y volver a exportar.

   Dibujado pesa unos kilobytes, se ve nítido en cualquier densidad y el
   teléfono enseña el PRODUCTO —los mismos enlaces, las mismas píldoras— y no
   una foto de cómo se veía el producto el día que se tomó la captura.

   Los logotipos de las redes (Instagram, TikTok, YouTube, X, Spotify) vienen
   de `Brand::svg()`: son trazados de unos cientos de bytes que ya viajan en el
   HTML y toman el color donde hace falta.

   TODO CUELGA DE .v3
   ------------------
   Ni una regla toca al resto del sitio. Es lo que permite tener la portada
   anterior viva en su archivo y volver a ella desde el panel en diez segundos.
   =========================================================================== */

/* La portada COMÚN reserva una franja arriba para su barra fija
   (`body.landing { padding-top: var(--nav-h) }`). Esta trae su propia barra
   pegajosa, que ya ocupa su sitio en el flujo: sin anular la franja quedaba
   una banda blanca de 60 px sobre el logotipo. */
body.landing:has(.v3) { padding-top: 0; }

/* Respaldo para navegadores sin :has(). Una banda blanca en la portada no
   puede depender de la versión del navegador de quien entra. */
@supports not selector(:has(*)) {
  body.landing { padding-top: 0; }
}

.v3 {
  /* ── La paleta ─────────────────────────────────────────────────────────
     Vive aquí y no en el tema del sitio porque es de ESTA portada: el admin
     puede cambiar el acento del panel sin que la portada se descoloque, y al
     revés. */
  --v3-blue:   #2563eb;
  --v3-indigo: #4f46e5;
  --v3-violet: #7c3aed;
  --v3-purple: #8b5cf6;
  --v3-pink:   #ec4899;
  --v3-cyan:   #06b6d4;
  --v3-green:  #10b981;
  --v3-amber:  #f59e0b;

  --v3-ink:  #0f172a;
  --v3-soft: #64748b;
  --v3-mute: #94a3b8;
  --v3-line: #e9edf6;
  --v3-card: #ffffff;
  --v3-bg:   #fdfdff;
  --v3-bg2:  #f6f7fc;

  /* El degradado de marca: azul → violeta → rosa. Es el de la segunda línea
     del título y el del aro del avatar, y por eso se declara una vez. Dos
     copias del mismo degradado acaban siendo dos degradados distintos. */
  --v3-grad:  linear-gradient(100deg, #2563eb 0%, #7c3aed 52%, #ec4899 100%);
  --v3-cta:   linear-gradient(100deg, #6d3ff0 0%, #a855f7 48%, #ec4899 100%);
  --v3-navcta:linear-gradient(100deg, #7c3aed 0%, #6d28d9 100%);

  --v3-sh:    0 2px 4px rgba(15, 23, 42, .04), 0 10px 30px rgba(76, 29, 149, .07);
  --v3-sh-lg: 0 8px 20px rgba(15, 23, 42, .06), 0 32px 70px rgba(76, 29, 149, .14);

  position: relative;
  isolation: isolate;          /* los halos del fondo se quedan detrás de todo */
  overflow-x: clip;            /* ningún adorno puede provocar scroll lateral */
  background: var(--v3-bg);
  color: var(--v3-ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;

  /* Es una página de venta con identidad propia, no una pantalla del panel:
     se ve igual de día y de noche. Fijar el esquema también evita que el
     navegador pinte los controles nativos en oscuro sobre fondo claro
     —desplegables negros sobre blanco. */
  color-scheme: light;
}

/* base.css pinta `h1..h4` con `var(--text)`, y ese token lo cambia el modo del
   SISTEMA. Esta portada es siempre clara, así que en un teléfono con el sistema
   en oscuro `--text` valía #e8ecf3 y TODOS los títulos salían casi blancos
   sobre blanco: la portada se veía vacía. Heredar el color no bastaba —la regla
   de base.css apunta al elemento y gana a lo que herede de `.v3`—, así que hay
   que decirlo aquí con una regla igual de específica. */
.v3 h1, .v3 h2, .v3 h3, .v3 h4 { color: var(--v3-ink); }

/* Los halos del fondo. Tres manchas muy difusas que dan la profundidad que en
   el mockup aporta el degradado de la imagen. Van en un pseudo-elemento y no
   en un div: son puro adorno y no merecen un nodo en el árbol. */
.v3::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 900px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(680px 420px at 78% 8%,  rgba(124, 58, 237, .10), transparent 70%),
    radial-gradient(560px 380px at 96% 46%, rgba(236, 72, 153, .08), transparent 70%),
    radial-gradient(600px 400px at 4%  22%, rgba(37, 99, 235, .07),  transparent 70%);
}

/* ── Piezas comunes ───────────────────────────────────────────────────────── */

.v3 .container { max-width: 1320px; }

.v3-sec {
  padding: 72px 0;
  position: relative;
  /* La barra es pegajosa, así que al saltar desde el menú («Explorar»,
     «Ejemplos», «Precios») el navegador dejaba el título JUSTO debajo de ella
     y tapado. `scroll-margin-top` le dice dónde parar de verdad: 100 px cubre
     los 84 de la barra en escritorio y los 68 en móvil, con aire. */
  scroll-margin-top: 100px;
}
.v3-sec-alt { background: var(--v3-bg2); }

.v3-h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 800;
  text-align: center;
}
.v3-h2 em {
  font-style: normal;
  background: var(--v3-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Partir el titular en dos renglones es OPT-IN: unas secciones lo parten y
   otras no, y un `display:block` suelto en `em` se las imponía a todas. */
.v3-h2-2l em { display: block; }

.v3-sub {
  margin: 14px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--v3-soft);
}

/* ── Botones ──────────────────────────────────────────────────────────────
   Familia propia y no `.btn` del sitio: los del panel son rectos y discretos,
   y los de la portada son píldoras grandes con degradado. Mezclarlos obligaría
   a pelear con especificidad en cada regla. */
.v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /* 150–300 ms: por debajo el cambio se lee como un salto, por encima se
     siente lento al pasar el ratón de un botón a otro. */
  transition: transform .18s ease, box-shadow .22s ease, background-color .18s ease;
}
.v3-btn:hover { transform: translateY(-1px); }
.v3-btn:active { transform: translateY(0); }

.v3-btn-grad {
  background-image: var(--v3-navcta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(109, 40, 217, .3);
}
.v3-btn-grad:hover { color: #fff; box-shadow: 0 8px 22px rgba(109, 40, 217, .38); }

.v3-btn-ghost {
  background: var(--v3-card);
  border-color: var(--v3-line);
  color: var(--v3-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.v3-btn-ghost:hover { color: var(--v3-ink); border-color: #d7deec; }

.v3-btn-plain {
  background: transparent;
  color: var(--v3-soft);
  font-weight: 600;
  padding-inline: 12px;
}
.v3-btn-plain:hover { color: var(--v3-ink); transform: none; }

.v3-btn-lg {
  padding: 17px 30px;
  font-size: 1.02rem;
  font-weight: 700;
  gap: 12px;
}
.v3-btn-cta {
  background-image: var(--v3-cta);
  color: #fff;
  box-shadow: 0 8px 24px rgba(124, 58, 237, .32);
}
.v3-btn-cta:hover { color: #fff; box-shadow: 0 14px 34px rgba(124, 58, 237, .4); }

/* El icono del botón no puede encogerse: en un botón estrecho la flecha se
   aplastaba antes que el texto. */
.v3-i { flex: 0 0 auto; }

/* ── Barra ────────────────────────────────────────────────────────────────
   Pegajosa y no fija: fija obliga a reservar altura con padding en el body y
   cualquier descuadre deja una franja. Pegajosa ocupa su sitio en el flujo y
   se despega sola al bajar. */
.v3-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--v3-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-nav { background: var(--v3-bg); }
}

/* El filete inferior aparece solo cuando la barra ya se despegó de arriba:
   dibujarlo siempre parte la portada en dos justo donde no hay nada.

   Va con una animación atada al scroll y NO con un listener de JavaScript:
   PATRON.md prohíbe el <script> embebido —la política de contenido lo
   bloquea— y una barra no merece un archivo de JS propio. Donde el navegador
   no lo soporte, la barra se queda sin filete: es un adorno, no información. */
@supports (animation-timeline: scroll()) {
  @keyframes v3-stuck { to { border-bottom-color: var(--v3-line); } }
  .v3-nav {
    animation: v3-stuck linear both;
    animation-timeline: scroll();
    animation-range: 0 40px;
  }
}

.v3-nav-in {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 84px;
  /* nowrap es lo que impide que la barra se desborde hacia abajo: si algo no
     cabe, se encoge, pero nunca salta a otro renglón encima del título. */
  flex-wrap: nowrap;
  min-width: 0;
}

.v3-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.v3-logo img, .v3-logo svg { height: 42px; width: auto; display: block; }

/* El logotipo dibujado, para cuando el admin no ha subido ninguno. */
.v3-logo-txt {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--v3-ink);
}
.v3-logo-txt b { color: var(--v3-blue); font-weight: 800; }

.v3-nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.v3-nav-act {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Debajo de 900 px los enlaces de sección estorban más de lo que ayudan: la
   página ya se recorre entera con el pulgar y lo que hace falta arriba es
   crear la cuenta o entrar. */
@media (max-width: 991px) {
  .v3-nav-menu { display: none; }
  .v3-nav-in { min-height: 68px; }
  .v3-logo img, .v3-logo svg { height: 34px; }
  .v3-logo-txt { font-size: 1.45rem; }
  .v3-nav-act { margin-left: auto; }
}
@media (max-width: 420px) {
  .v3-btn { padding: 10px 15px; font-size: .86rem; gap: 7px; }
}

/* ── Portada ──────────────────────────────────────────────────────────────── */

.v3-hero { padding: 26px 0 40px; }

.v3-hero-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
/* Sin esto un hijo de rejilla nunca baja de su ancho mínimo de contenido, y
   una sola pieza ancha estira la columna entera sin avisar. */
.v3-hero-in > * { min-width: 0; }

@media (min-width: 1024px) {
  .v3-hero { padding: 40px 0 56px; }
  .v3-hero-in { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 34px; }
}

/* La píldora del gancho. */
.v3-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 14px;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--v3-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px rgba(76, 29, 149, .06);
}
.v3-pill .ic { color: var(--v3-violet); }

.v3-h1 {
  margin-top: 22px;
  font-size: clamp(2.5rem, 7.4vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -.045em;
  font-weight: 800;
}
/* La segunda línea, teñida con el degradado de marca. `display:block` la
   separa sin un <br>: un salto de línea metido a mano se queda en mitad de la
   palabra en cuanto el texto se traduce o la pantalla cambia de ancho. */
.v3-h1 em {
  display: block;
  font-style: normal;
  background: var(--v3-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* El descendente de la "j" y la "g" se recortaba: el fondo recortado a texto
     usa la caja de línea, no la de la tipografía. */
  padding-bottom: .08em;
}

.v3-lead {
  margin-top: 20px;
  max-width: 460px;
  font-size: clamp(1.02rem, 2.2vw, 1.15rem);
  line-height: 1.62;
  color: var(--v3-soft);
}

.v3-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* El botón redondo de "ver ejemplo". */
.v3-play {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--v3-ink);
}
.v3-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex: 0 0 auto;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* El triángulo va con relleno: de trazo, a 20 px, se lee como un sobre. */
.v3-play-btn .ic { fill: currentColor; margin-left: 2px; }
.v3-play:hover .v3-play-btn {
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
}
.v3-play-txt { display: flex; flex-direction: column; line-height: 1.3; }
.v3-play-txt b { font-size: .96rem; font-weight: 700; }
.v3-play-txt span { font-size: .84rem; color: var(--v3-mute); }

/* ── Las cuatro ventajas ──────────────────────────────────────────────────
   Cuatro en fila en escritorio, dos y dos en tableta, dos en teléfono. Nunca
   una sola columna: en una lista de cuatro renglones sueltos dejan de leerse
   como un grupo y la portada se estira sin ganar nada. */
.v3-perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 22px;
  margin-top: 40px;
  max-width: 620px;
}
@media (min-width: 640px) {
  .v3-perks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
}

.v3-perk-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  margin-bottom: 12px;
  /* El color lo pone cada tarjeta con --c; el fondo es el mismo color al 12 %,
     calculado y no escrito a mano: así un cambio de acento arrastra su fondo
     y no quedan parejas descoordinadas. */
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-perk-ic { background: #f3f5fc; }
}
.v3-perk h3 { font-size: .95rem; font-weight: 700; line-height: 1.3; }
.v3-perk p  { margin-top: 5px; font-size: .84rem; line-height: 1.5; color: var(--v3-soft); }

/* ── Las piezas de la portada nueva ───────────────────────────────────────
   El teléfono deja de ir solo: lo rodean seis fotos con su oficio, y debajo
   cierra una banda con la promesa. */

/* El renglón de apoyo bajo el titular. */
.v3-h1-sub {
  margin-top: 16px;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 750;
  letter-spacing: -.03em;
  color: var(--v3-ink);
}
.v3-h1-sub b { color: var(--v3-blue); font-weight: 750; }
.v3-h1-sub + .v3-lead { margin-top: 12px; }

/* Los recuadros de las ventajas pasan a BLANCOS con sombra: sobre el fondo
   claro de la portada, el fondo teñido de antes se perdía. */
.v3-hero-txt .v3-perk-ic {
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
.v3-hero-txt .v3-perk h3 { font-size: .92rem; }
.v3-hero-txt .v3-perk p  { font-size: .8rem; }

/* ── Las seis fotos ───────────────────────────────────────────────────── */
.v3-hp { display: flex; flex-direction: column; gap: 16px; }
.v3-hp-c {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: visible;
}
.v3-hp-c img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
}
/* El rótulo del oficio, colgando de la esquina. Se dibuja aquí y no viene en
   la foto para que se traduzca. */
.v3-hp-c i {
  position: absolute;
  bottom: -11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 118%;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--v3-ink);
  font-style: normal;
  font-size: .72rem;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .16);
}
.v3-hp.is-izq .v3-hp-c i { left: -14px; }
.v3-hp.is-der .v3-hp-c i { right: -14px; }
.v3-hp-c i .ic { color: var(--v3-violet); flex: 0 0 auto; }
/* Cada rótulo con su color, para que la fila no se lea monótona. */
.v3-hp-c:nth-child(1) i .ic { color: #7c3aed; }
.v3-hp-c:nth-child(2) i .ic { color: #ec4899; }
.v3-hp-c:nth-child(3) i .ic { color: #2563eb; }

/* Las dos columnas de fotos solo caben en pantalla ancha. Por debajo se
   esconden: apretujadas bajo el teléfono no aportan nada y estiran la portada
   media pantalla. */
.v3-hp { display: none; }
@media (min-width: 1180px) { .v3-hp { display: flex; } }

/* ── La cabecera clara del teléfono ───────────────────────────────────── */
.v3-ph-bar.is-claro { padding-top: 52px; padding-bottom: 4px; background: #fff; }
/* Sobre fondo blanco la barra de estado tiene que ir en tinta, no en blanco. */
.v3-phone-scr:has(.is-claro) .v3-sb { color: var(--v3-ink); }
.v3-ph-btn.is-grad { background-image: var(--v3-cta); color: #fff; }
.v3-ph-body.is-alto { margin-top: 0; padding-top: 6px; }

/* ── Los enlaces del perfil, en versión clara ─────────────────────────── */
.v3-l.is-claro {
  background: #fff;
  border: 1px solid var(--v3-line);
  color: var(--v3-ink);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.v3-l.is-claro .v3-l-ic { background: transparent; box-shadow: none; color: var(--a); }
.v3-l.is-claro .v3-l-t span { color: var(--v3-soft); opacity: 1; }
.v3-l.is-claro .v3-l-go { background: transparent; box-shadow: none; color: var(--v3-mute); }
/* El primero, en degradado: es el que el perfil quiere que se pulse. */
.v3-l.is-grad { background-image: var(--v3-cta); color: #fff; }
.v3-l.is-grad .v3-l-ic { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }
.v3-l.is-grad .v3-l-go { background: transparent; box-shadow: none; color: #fff; }

/* ── La banda de cierre ───────────────────────────────────────────────────
   Un panel claro con degradado en diagonal —casi blanco a la izquierda, rosa
   apenas insinuado a la derecha— en lugar del lavanda plano de antes, y las
   tres promesas apiladas (icono, rayita, título, texto) en vez de en fila.
   `overflow:hidden` recorta los adornos contra el canto redondeado. */
.v3-banda {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 54px;
  padding: 30px;
  border: 1px solid #ece8fb;
  border-radius: 28px;
  background: linear-gradient(102deg, #fcfbff 0%, #f9f7ff 44%, #fdf2f8 100%);
  box-shadow: 0 18px 44px rgba(109, 63, 240, .07);
  overflow: hidden;
}
@media (min-width: 720px)  { .v3-banda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) {
  .v3-banda {
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    gap: 26px;
    /* Hueco a la derecha para la flecha. En la propuesta el texto de la última
       promesa no llega al canto: ese aire es donde vive el adorno. */
    padding-right: 96px;
  }
}

/* Los adornos: la flecha punteada del canto superior derecho y los trazos de
   abajo a la izquierda. Van en pseudoelementos —cero peticiones, cero DOM— y
   sólo aparecen cuando las cuatro columnas están en fila: con dos columnas
   caerían encima del texto. Como el panel es una rejilla, tienen que ir
   ABSOLUTOS: un pseudoelemento en flujo sería una celda más. */
.v3-banda::before,
.v3-banda::after { display: none; }
@media (min-width: 1120px) {
  .v3-banda::before,
  .v3-banda::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .v3-banda::after {
    right: 8px; top: 8px;
    width: 84px; height: 168px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 240' fill='none'%3E%3Cpath d='M34 232C92 196 104 108 58 34' stroke='%23ec4899' stroke-opacity='.34' stroke-width='2' stroke-dasharray='7 8' stroke-linecap='round'/%3E%3Cpath d='M59 22 70 43 48 41Z' fill='%23ec4899' fill-opacity='.6'/%3E%3C/svg%3E");
  }
  .v3-banda::before {
    left: 24px; bottom: 4px;
    width: 216px; height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 96' fill='none'%3E%3Cpath d='M2 62C58 90 148 80 254 34' stroke='%237c3aed' stroke-opacity='.15' stroke-width='1.6'/%3E%3Cpath d='M16 84C78 108 166 94 258 52' stroke='%23ec4899' stroke-opacity='.12' stroke-width='1.6'/%3E%3Ccircle cx='96' cy='30' r='4.5' fill='%237c3aed' fill-opacity='.38'/%3E%3Cpath d='M38 8l4.5 9L52 21.5 42.5 26 38 35 33.5 26 24 21.5 33.5 17Z' fill='%237c3aed' fill-opacity='.22'/%3E%3C/svg%3E");
  }
}

/* El contenido va por encima de los adornos. Sin esto el `::after` —que viene
   después en orden de pintado— taparía la última promesa. */
.v3-banda-t,
.v3-banda-i { position: relative; z-index: 1; }

.v3-banda-t { display: flex; align-items: center; gap: 18px; }
.v3-banda-t i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  flex: 0 0 auto;
  border-radius: 26px;
  background-image: var(--v3-cta);
  color: #fff;
  box-shadow: 0 14px 30px rgba(124, 58, 237, .3);
}
.v3-banda-t b { font-size: 1.04rem; font-weight: 750; line-height: 1.36; letter-spacing: -.02em; }
.v3-banda-t em {
  font-style: normal;
  background: var(--v3-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cada promesa se apila. Con el icono a la izquierda el título arrancaba
   desplazado y las tres columnas no compartían canto; arriba, icono, rayita y
   texto salen todos de la misma vertical. */
.v3-banda-i {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.v3-banda-i > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-banda-i > i { background: #f3f0fe; }
}
.v3-banda-b {
  display: block;
  width: 40px; height: 4px;
  margin: 14px 0 16px;
  border-radius: 4px;
  background: var(--c);
}
.v3-banda-i b { display: block; font-size: .95rem; font-weight: 750; letter-spacing: -.01em; }
.v3-banda-i u { display: block; text-decoration: none; margin-top: 6px; font-size: .82rem; line-height: 1.5; color: var(--v3-soft); }

/* El filete que separa una promesa de la anterior. Va centrado en el hueco de
   26 px y se desvanece por los extremos: un borde de canto a canto parte el
   panel en cuatro cajas, y lo que se busca es que se lea como una sola pieza. */
@media (min-width: 1120px) {
  .v3-banda-i::before {
    content: '';
    position: absolute;
    left: -13px; top: 2px; bottom: 2px;
    width: 1px;
    background: linear-gradient(180deg, transparent, #e7e2f7 16%, #e7e2f7 84%, transparent);
  }
}
/* ── El escenario del teléfono ────────────────────────────────────────────── */

.v3-visual {
  position: relative;
  /* En COLUMNA. En fila —que es lo que hace `display:flex` por omisión— el
     teléfono y las tarjetas se ponían uno al lado del otro también en móvil, y
     entre los dos exigían unos 920 px de ancho mínimo. Como la raíz recorta el
     desbordamiento, el texto del hero no se salía de la pantalla: se PERDÍA a
     media palabra, sin barra de scroll que delatara nada.
     A partir de 1240 px esto pasa a ser una rejilla de dos columnas. */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* El arco punteado del fondo. Un círculo con borde discontinuo: como imagen
   serían 15 KB y no se recolorearía. */
.v3-arc {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 118%;
  aspect-ratio: 1;
  transform: translateX(-52%);
  border: 1.5px dashed #dfe5f2;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* Los puntos de color sueltos. */
.v3-dot {
  position: absolute;
  width: var(--s, 9px); height: var(--s, 9px);
  border-radius: 50%;
  background: var(--c);
  top: var(--y); left: var(--x);
  z-index: -1;
  pointer-events: none;
}

/* ── El teléfono ──────────────────────────────────────────────────────────
   Es el mockup MÓVIL de la diseñadora, no el pequeño del mockup de
   escritorio: enseña más producto —la cabecera de onda, los enlaces a todo
   color con su foto, la fila de cifras y la barra de pestañas— y es el que
   engancha. El mismo componente sirve en los dos sitios; solo cambia el ancho
   del marco.

   Todo dibujado: la onda es un SVG de dos trazados, el marco y sus botones
   laterales son pseudo-elementos, y la barra de estado son cuatro formas. Como
   imagen serían dos megas que además no se podrían traducir. */

.v3-phone {
  position: relative;
  z-index: 2;
  width: min(356px, 92vw);
  flex: 0 0 auto;
  padding: 10px;
  background: linear-gradient(158deg, #454c5c 0%, #171a21 40%, #2b3038 100%);
  border-radius: 56px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .07) inset,
    0 30px 70px rgba(15, 23, 42, .3),
    0 10px 24px rgba(15, 23, 42, .16);
}

/* Los botones del canto. Dos pseudo-elementos por un par de rectángulos: como
   imagen serían dos peticiones para dibujar cuatro esquinas redondeadas. */
.v3-phone::before, .v3-phone::after {
  content: '';
  position: absolute;
  width: 3px;
  background: linear-gradient(#4a5162, #2b3038);
  border-radius: 3px;
}
.v3-phone::before { left: -3px; top: 21%; height: 4%; box-shadow: 0 34px 0 #3b4250, 0 74px 0 #3b4250; }
.v3-phone::after  { right: -3px; top: 29%; height: 11%; }

.v3-phone-scr {
  position: relative;
  background: #fff;
  border-radius: 46px;
  overflow: hidden;
  text-align: center;
}

/* ── La barra de estado ───────────────────────────────────────────────────
   Va encima del degradado, así que su contenido es blanco. La isla es un óvalo
   negro, no una muesca: es lo que trae el mockup y lo que tiene un teléfono
   actual. */
.v3-sb {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Sin esta fila los tres SVG salían uno encima de otro: son `inline` de
   fábrica y el `display:block` de abajo los apila en vez de alinearlos. */
.v3-sb-i { display: inline-flex; align-items: center; gap: 5px; }
.v3-sb svg { display: block; }
.v3-notch {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 86px; height: 25px;
  background: #14161c;
  border-radius: 999px;
}

/* ── La cabecera de onda ──────────────────────────────────────────────────
   El degradado ocupa el bloque entero y la onda blanca se le monta encima,
   pegada abajo. Por eso el logotipo cae sobre blanco —la onda sube casi hasta
   el borde por la izquierda— y los botones quedan sobre el degradado, que es
   justo lo que hace el mockup. */
.v3-ph-top {
  position: relative;
  height: 162px;
  background: linear-gradient(118deg, #1d4ed8 0%, #6d28d9 46%, #c026d3 100%);
}
.v3-wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: 134px;
  display: block;
}
.v3-ph-bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px 16px 0;
}
.v3-ph-logo { display: inline-flex; align-items: center; gap: 7px; }
.v3-ph-mark { width: 34px; height: 34px; display: block; flex: 0 0 auto; }

/* El texto de la marca, escrito y no como imagen: sin fondo que recortar,
   nítido a cualquier tamaño y pesa cero.

   Los dos colores salen de MEDIR el logotipo real, no de ojo: #333333 para
   «da» y #0d5cfa para «Clic» son los tonos que más píxeles ocupan en el
   archivo del sitio.

   La pila busca una geométrica pesada, que es la familia del logotipo
   (Poppins). No se carga Poppins de verdad porque el CSP del sitio solo
   admite `font-src 'self'` —Google Fonts está bloqueado— y servirla desde
   aquí costaría 157 KB por seis letras. Century Gothic en Windows y Avenir
   Next en Mac se le acercan bastante a este tamaño. */
.v3-ph-word {
  font-family: Poppins, 'Century Gothic', 'Avenir Next', Futura, var(--font);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  /* Blanco los DOS, no solo «Clic». El gris oscuro de la marca sobre el
     morado da una relación de contraste de 2,4:1 —por debajo del 4,5:1 que
     hace falta para leer—, así que «da» en gris sería medio logotipo
     ilegible. Es el mismo criterio por el que una marca tiene versión clara
     y versión oscura. */
  color: #ffffff;

  /* Contorno negro. `paint-order` NO es opcional aquí: sin él el trazo se
     dibuja centrado en el borde del glifo y se come la mitad del relleno, así
     que la letra sale más delgada y sucia. Con `stroke fill` el trazo va
     DETRÁS del relleno y el grosor de la tipografía se conserva entero.

     Donde no haya soporte se ve el contorno igual, solo que un pelo más
     apretado: se degrada, no se rompe. */
  -webkit-text-stroke: 1.5px var(--v3-ink);
  paint-order: stroke fill;
}
.v3-ph-word b { font-weight: 800; color: #ffffff; }


.v3-ph-acts { display: flex; gap: 9px; }
.v3-ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--v3-ink);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .16);
}

/* ── El cuerpo del perfil ─────────────────────────────────────────────────
   El margen negativo es lo que hace que el avatar se monte sobre la onda, como
   en el mockup. */
.v3-ph-body {
  position: relative;
  z-index: 3;
  margin-top: -66px;
  padding: 0 13px 4px;
}

/* El aro de degradado. El anillo es el fondo del contenedor y el hueco blanco
   es el borde de dentro: así el aro tiene grosor constante sin dos círculos
   superpuestos que se desalinean al cambiar de tamaño. */
.v3-ava-ring {
  width: 118px; height: 118px;
  margin: 0 auto;
  padding: 3.5px;
  border-radius: 50%;
  background: var(--v3-grad);
  position: relative;
}
.v3-ava {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 4px solid #fff;
  background: linear-gradient(145deg, #e2e8f0, #cbd5e1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v3-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin foto no se ve un hueco roto: las iniciales sostienen la portada. */
.v3-ava span {
  font-size: 2.05rem; font-weight: 800;
  background: var(--v3-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v3-ava-check {
  position: absolute;
  right: 7px; bottom: 7px;
  width: 31px; height: 31px;
  border-radius: 50%;
  background: #2563eb;
  border: 3.5px solid #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}

.v3-name {
  margin-top: 10px;
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.14;
}
.v3-role { margin-top: 4px; font-size: .83rem; font-weight: 600; color: #334155; }
.v3-tags { margin-top: 2px; font-size: .78rem; color: var(--v3-soft); line-height: 1.45; }

/* ── Las píldoras de redes ────────────────────────────────────────────────
   Seis en una fila. `minmax(0,1fr)` y no un ancho fijo: con seis anchos fijos
   la fila se desbordaba en el marco estrecho en vez de encogerse. */
.v3-socials {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  margin-top: 13px;
}
.v3-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid var(--v3-line);
  border-radius: 13px;
  background: #fff;
  color: var(--c, var(--v3-ink));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* ── Los enlaces ──────────────────────────────────────────────────────────
   Cada tarjeta es su color de marca, con la foto pegada al canto derecho.
   `--c` es el FONDO y `--a` el acento (el logotipo y el respaldo de la foto):
   hacen falta los dos porque la tarjeta de YouTube es blanca y su acento es
   rojo — con una sola variable, o el fondo salía rojo o el logotipo blanco. */
.v3-links {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
  text-align: left;
}
.v3-l {
  display: flex;
  align-items: stretch;
  min-height: 54px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--c);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.v3-l:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .16); }
/* Instagram no es un color plano: su marca es un degradado y con uno solo se
   reconoce a medias. */
.v3-l.is-ig { background: linear-gradient(95deg, #f9702b 0%, #e1306c 44%, #8b3ae8 100%); }
/* La de YouTube va en blanco, como en el mockup: rompe la tira de color y hace
   que las demás se lean como tarjetas y no como una sola mancha. */
.v3-l.is-light { background: #fff; color: var(--v3-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }

.v3-l-main {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 6px 8px 8px;
}
.v3-l-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #fff;
  color: var(--a);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
.v3-l.is-light .v3-l-ic { background: var(--a); color: #fff; }

/* Los dos últimos van en CONTORNO: recuadro transparente con el borde y el
   glifo en blanco. El recuadro blanco macizo existe para que el logotipo de
   una marca salga en SU color —Instagram rosa, Spotify verde—, y estos dos no
   son marcas: son un eslabón y un sobre, que en blanco sobre el color de la
   tarjeta se leen mejor y no rompen la tira con dos cuadros blancos. */
.v3-l.is-outline .v3-l-ic {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .92);
  color: #fff;
  box-shadow: none;
}
.v3-l-t { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.v3-l-t b,
.v3-l-t span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-l-t b { font-size: .8rem; font-weight: 700; }
.v3-l-t span { font-size: .67rem; opacity: .9; }
.v3-l.is-light .v3-l-t span { opacity: 1; color: var(--v3-soft); }

.v3-l-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  color: var(--v3-blue);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
}
.v3-l.is-light .v3-l-go { border: 1px solid var(--v3-line); box-shadow: none; }

/* La foto del enlace. Si el archivo no está, `--img` no se declara y queda el
   color de acento con un velo: la tarjeta sigue viéndose compuesta y nadie ve
   un hueco. */
.v3-l-img {
  flex: 0 0 30%;
  background-color: var(--a);
  background-image: var(--img, linear-gradient(150deg, rgba(255, 255, 255, .3), rgba(0, 0, 0, .3)));
  background-size: cover;
  background-position: center;
}

/* ── La fila de cifras ────────────────────────────────────────────────────
   Los filetes se dibujan con la sombra y no con `border`: un borde en cada
   celda suma 1 px al ancho y descuadra la rejilla; la sombra no ocupa. */
.v3-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  padding: 9px 0;
  background: #fff;
  border: 1px solid var(--v3-line);
  border-radius: 16px;
}
.v3-stat { text-align: center; padding: 0 2px; box-shadow: -1px 0 0 var(--v3-line); }
.v3-stat:first-child { box-shadow: none; }
.v3-stat .ic { color: var(--c); }
.v3-stat b {
  display: block;
  margin-top: 3px;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--sc, var(--v3-ink));
}
.v3-stat span { display: block; margin-top: 1px; font-size: .62rem; color: var(--v3-soft); }

/* ── La barra de pestañas ─────────────────────────────────────────────────
   Cierra el teléfono por abajo. Sin ella la maqueta se lee como una página
   web dentro de un marco; con ella se lee como la aplicación. */
.v3-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  margin-top: 12px;
  padding: 8px 4px 0;
  border-top: 1px solid var(--v3-line);
  background: #fff;
}
.v3-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: .6rem;
  font-weight: 650;
  color: var(--v3-mute);
}
.v3-tab.is-on { color: var(--v3-blue); }
.v3-tab.is-on::after {
  content: '';
  width: 17px; height: 2.5px;
  border-radius: 2px;
  background: var(--v3-blue);
}
/* El botón de añadir sobresale de la barra: es la acción principal de la app
   y en el mockup va levantado. */
.v3-tab-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 46px; height: 46px;
  margin-top: -20px;
  border-radius: 50%;
  background-image: var(--v3-cta);
  color: #fff;
  box-shadow: 0 6px 16px rgba(124, 58, 237, .42);
}
/* La rayita de inicio de iOS. En bloque por lo mismo que la franja de los
   mini teléfonos: es un <span> y en `inline` no tendría alto. */
.v3-home-bar {
  display: block;
  width: 108px; height: 4px;
  margin: 8px auto 7px;
  border-radius: 4px;
  background: #0f172a;
}
/* ── La tarjeta flotante ──────────────────────────────────────────────────
   Queda una: la de personalizar. La de estadísticas se quitó cuando el
   teléfono estrenó su fila de cifras — enseñaba «24,6K clics totales» a diez
   centímetros de donde ya lo decía el teléfono, y eso se lee como un fallo, no
   como énfasis.

   Por debajo de 1240 px NO se esconde: vuelve al flujo, debajo del teléfono.
   Esconderla costaría lo que mejor explica el producto —que se puede
   personalizar— justo en el tamaño donde entra casi todo el mundo. */
.v3-floats {
  width: min(300px, 100%);
  margin: 22px auto 0;
}
.v3-float {
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: var(--v3-sh);
}

/* En escritorio, el bloque visual son TRES columnas: fotos, teléfono y fotos.
   Las de los lados solo aparecen a partir de 1180 px —debajo se esconden por
   la regla de `.v3-hp`— así que en el tramo intermedio la rejilla se queda con
   el teléfono solo y centrado, sin huecos vacíos a los lados. */
@media (min-width: 1180px) {
  .v3-visual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
  }
  .v3-phone { width: 292px; }
  /* La columna derecha va desfasada hacia abajo: en el mockup las fotos de los
     dos lados no están a la misma altura, y eso es lo que evita que se lea
     como una tabla. */
  .v3-hp.is-der { margin-top: 46px; }
}
@media (min-width: 1400px) {
  .v3-visual { gap: 24px; }
  .v3-phone { width: 318px; }
}
.v3-cust-t { font-size: .86rem; font-weight: 700; }
.v3-swatches { display: flex; gap: 8px; margin-top: 12px; }
.v3-swatch { width: 34px; height: 34px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.v3-bgs { display: flex; gap: 8px; margin-top: 10px; }
.v3-bg {
  flex: 1 1 0;
  aspect-ratio: 1;
  border-radius: 11px;
  background: var(--c);
  border: 1px solid rgba(15, 23, 42, .06);
}
.v3-fonts { display: flex; gap: 7px; margin-top: 10px; }
.v3-font {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  height: 34px;
  border: 1px solid var(--v3-line);
  border-radius: 9px;
  font-size: .82rem; font-weight: 600;
  color: var(--v3-soft);
  font-family: var(--f, inherit);
}
.v3-font.is-on { border-color: var(--v3-violet); color: var(--v3-violet); border-width: 1.5px; }

/* ── "Ideal para todos" ───────────────────────────────────────────────────
   Seis oficios en una tarjeta con filetes. El título ya NO va dentro de la
   tarjeta: ahora encabeza la sección como los demás bloques, que es lo que
   pide el diseño nuevo. */

/* La píldora del epígrafe. Centrada por su propia fila y no con `margin:auto`
   sobre un `inline-flex`: en un elemento en línea el margen automático no
   centra nada. */
.v3-tag-row { text-align: center; }
.v3-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--v3-violet) 11%, #fff);
  color: var(--v3-violet);
  font-size: .88rem;
  font-weight: 700;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-tag { background: #f1ecfe; }
}
.v3-tag + .v3-h2 { margin-top: 18px; }

/* Seis tarjetas SUELTAS, cada una con su foto. Antes eran seis columnas de una
   sola tarjeta separadas por filetes de 1 px; con la foto dentro el filete
   sobra —la propia foto marca dónde empieza cada tarjeta— y las seis reglas de
   `nth-child` que recolocaban esos filetes según hubiera 2, 3 o 6 columnas se
   van con él. */
.v3-ideal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 44px;
}
@media (min-width: 660px)  { .v3-ideal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .v3-ideal { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } }

.v3-who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 24px;
  text-align: center;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 22px;
  box-shadow: var(--v3-sh);
}

/* La proporción va escrita aquí y no se deja al archivo: así el hueco de la
   foto ya está reservado antes de que llegue, y la fila no da el salto al
   cargar. `cover` es red de seguridad —los recortes ya salen a 380x400—. */
.v3-who-img {
  display: block;
  width: 100%;
  aspect-ratio: 380 / 400;
  object-fit: cover;
  border-radius: 16px;
}

/* El recuadro del icono se monta sobre el canto de la foto. Sube con margen
   negativo y necesita `position` para que el z-index cuente: la foto es
   hermana anterior y sin esto la taparía. El fondo es el mismo color al 12 %,
   calculado y no escrito a mano, para que cambiar el color del oficio arrastre
   su fondo y no queden parejas descoordinadas. */
.v3-who-ic {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  margin-top: -26px;
  border-radius: 19px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, #fff);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-who-ic { background: #f3f5fc; }
}

.v3-who h3 { margin-top: 4px; font-size: .95rem; font-weight: 750; letter-spacing: -.02em; }
.v3-who p  { font-size: .84rem; line-height: 1.5; color: var(--v3-soft); }

/* La rayita de color, pegada abajo. `margin-top:auto` la empuja al final de la
   columna: sin eso, las columnas con descripción corta la subían y las seis
   rayitas quedaban a alturas distintas. */
.v3-who-bar {
  display: block;
  width: 46px; height: 3px;
  margin-top: auto;
  padding-top: 0;
  border-radius: 3px;
  background: var(--c);
}
.v3-who p + .v3-who-bar { margin-top: 16px; }
/* ── Los tres pasos ───────────────────────────────────────────────────────
   Cada tarjeta DIBUJA su paso. La barra de la dirección, los interruptores y
   la tarjeta del perfil son CSS: en el mockup son una imagen, y como imagen no
   se traducirían, se verían borrosas en pantallas densas y pesarían más que
   toda la portada junta. */

.v3-pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 46px 22px;
  /* Sitio para el botón redondo, que asoma medio cuerpo por debajo de cada
     tarjeta. Sin esto lo recortaba la siguiente sección. */
  margin: 46px 0 34px;
}
@media (min-width: 700px)  { .v3-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .v3-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 34px; } }

.v3-paso {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 22px 44px;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  /* El filete de color del pie. Se hereda de `--c`, que pone cada tarjeta. */
  border-bottom: 3px solid var(--c);
  border-radius: 24px;
  box-shadow: var(--v3-sh);
  transition: transform .22s ease, box-shadow .22s ease;
}
.v3-paso:hover { transform: translateY(-3px); box-shadow: var(--v3-sh-lg); }

/* El número, en su chapa de degradado, asomando por el canto de arriba. */
.v3-paso-n {
  position: absolute;
  top: -17px; left: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background-image: var(--v3-cta);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--c) 42%, transparent);
}
@supports not (box-shadow: 0 0 0 color-mix(in srgb, red 50%, blue)) {
  .v3-paso-n { box-shadow: 0 5px 14px rgba(124, 58, 237, .38); }
}

/* El escenario de la ilustración. Alto FIJO para que los tres títulos queden a
   la misma altura: con alto automático, la tarjeta de los interruptores era
   más alta y las otras dos se descolgaban. */
.v3-paso-art {
  position: relative;
  width: 100%;
  height: 178px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

/* El globo de agua del primer paso: el mismo icono del set, muy atenuado. */
.v3-art-globe {
  position: absolute;
  top: 2px;
  color: var(--c);
  opacity: .11;
}
.v3-art-send {
  position: absolute;
  top: 4px; right: 6px;
  color: var(--c);
  opacity: .5;
  transform: rotate(8deg);
}

/* ── 1 · la barra de la dirección ─────────────────────────────────────── */
.v3-url-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 13px 13px 13px 15px;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .08);
}
.v3-url-bar > .ic { color: var(--v3-mute); flex: 0 0 auto; }
.v3-url-t {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: .88rem;
  color: var(--v3-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v3-url-t b { color: var(--v3-ink); font-weight: 700; }
.v3-url-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px; height: 27px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--v3-green);
  color: #fff;
}
.v3-url-ok .ic { color: #fff; }

/* ── 2 · los interruptores ────────────────────────────────────────────── */
.v3-tgs {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  padding: 11px;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 17px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .08);
}
.v3-tg { display: flex; align-items: center; gap: 9px; }
.v3-tg-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-tg-ic { background: #f3f5fc; }
}
.v3-tg-t {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: .8rem;
  font-weight: 600;
  color: var(--v3-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El interruptor. Dos formas: la vía y la perilla, que se corre con `left`. */
.v3-sw {
  position: relative;
  width: 34px; height: 19px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #dfe4ee;
  transition: background-color .2s ease;
}
.v3-sw::after {
  content: '';
  position: absolute;
  top: 2.5px; left: 2.5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
  transition: left .2s ease;
}
.v3-sw.is-on { background: var(--v3-indigo); }
.v3-sw.is-on::after { left: 17.5px; }

/* ── 3 · la tarjeta del perfil ────────────────────────────────────────── */
.v3-card3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 15px 14px 14px;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 19px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .08);
}
.v3-card3-ava {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, #e2e8f0, #cbd5e1);
  color: var(--v3-soft);
  font-weight: 700;
}
.v3-card3-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-card3-n {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  font-size: .88rem;
  font-weight: 750;
  letter-spacing: -.02em;
}
.v3-card3-v { color: var(--v3-blue); flex: 0 0 auto; }
.v3-card3-u { font-size: .72rem; color: var(--v3-mute); }
.v3-card3-u b { color: var(--v3-soft); font-weight: 600; }
.v3-card3-s { display: flex; gap: 7px; margin-top: 9px; }
.v3-card3-s i { display: inline-flex; color: var(--c); }

/* ── El botón redondo del pie ─────────────────────────────────────────── */
.v3-paso h3 { font-size: 1.12rem; font-weight: 780; letter-spacing: -.025em; }
.v3-paso p  { margin-top: 8px; font-size: .92rem; line-height: 1.58; color: var(--v3-soft); }

.v3-paso-btn {
  position: absolute;
  bottom: -26px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  color: var(--c);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .1);
}

/* La línea de puntos que enlaza una tarjeta con la siguiente. Solo con las
   tres en fila: apiladas no une nada y quedaría un guion suelto en el aire. */
@media (min-width: 1040px) {
  .v3-paso:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 42%;
    left: calc(100% + 4px);
    width: 26px;
    border-top: 2px dashed #cfd7e6;
  }
}

/* ── La tira de garantías ─────────────────────────────────────────────── */
.v3-bene {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 22px;
  box-shadow: var(--v3-sh);
  overflow: hidden;
}
@media (min-width: 600px)  { .v3-bene { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .v3-bene { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.v3-ben {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 22px;
  text-align: left;
  box-shadow: -1px 0 0 var(--v3-line);
}
/* Igual que en «Ideal para todos»: la cuenta de la primera columna de cada
   renglón cambia con el número de columnas. */
.v3-bene > .v3-ben:nth-child(n)      { border-top: 1px solid var(--v3-line); }
.v3-bene > .v3-ben:first-child       { border-top: 0; }
.v3-bene > .v3-ben:nth-child(n)      { box-shadow: none; }
@media (min-width: 600px) {
  .v3-bene > .v3-ben:nth-child(n)      { box-shadow: -1px 0 0 var(--v3-line); }
  .v3-bene > .v3-ben:nth-child(2n + 1) { box-shadow: none; }
  .v3-bene > .v3-ben:nth-child(-n + 2) { border-top: 0; }
}
@media (min-width: 1040px) {
  .v3-bene > .v3-ben:nth-child(n)      { box-shadow: -1px 0 0 var(--v3-line); border-top: 0; }
  .v3-bene > .v3-ben:first-child       { box-shadow: none; }
}

.v3-ben-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 13px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-ben-ic { background: #f3f5fc; }
}
.v3-ben-t { min-width: 0; line-height: 1.35; }
.v3-ben-t b { display: block; font-size: .92rem; font-weight: 750; letter-spacing: -.02em; }
.v3-ben-t span { display: block; font-size: .82rem; color: var(--v3-soft); }
/* ── Un daClic para cada tipo de negocio ──────────────────────────────────
   Seis fichas de muestra, 3 y 3. A seis en fila cada una se quedaba en 190 px
   y los rótulos de los botones no entraban ni en un renglón; a tres, la ficha
   ronda los 400 px y se lee como lo que es: una página de verdad. */

.v3-negs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 46px;
}
@media (min-width: 680px)  { .v3-negs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .v3-negs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } }

/* ── Todas del MISMO alto ──────────────────────────────────────────────
   Las seis fichas se cortan a la misma altura. No es un capricho de simetría:
   con alto libre, el médico —que su mockup trae con tres bloques más que
   nadie— medía 1328 px y dejaba un socavón de 400 px junto a las de 900.

   Lo que sobra no se recorta en seco: se desvanece. Y eso además dice la
   verdad, porque son PREVISUALIZACIONES de páginas que siguen hacia abajo. */
.v3-neg {
  position: relative;
  height: 980px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--v3-sh);
  transition: transform .22s ease, box-shadow .22s ease;
}
.v3-neg:hover { transform: translateY(-4px); box-shadow: var(--v3-sh-lg); }

/* El velo que difumina lo que no cabe. `pointer-events:none` para que no
   atrape el ratón sobre los botones que tape a medias. */
.v3-neg::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 74px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(transparent, var(--v3-card) 82%);
}
.v3-neg.is-dark::after { background: linear-gradient(transparent, #12141c 82%); }

/* Las dos fichas oscuras —la barbería y el músico—. Son lo que impide que la
   rejilla se lea como seis tarjetas iguales, y de paso enseñan que el tema de
   la página lo elige cada quien. */
.v3-neg.is-dark { background: #12141c; border-color: rgba(255, 255, 255, .1); }

/* ── La cabecera ──────────────────────────────────────────────────────── */
.v3-neg-top {
  position: relative;
  height: var(--hd, 148px);
  background: color-mix(in srgb, var(--c) 16%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-neg-top { background: #eef1f8; }
}
.v3-neg-bg {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Dónde mirar dentro de la foto. 50% —el valor de fábrica— recorta por el
     centro, y en un retrato vertical dentro de una cabecera apaisada eso
     significa el pecho: la cara se queda fuera. Cada ficha ajusta el suyo. */
  object-position: center var(--fp, 50%);
  display: block;
}

/* ── Los seis fondos con movimiento ───────────────────────────────────────
   NO son adornos inventados para la portada: son las SEIS animaciones que
   daClic instala de verdad en `/animations` —aurora, burbujas, destellos,
   manchas, olas y rejilla—, una por ficha. Enseñar las seis a la vez convierte
   la sección en una demostración del producto en lugar de seis fotos bonitas.

   Las de `/animations` van en `position:fixed` porque cubren la página entera;
   aquí viven dentro de una cabecera de 148 px, así que se reescriben en
   absoluto y con las medidas de ese hueco. La IDEA y el nombre son los mismos;
   las coordenadas no pueden serlo.

   Todas se apagan solas con `prefers-reduced-motion` por la regla general del
   final de esta hoja. */
.v3-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* El rótulo con el nombre del efecto. Sin él la sección se ve bonita; con él
   se entiende que cada fondo es una opción que se elige en el panel. */
.v3-fx-tag {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Burbujas que suben. */
.v3-fx-burbujas::before {
  content: '';
  position: absolute;
  inset: -20% 0;
  background:
    radial-gradient(circle 13px at 12% 100%, rgba(255,255,255,.55) 98%, transparent 100%),
    radial-gradient(circle  7px at 32% 100%, rgba(255,255,255,.55) 98%, transparent 100%),
    radial-gradient(circle 17px at 58% 100%, rgba(255,255,255,.55) 98%, transparent 100%),
    radial-gradient(circle  9px at 79% 100%, rgba(255,255,255,.55) 98%, transparent 100%),
    radial-gradient(circle 11px at 92% 100%, rgba(255,255,255,.55) 98%, transparent 100%);
  background-repeat: no-repeat;
  animation: v3-bur 17s linear infinite;
}
@keyframes v3-bur {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 -300px, 0 -390px, 0 -250px, 0 -350px, 0 -440px; }
}

/* Rejilla en perspectiva. El difuminado hacia el horizonte es lo que impide
   que las líneas corten en seco a media cabecera. */
.v3-fx-rejilla::before {
  content: '';
  position: absolute;
  left: -50%; right: -50%; bottom: 0;
  height: 74%;
  background-image:
    linear-gradient(rgba(255,255,255,.85) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.85) 1px, transparent 1px);
  background-size: 26px 26px;
  transform: perspective(180px) rotateX(62deg);
  transform-origin: bottom center;
  opacity: .5;
  animation: v3-rej 3.2s linear infinite;
  mask-image: linear-gradient(transparent, #000 55%);
  -webkit-mask-image: linear-gradient(transparent, #000 55%);
}
@keyframes v3-rej { to { background-position: 0 26px, 0 0; } }

/* Destellos. Dos capas desfasadas para que el parpadeo no se vea acompasado. */
.v3-fx-destellos::before,
.v3-fx-destellos::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.7px 1.7px at 18% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 42% 64%, #fff 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 71% 31%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 88% 72%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 57% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 29% 86%, #fff 50%, transparent 51%);
  animation: v3-des 4.5s ease-in-out infinite;
}
.v3-fx-destellos::after {
  background-position: 22px 30px;
  animation-delay: 2.2s;
  animation-duration: 6s;
}
@keyframes v3-des { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Aurora: dos cintas de luz cruzadas. El desenfoque alto es lo que hace que se
   lean como luz y no como dos manchas. */
.v3-fx-aurora::before {
  content: '';
  position: absolute;
  inset: -40% -20%;
  background:
    conic-gradient(from 210deg at 30% 20%, transparent 0deg, #fff 70deg, transparent 150deg),
    conic-gradient(from  30deg at 72%  8%, transparent 0deg, var(--c) 60deg, transparent 130deg);
  filter: blur(18px);
  opacity: .66;
  animation: v3-aur 22s ease-in-out infinite alternate;
}
@keyframes v3-aur {
  from { transform: translate3d(-4%, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 3%, 0) scale(1.14); }
}

/* Manchas orgánicas, muy lentas: rápido marea y compite con el contenido. */
.v3-fx-manchas::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(closest-side circle at 22% 28%, #fff 0%, transparent 70%),
    radial-gradient(closest-side circle at 78% 22%, var(--c) 0%, transparent 68%),
    radial-gradient(closest-side circle at 55% 82%, #fff 0%, transparent 72%);
  background-size: 62% 58%, 54% 50%, 68% 60%;
  background-repeat: no-repeat;
  filter: blur(15px);
  opacity: .62;
  animation: v3-man 26s ease-in-out infinite alternate;
}
@keyframes v3-man {
  from { background-position: 0% 0%, 100% 0%, 50% 100%; }
  to   { background-position: 18% 22%, 74% 18%, 34% 74%; }
}

/* Olas al pie. Dos elipses enormes girando: al asomar solo su borde superior,
   el giro se lee como oleaje. Las medidas van en px y no en %: un porcentaje
   se mide contra la cabecera —148 px de alto— y el círculo salía deformado. */
.v3-fx-olas::before,
.v3-fx-olas::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -958px;
  width: 1000px; height: 1000px;
  margin-left: -500px;
  border-radius: 44%;
  background: #fff;
  opacity: .3;
  animation: v3-ola 14s linear infinite;
}
.v3-fx-olas::after {
  bottom: -968px;
  opacity: .18;
  animation-duration: 20s;
  animation-direction: reverse;
}
@keyframes v3-ola { to { transform: rotate(360deg); } }
/* La chapa del oficio, arriba a la izquierda. */
.v3-neg-badge {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--v3-card);
  color: var(--c);
  box-shadow: 0 3px 12px rgba(15, 23, 42, .22);
}
.v3-neg.is-dark .v3-neg-badge { background: #12141c; box-shadow: 0 0 0 1.5px var(--c) inset; }

/* El avatar, montado sobre el canto de la foto. */
.v3-neg-ava {
  position: absolute;
  bottom: -34px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 76px; height: 76px;
  border-radius: var(--avr, 50%);
  overflow: hidden;
  border: var(--avw, 4px) solid var(--v3-card);
  background: linear-gradient(145deg, #e2e8f0, #cbd5e1);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
}
.v3-neg.is-dark .v3-neg-ava { border-color: #12141c; }
.v3-neg-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Con el aro a 0 —cuando el logotipo ya trae el suyo— la sombra es lo
   único que despega el avatar de la portada. */
.v3-neg-ava { box-shadow: 0 4px 14px rgba(15, 23, 42, .18); }

/* ── Cada ficha con su forma ──────────────────────────────────────────────
   Ninguna enseña nada que no se pueda reproducir desde el panel: el alto de la
   portada es `hd_h`, el corte es `hd_fade`, el redondeo y el aro del avatar son
   `av_radius` y `av_bw`, el de los botones es `radius`, el relleno es
   `btn_style` y la alineación es `hd_align`. Los valores viajan en variables
   puestas en la propia tarjeta; aquí solo se dice qué hace cada corte. */

/* ARCO · el cuerpo sube y muerde la portada con una curva grande, y el
   avatar se apoya en su cresta. Solo funciona con el avatar CENTRADO: pegado
   a un canto cae dentro de la muesca de la esquina redondeada y se ve torcido
   —eso fue lo que pasó en la boutique—. */
.v3-neg.cor-arco .v3-neg-body {
  position: relative;
  z-index: 2;
  margin-top: -30px;
  border-radius: 34px 34px 0 0;
  background: var(--v3-card);
  padding-top: 90px;
}
/* En el arco el logotipo es el protagonista: más grande y apoyado en la
   cresta de la curva. */
.v3-neg.cor-arco .v3-neg-ava { width: 104px; height: 104px; bottom: -44px; }

/* PLANO · la foto y el cuerpo se encuentran en una LÍNEA RECTA, y el avatar
   va a caballo sobre ella.

   Antes era un arco: el cuerpo subía 20 px con 24 de radio. No funcionaba, y
   por una razón concreta — el avatar va a 20 px del canto y el radio mide 24,
   así que caían justo encima el uno del otro: el avatar quedaba metido en la
   muesca de la esquina y asomaba una cuña de la foto a su izquierda. Se veía
   torcido. Con el borde recto no hay muesca donde caerse.

     relleno = 36 (lo que baja el avatar) + 16 (aire) */
.v3-neg.cor-plano .v3-neg-body { padding-top: 52px; }
.v3-neg.cor-plano .v3-neg-ava { bottom: -36px; }

/* FUNDIDO · la portada se desvanece hacia el cuerpo en vez de cortar. */
.v3-neg.cor-fundido .v3-neg-bg {
  mask-image: linear-gradient(#000 52%, transparent 98%);
  -webkit-mask-image: linear-gradient(#000 52%, transparent 98%);
}

/* ONDA · el corte es un trazado, no una recta. */
.v3-neg-onda {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 2;
  width: 100%;
  height: 40px;
  display: block;
  fill: var(--v3-card);
}
.v3-neg.is-dark .v3-neg-onda { fill: #12141c; }

/* IZQUIERDA · `hd_align: left`. El avatar deja de estar centrado y el texto
   con él; si no, la foto se iría a un lado y los renglones se quedarían en
   medio, que es lo que peor se ve de las dos opciones. */
.v3-neg-body { --pad-x: 18px; }
.v3-neg.is-izq .v3-neg-ava { left: var(--pad-x, 18px); transform: none; }
.v3-neg.is-izq .v3-neg-body { text-align: left; }
.v3-neg.is-izq .v3-neg-u { justify-content: flex-start; }

/* ── El relleno de los botones · `btn_style` ──────────────────────────── */

/* SOFT · el color al 10 %, sin borde. */
.v3-neg.bt-soft .v3-neg-b {
  border-color: transparent;
  background: color-mix(in srgb, var(--c) 10%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-neg.bt-soft .v3-neg-b { background: #f3f5fc; }
}
.v3-neg.bt-soft .v3-neg-b.is-first { background: var(--c); }

/* OUTLINE · todos de contorno, y el primero con el contorno del color. */
.v3-neg.bt-outline .v3-neg-b.is-first {
  background: transparent;
  border-color: var(--c);
  border-width: 1.5px;
  color: var(--c);
}
.v3-neg.bt-outline .v3-neg-b.is-first .ic { color: var(--c); }
/* ── El cuerpo ────────────────────────────────────────────────────────── */
.v3-neg-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 46px var(--pad-x, 18px) 18px;
  text-align: center;
}

.v3-neg-n { font-size: 1.1rem; font-weight: 800; letter-spacing: -.03em; }
.v3-neg.is-dark .v3-neg-n { color: #fff; }

.v3-neg-u {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 3px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--v3-soft);
}
.v3-neg-v { color: var(--v3-blue); flex: 0 0 auto; }
.v3-neg-d { margin-top: 8px; font-size: .82rem; line-height: 1.5; color: var(--v3-soft); }

/* ── Los botones de la ficha ──────────────────────────────────────────── */
.v3-neg-btns { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.v3-neg-b {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--v3-line);
  border-radius: var(--rad, 11px);
  font-size: .82rem;
  font-weight: 650;
  color: var(--v3-ink);
  text-align: left;
}
.v3-neg-b .ic, .v3-neg-b svg { color: var(--c); flex: 0 0 auto; }
.v3-neg-b span {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El primero va macizo: es la acción que el negocio quiere que se pulse. */
.v3-neg-b.is-first { background: var(--c); border-color: var(--c); color: #fff; }
.v3-neg-b.is-first .ic { color: #fff; }
.v3-neg .v3-neg-b.is-wa { background: #25d366; border-color: #25d366; color: #fff; }
.v3-neg .v3-neg-b.is-wa svg { color: #fff; }

.v3-neg.is-dark .v3-neg-b { border-color: rgba(255, 255, 255, .16); color: #e8ecf3; }
.v3-neg.is-dark .v3-neg-b.is-first { background: transparent; border-color: var(--c); color: var(--c); }
.v3-neg.is-dark .v3-neg-b.is-first .ic { color: var(--c); }

/* ── Las piezas del rediseño de la boutique ───────────────────────────────
   Van como OPCIONES de la misma plantilla, no como una ficha aparte: así
   cualquier otro negocio puede estrenarlas sin duplicar el marcado. */

/* La palomita rosa sobre el logotipo: el color de la marca, no el azul del
   perfil verificado, que es otra cosa y sale al lado del nombre. */
.v3-neg-vp {
  position: absolute;
  /* 8 px y no 7: el límite exacto para que la palomita no asome del arco es
     27/raíz(2) = 19,09 px por eje desde el centro, o sea 7,9 desde el canto.
     Con 7 sobresalía 1,3 px — medido. */
  right: 8px; bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid rgba(255, 255, 255, .92);
  color: #fff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .28);
}
.v3-neg.is-dark .v3-neg-vp { border-color: #12141c; }

.v3-neg-lema {
  margin-top: 7px;
  font-size: .86rem;
  font-weight: 750;
  color: var(--c);
}
.v3-neg-lema + .v3-neg-d { margin-top: 4px; }

/* La línea de envíos, y la misma pieza al pie de la ficha. */
.v3-neg-nota,
.v3-neg-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  font-size: .8rem;
  font-weight: 650;
  color: var(--v3-ink);
}
.v3-neg-nota .ic, .v3-neg-pie .ic { color: var(--c); flex: 0 0 auto; }
.v3-neg-pie { margin-top: 12px; font-weight: 600; color: var(--c); }
.v3-neg.is-izq .v3-neg-nota, .v3-neg.is-izq .v3-neg-pie { justify-content: flex-start; }

/* Identidad y cifras, en dos columnas. En el mockup el panel NO va debajo de
   la bio sino a su derecha: puesto debajo empujaba los botones media pantalla
   y la ficha perdía el equilibrio. `align-items:start` es lo que impide que el
   panel se estire hasta el alto del texto. */
.v3-neg-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}
.v3-neg-id { min-width: 0; }
/* En la ficha estrecha —una sola columna en el móvil— las dos columnas dejan
   la bio en un canal de 120 px. Ahí vuelven a apilarse. */
@media (max-width: 420px) {
  .v3-neg-head { grid-template-columns: minmax(0, 1fr); }
  .v3-cif { width: auto; margin-top: 12px; }
}

/* La flechita del final del botón. `margin-left:auto` la pega al canto sin
   necesidad de un hueco flexible entre medias. */
.v3-neg-go { display: inline-flex; margin-left: auto; color: var(--c); flex: 0 0 auto; }
.v3-neg-b.is-first .v3-neg-go,
.v3-neg-b.is-wa .v3-neg-go { color: currentColor; }
/* El panel de cifras. */
.v3-cif {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 132px;
  margin-top: 4px;
  padding: 12px 13px;
  border-radius: 15px;
  text-align: left;
  background: color-mix(in srgb, var(--c) 8%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-cif { background: #f7f2f6; }
}
.v3-neg.is-dark .v3-cif { background: rgba(255, 255, 255, .06); }
.v3-cif-i { display: flex; align-items: center; gap: 10px; }
.v3-cif-i .ic { color: var(--c); flex: 0 0 auto; }
.v3-cif-i b { display: block; font-size: .95rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.v3-neg.is-dark .v3-cif-i b { color: #fff; }
.v3-cif-i i { display: block; font-style: normal; font-size: .72rem; color: var(--v3-soft); }

/* Los botones a dos columnas. Es lo ÚNICO de esta ficha que hoy NO se puede
   reproducir en daClic: `.blocks` es una columna flex con `.blocks>*{width:100%}`
   y el bloque de enlace no lee `--x-w`. Queda anotado aquí para que quien
   venga sepa que esto es destino, no estado. */
.v3-neg-btns.is-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.v3-neg-btns.is-cols .v3-neg-b {
  min-height: 42px;
  padding: 7px 10px;
  gap: 7px;
}
.v3-neg-btns.is-cols .v3-neg-b > span {
  font-size: .76rem;
  white-space: normal;
  line-height: 1.22;
}

/* El catálogo destacado: cuatro productos y los puntos del carrusel. */
/* Las columnas las decide cada ficha: el catálogo de la boutique son
   cuatro productos, la galería del salón son tres fotos. Con un `repeat(4)`
   fijo, tres dejaban un hueco a la derecha. */
.v3-cat { display: grid; grid-template-columns: repeat(var(--gn, 4), minmax(0, 1fr)); gap: 6px; }
.v3-cat-i {
  aspect-ratio: 3 / 4;
  border-radius: 9px;
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 12%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-cat-i { background: #f7e6ef; }
}
.v3-cat-i img { width: 100%; height: 100%; object-fit: cover; display: block; }

.v3-cat-p { display: flex; justify-content: center; gap: 5px; margin-top: 9px; }
.v3-cat-p i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 28%, #fff);
}
.v3-cat-p i.is-on { background: var(--c); width: 14px; border-radius: 3px; }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-cat-p i { background: #f0cede; }
}

/* El banner de oferta. Es una imagen porque en el mockup lo es: en daClic se
   arma con el bloque de IMAGEN enlazada, que es exactamente lo mismo. */
.v3-neg-promo {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 13px;
  border-radius: 15px;
}
/* ── Las piezas de la ficha del médico ────────────────────────────────────
   Igual que las de la boutique: opciones de la MISMA plantilla, para que
   cualquier otro giro pueda estrenarlas sin duplicar el marcado. */

/* Los cuatro sellos de confianza. En el mockup van sobre la portada, pero ahí
   la ficha mide 900 px; aquí mide 400, y cuatro rótulos de dos renglones sobre
   una foto no se leen — además chocarían con el avatar, que va abajo a la
   izquierda. Como tira propia sí caben. */
.v3-sellos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 14px;
  padding: 12px 4px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--c) 7%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-sellos { background: #eff4fd; }
}
.v3-sellos > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 3px;
  text-align: center;
  /* El filete con sombra y no con borde: un borde por celda suma ancho y
     descuadra la rejilla. */
  box-shadow: -1px 0 0 color-mix(in srgb, var(--c) 16%, transparent);
}
.v3-sellos > span:first-child { box-shadow: none; }
.v3-sellos .ic { color: var(--c); }
.v3-sellos i { font-style: normal; font-size: .62rem; font-weight: 600; line-height: 1.25; color: var(--v3-soft); }

/* La tarjeta de calificación. Ocupa el sitio del panel de cifras, así que
   comparte con él la segunda columna de `.v3-neg-head`. */
.v3-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 132px;
  margin-top: 4px;
  padding: 13px 12px;
  border-radius: 15px;
  text-align: center;
  background: color-mix(in srgb, var(--c) 8%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-rate { background: #eff4fd; }
}
.v3-rate-n { display: inline-flex; align-items: center; gap: 6px; }
.v3-rate-n .ic { color: #f5b400; fill: #f5b400; }
.v3-rate-n b { font-size: 1.35rem; font-weight: 800; letter-spacing: -.04em; }
.v3-rate-s { display: inline-flex; gap: 1px; color: #f5b400; }
.v3-rate-s .ic { fill: #f5b400; }
.v3-rate-d { font-size: .68rem; color: var(--v3-soft); }
@media (max-width: 420px) { .v3-rate { width: auto; margin-top: 12px; } }

/* El botón grande de la acción principal. */
.v3-cta {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--c) 88%, #000) 0%, var(--c) 55%,
    color-mix(in srgb, var(--c) 78%, #fff) 100%);
  color: #fff;
  text-align: left;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 38%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-cta { background: var(--c); box-shadow: 0 6px 18px rgba(37, 99, 235, .35); }
}
.v3-cta:hover { color: #fff; transform: translateY(-2px); }
.v3-cta > .ic { flex: 0 0 auto; }
.v3-cta span { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.v3-cta b { display: block; font-size: 1.05rem; font-weight: 780; letter-spacing: -.025em; }
.v3-cta i { display: block; font-style: normal; font-size: .76rem; opacity: .9; }
.v3-cta-go { flex: 0 0 auto; opacity: .9; }

/* La rejilla de cuatro accesos. Sirve dos veces: suelta bajo el botón grande,
   y `is-plano` dentro del panel de servicios, donde ya hay una caja alrededor
   y una segunda sombra sobraría. */
.v3-g4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.v3-g4-i {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 13px 4px;
  border-radius: 13px;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  text-align: center;
}
.v3-g4.is-plano { margin-top: 0; }
.v3-g4.is-plano .v3-g4-i { background: var(--v3-bg2); border-color: transparent; }
.v3-neg.is-dark .v3-g4-i {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
.v3-neg.is-dark .v3-g4-i i { color: #e8ecf3; }
.v3-g4-i .ic { color: var(--c); }
.v3-g4-i i {
  font-style: normal;
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
/* Lo mismo para los rótulos de las cifras y los sellos: son celdas estrechas
   y cualquier palabra larga las desborda. */
.v3-cif-i i, .v3-sellos i, .v3-barra-i i { overflow-wrap: anywhere; }

/* El título del panel admite icono. */
.v3-neg-ph b { display: inline-flex; align-items: center; gap: 6px; }
.v3-neg-ph b .ic { color: var(--c); flex: 0 0 auto; }

/* Las publicaciones: miniatura arriba y texto debajo, dos por fila. Apiladas
   como los posts del otro panel no cabrían: el texto se queda en 90 px. */
.v3-pub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v3-pub-i {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
}
.v3-pub-th { aspect-ratio: 16 / 10; background: var(--v3-bg2); }
.v3-pub-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-pub-t { padding: 9px 10px 10px; line-height: 1.3; }
.v3-pub-t b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .78rem; font-weight: 700;
}
.v3-pub-t > span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: .7rem; color: var(--v3-soft);
}
.v3-pub-t i {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
  font-style: normal; font-size: .66rem; color: var(--v3-mute);
}

/* La barra de contacto del pie. Sustituye a la fila de redes en las fichas que
   la traen: son cuatro acciones, no cuatro perfiles. */
.v3-barra {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  padding: 12px 0;
  border-radius: 16px;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.v3-barra-i {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  color: var(--c);
  box-shadow: -1px 0 0 var(--v3-line);
}
.v3-barra-i:first-child { box-shadow: none; color: #25d366; }
.v3-barra-i i { font-style: normal; font-size: .68rem; font-weight: 650; color: var(--v3-ink); }
/* ── Las piezas de la barbería ────────────────────────────────────────────
   Como las anteriores: opciones de la misma plantilla. */

/* La lista de información: icono redondo, título y subtítulo opcional. */
.v3-info { display: flex; flex-direction: column; gap: 11px; margin-top: 13px; text-align: left; }
.v3-info-i { display: flex; align-items: center; gap: 11px; }
.v3-info-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-info-ic { background: rgba(212, 160, 23, .14); }
}
.v3-info-t { min-width: 0; line-height: 1.32; }
.v3-info-t b { display: block; font-size: .84rem; font-weight: 650; }
.v3-neg.is-dark .v3-info-t b { color: #f2f4f8; }
.v3-info-t i { display: block; font-style: normal; font-size: .78rem; color: var(--v3-soft); }

/* La tarjeta de cifras a DOS pisos: un número arriba, la calificación abajo y
   un filete en medio. Comparte columna con las otras dos variantes. */
.v3-rate.is-doble { gap: 2px; padding: 15px 12px; }
.v3-rate-ic { color: var(--c); margin-bottom: 2px; }
.v3-rate.is-doble .v3-rate-n b { font-size: 1.5rem; color: var(--c); }
.v3-neg.is-dark .v3-rate.is-doble { background: rgba(255, 255, 255, .05); }
.v3-neg.is-dark .v3-rate-d { color: #a3adbf; }
.v3-rate-sep {
  display: block;
  width: 76%; height: 1px;
  margin: 11px 0 9px;
  background: currentColor;
  opacity: .18;
}
/* En la tarjeta doble la estrella grande toma el color de la marca, no el
   amarillo de las cinco pequeñas. */
.v3-rate.is-doble .v3-rate-n .ic { color: var(--c); fill: var(--c); }
.v3-rate.is-doble .v3-rate-s .ic { color: var(--c); fill: var(--c); }

/* El panel «Sobre nosotros»: texto a la izquierda, foto pegada al canto. */
.v3-sobre {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 13px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--v3-bg2);
  border: 1px solid var(--v3-line);
}
.v3-neg.is-dark .v3-sobre { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.v3-sobre-t { flex: 1 1 auto; min-width: 0; padding: 14px 12px 14px 14px; text-align: left; line-height: 1.4; }
.v3-sobre-t b {
  display: block;
  font-size: .74rem; font-weight: 750;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c);
}
.v3-sobre-t strong { display: block; margin-top: 6px; font-size: .84rem; font-weight: 700; }
.v3-neg.is-dark .v3-sobre-t strong { color: #f2f4f8; }
.v3-sobre-t span { display: block; margin-top: 4px; font-size: .78rem; color: var(--v3-soft); }
.v3-sobre img { width: 34%; flex: 0 0 auto; object-fit: cover; display: block; }

/* La barra de redes A COLOR. Las otras fichas las pintan monocromas con el
   color del negocio; aquí van con su color de marca sobre blanco, que es lo
   que trae el mockup y lo que las hace reconocibles de un vistazo. */
.v3-barra.is-color { background: #fff; border-color: #e9edf6; }
.v3-barra.is-color .v3-barra-i { color: var(--c); box-shadow: -1px 0 0 #e9edf6; }
.v3-barra.is-color .v3-barra-i:first-child { box-shadow: none; }
.v3-barra.is-color .v3-barra-i i { color: #0f172a; }
/* ── Las piezas de Belleza Femenina ───────────────────────────────────────
   Es la ficha INVERTIDA: cuerpo claro con las piezas oscuras, al revés que la
   barbería. Se resuelve con variantes, no con una tarjeta aparte. */

/* La tira de sellos en oscuro sobre cuerpo claro. */
.v3-sellos.is-oscuro { background: #14161d; padding: 15px 4px; }
.v3-sellos.is-oscuro > span { box-shadow: -1px 0 0 rgba(255, 255, 255, .12); }
.v3-sellos.is-oscuro > span:first-child { box-shadow: none; }
.v3-sellos.is-oscuro i { color: #e8ecf3; }

/* Los botones en oscuro, con el primero en degradado. `bt-oscuro` es la cuarta
   variante de `btn_style`, junto a solid, outline y soft. */
.v3-neg.bt-oscuro .v3-neg-b {
  background: #14161d;
  border-color: transparent;
  color: #f2f4f8;
  padding: 12px 14px;
}
.v3-neg.bt-oscuro .v3-neg-b .ic,
.v3-neg.bt-oscuro .v3-neg-b svg { color: var(--c); }
.v3-neg.bt-oscuro .v3-neg-b .v3-neg-go { color: #f2f4f8; }
/* El de WhatsApp va en degradado rosa→morado, como en el mockup: aquí no es
   el verde de la marca sino un botón más de la página. */
.v3-neg.bt-oscuro .v3-neg-b.is-wa {
  background: linear-gradient(100deg, #ec4899, #a855f7);
  border-color: transparent;
}
.v3-neg.bt-oscuro .v3-neg-b.is-wa svg { color: #fff; }

/* El botón grande de esta ficha comparte forma con los demás, pero el texto va
   en dos renglones dentro del mismo hueco. */
.v3-neg.bt-oscuro .v3-cta { border-radius: 15px; }

/* El subtítulo dentro del botón de WhatsApp. */
.v3-neg-b span i {
  display: block;
  font-style: normal;
  font-size: .72rem;
  font-weight: 500;
  opacity: .9;
}

/* Las redes en tarjeta clara con el contorno del color de la marca. */
.v3-barra.is-color .v3-barra-i svg { color: var(--c); }
/* ── Las piezas del perfil personal ───────────────────────────────────────
   Un creador no es un negocio: no tiene catálogo ni citas, tiene cifras de
   audiencia, obra publicada y formas de que le escriban. */

/* El punto de «en línea» sobre el avatar. Va donde la palomita de los otros,
   así que comparte su cuenta: a 8 px del canto para no salirse del arco. */
.v3-neg-on {
  position: absolute;
  right: 6px; bottom: 6px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #22c55e;
  border: 3px solid var(--v3-card);
}

/* Las dos píldoras: dónde está y su dirección. */
.v3-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.v3-pill2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--v3-bg2);
  font-size: .74rem;
  font-weight: 600;
  color: var(--v3-soft);
}
.v3-pill2 .ic { color: var(--v3-mute); flex: 0 0 auto; }
/* La de la dirección va teñida: es la que se quiere que se pulse. */
.v3-pill2.is-acento {
  background: color-mix(in srgb, var(--c) 10%, #fff);
  color: var(--c);
}
.v3-pill2.is-acento .ic { color: var(--c); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-pill2.is-acento { background: #e6f5f3; }
}

/* Las cifras EN FILA. La otra variante (`.v3-cif`) va en columna al lado de la
   identidad; esta va a lo ancho debajo, que es lo que pide un perfil con
   cuatro números cortos en vez de tres largos. */
.v3-cifh {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 13px;
  padding: 13px 0;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 16px;
}
.v3-cifh > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  text-align: center;
  box-shadow: -1px 0 0 var(--v3-line);
}
.v3-cifh > span:first-child { box-shadow: none; }
.v3-cifh .ic { color: var(--c); }
.v3-cifh b { font-size: 1rem; font-weight: 800; letter-spacing: -.035em; }
.v3-cifh i { font-style: normal; font-size: .66rem; color: var(--v3-soft); overflow-wrap: anywhere; }

/* Accesos REDONDOS, sin recuadro. */
.v3-g4.is-redondo { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.v3-g4.is-redondo .v3-g4-i { background: none; border: 0; padding: 0; gap: 6px; }
.v3-g4.is-redondo .v3-g4-i .ic {
  box-sizing: content-box;
  width: 22px; height: 22px;
  padding: 13px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 10%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-g4.is-redondo .v3-g4-i .ic { background: #e6f5f3; }
}

/* Publicaciones con la foto grande y la hora encima. */
.v3-pubf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v3-pubf-i { display: flex; flex-direction: column; gap: 6px; }
.v3-pubf-th { position: relative; aspect-ratio: 4 / 3; border-radius: 11px; overflow: hidden; background: var(--v3-bg2); }
.v3-pubf-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La hora, sobre la foto: es un dato del contenido, no del pie. */
.v3-pubf-th i {
  position: absolute;
  left: 6px; bottom: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .62);
  color: #fff;
  font-style: normal;
  font-size: .62rem;
  font-weight: 650;
}
.v3-pubf-i b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .74rem; font-weight: 650; line-height: 1.3;
}

/* La barra oscura «Conecta conmigo», con los iconos en su color. */
.v3-conecta {
  margin-top: 13px;
  padding: 15px 12px 14px;
  border-radius: 17px;
  background: #14161d;
  text-align: left;
}
.v3-conecta > b { display: block; margin-bottom: 12px; padding-left: 4px; font-size: .88rem; font-weight: 750; color: #f2f4f8; }
.v3-conecta > span { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.v3-conecta-i { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.v3-conecta-i i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
}
.v3-conecta-i u {
  text-decoration: none;
  font-size: .62rem;
  font-weight: 650;
  color: #e8ecf3;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Cinco redes en vez de cuatro: la rejilla se ajusta al número que haya. */
.v3-barra.is-color { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
/* ── Las piezas del restaurante ───────────────────────────────────────────
   Cuerpo CREMA en vez de blanco, y la identidad sobre una banda oscura que
   continúa la portada: es lo que le da el aire de carta de restaurante. */

.v3-neg.is-crema { background-color: #f5f1ea; }

/* ── La portada del restaurante ───────────────────────────────────────────
   En el mockup la identidad va SOBRE la foto, al lado del avatar, no debajo
   sobre una banda sólida. Para eso la foto tiene que pintarla la TARJETA y no
   el bloque de portada: el cuerpo es un hermano posterior y no puede asomarse
   al fondo del anterior.

   Las dos capas del fondo: primero el velo que oscurece la foto para que el
   texto blanco se lea, y debajo la foto. Ambas miden lo mismo de alto, así
   que por debajo de ahí queda la crema del color de fondo. */
.v3-neg.is-hero {
  background-image:
    linear-gradient(rgba(18, 26, 15, .10) 0,
                    rgba(28, 38, 24, .48) 34%,
                    rgba(33, 45, 29, .88) 62%,
                    #23301f 84%),
    var(--hero);
  background-size: 100% var(--heroh, 318px), auto var(--heroh, 318px);
  background-position: top center, top center;
  background-repeat: no-repeat;
  background-color: #f5f1ea;
}
/* La foto del `img` sobra: ya la pinta la tarjeta. Se queda el bloque para la
   chapa y el fondo con movimiento. */
.v3-neg.is-hero .v3-neg-top { background: transparent; }
.v3-neg.is-hero .v3-neg-bg { visibility: hidden; }
.v3-neg.is-hero .v3-neg-top::after { display: none; }
.v3-neg.is-hero .v3-neg-body,
.v3-neg.is-hero .v3-neg-body::before { background: transparent; }

/* El avatar, protagonista y a la izquierda, montado sobre el canto de la
   portada. */
.v3-neg.is-hero .v3-neg-ava {
  width: 112px; height: 112px;
  bottom: -74px;
  border: 3px solid var(--c);
}

/* Solo la identidad se aparta para dejarle sitio al avatar; lo de abajo sigue
   a todo el ancho. Con un `padding-left` en el cuerpo se habrían movido
   también las cifras y los botones. */
.v3-neg.is-hero .v3-neg-n,
.v3-neg.is-hero .v3-neg-u,
.v3-neg.is-hero .v3-neg-d { margin-left: 130px; }
/* El bloque se aprieta para que quepa junto al avatar en vez de descolgarse
   por debajo. */
.v3-neg.is-hero .v3-neg-u { margin-top: 1px; }
.v3-neg.is-hero .v3-neg-d { margin-top: 6px; }
.v3-neg.is-hero .v3-pills { margin-top: 12px; }
.v3-neg.is-hero .v3-neg-body { padding-top: 30px; }
.v3-neg.is-hero .v3-neg-n {
  /* Serif, como el mockup: es lo que le da el aire de carta. */
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.v3-neg.is-crema::after { background: linear-gradient(transparent, #f5f1ea 82%); }
.v3-neg.is-crema .v3-neg-body { position: relative; background-color: #f5f1ea; }

/* La banda oscura. Es un pseudo-elemento y no un div: no lleva contenido, solo
   pinta el fondo de la primera parte del cuerpo. Los hijos se levantan por
   encima con `z-index` para que el texto no quede debajo. */
.v3-neg.is-crema .v3-neg-body::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 172px;
  background: #23301f;
}
.v3-neg.is-crema .v3-neg-body > * { position: relative; z-index: 1; }

/* La foto se fundía en seco con la banda y se veía la costura. Este velo la
   apaga hacia abajo con el mismo color, así que las dos parecen una sola
   pieza. Va por encima de la foto pero por debajo del avatar (z-index 4). */
/* El velo de la banda se retiró: con la foto de fondo de la tarjeta, el
   degradado ya lo hace la primera capa de `background-image`. */

/* Lo que cae DENTRO de la banda se pinta en claro. */
.v3-neg.is-crema .v3-neg-n { color: #f7f3ec; }
.v3-neg.is-crema .v3-neg-u { color: var(--c); }
.v3-neg.is-crema .v3-neg-d { color: #d9d2c6; }
.v3-neg.is-crema .v3-pill2 { background: rgba(255, 255, 255, .1); color: #e6e0d5; }
.v3-neg.is-crema .v3-pill2 .ic { color: var(--c); }
/* El aro del avatar, del color de la marca sobre la banda. */
.v3-neg.is-crema .v3-neg-ava { border: 3px solid var(--c); }
.v3-neg.is-crema .v3-neg-on { border-color: #23301f; }

/* La fila de cifras, en verde oscuro sobre la crema. */
.v3-neg.is-crema .v3-cifh {
  background: #2c3a26;
  border-color: transparent;
  padding: 16px 0;
}
.v3-neg.is-crema .v3-cifh > span { box-shadow: -1px 0 0 rgba(255, 255, 255, .14); }
.v3-neg.is-crema .v3-cifh > span:first-child { box-shadow: none; }
.v3-neg.is-crema .v3-cifh b { color: #f7f3ec; }
.v3-neg.is-crema .v3-cifh i { color: #c9c2b4; }
.v3-neg.is-crema .v3-cifh .ic { color: var(--c); }

/* Accesos redondos en BLANCO: sobre la crema, el fondo teñido no se veía. */
.v3-g4.is-blanco .v3-g4-i .ic {
  background: #fff;
  color: #2c3a26;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
.v3-g4.is-blanco .v3-g4-i i { color: #3b4232; }

/* El especial del día: la foto de fondo y el texto sobre un velo que la
   oscurece por la izquierda, para que se lea. */
.v3-esp {
  position: relative;
  margin-top: 13px;
  border-radius: 17px;
  overflow: hidden;
  min-height: 168px;
  background-color: #23301f;
  background-image: var(--img);
  background-size: cover;
  background-position: right center;
}
.v3-esp-t {
  position: relative;
  display: block;
  padding: 16px 15px;
  width: 68%;
  text-align: left;
  /* El velo va aquí y no en un pseudo-elemento aparte: así se degrada justo
     por detrás del texto y la foto se ve limpia a la derecha. */
  background: linear-gradient(100deg, #23301f 62%, rgba(35, 48, 31, 0));
  line-height: 1.4;
}
.v3-esp-t b { display: block; font-size: .92rem; font-weight: 700; color: var(--c); }
.v3-esp-t strong { display: block; margin-top: 7px; font-size: .88rem; font-weight: 700; color: #f7f3ec; }
.v3-esp-t > span { display: block; margin-top: 4px; font-size: .76rem; color: #c9c2b4; }
.v3-esp-t i {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #e8c9a0;
  color: #23301f;
  font-style: normal;
  font-size: .78rem;
  font-weight: 700;
}

/* «Contáctanos» en claro: el mismo componente que la barra oscura de Gonzalo,
   con el panel al revés y el botón de domicilio al lado. */
.v3-neg.is-crema .v3-conecta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: #fbf9f5;
  border: 1px solid #e8e2d6;
}
.v3-neg.is-crema .v3-conecta > b { grid-column: 1 / -1; margin-bottom: 0; color: #23301f; }
.v3-neg.is-crema .v3-conecta > span { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v3-neg.is-crema .v3-conecta-i u { color: #3b4232; }

/* El botón de domicilio. */
.v3-domi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 118px;
  padding: 13px 10px;
  border-radius: 15px;
  background: linear-gradient(150deg, #c1682f, #a4551f);
  color: #fff;
  text-align: center;
}
.v3-domi:hover { color: #fff; }
.v3-domi b { font-size: .78rem; font-weight: 750; line-height: 1.2; }
.v3-domi i { font-style: normal; font-size: .68rem; opacity: .9; }

/* Las redes del pie, en barra oscura sobre la crema. */
.v3-neg.is-crema .v3-barra.is-color { background: #23301f; border-color: transparent; }
.v3-neg.is-crema .v3-barra.is-color .v3-barra-i { box-shadow: none; }
.v3-neg.is-crema .v3-barra.is-color .v3-barra-i i { color: #e6e0d5; }
/* ── Las piezas de la inmobiliaria ────────────────────────────────────────
   Misma idea que el restaurante —hero con la identidad sobre la foto— pero en
   azul marino y con el logotipo en PLACA rectangular en vez de círculo. */

.v3-neg.is-marino { background-color: #f4f6f9; }
.v3-neg.is-marino::after { background: linear-gradient(transparent, #f4f6f9 82%); }
.v3-neg.is-marino.is-hero {
  background-image:
    linear-gradient(rgba(10, 18, 32, .10) 0,
                    rgba(14, 23, 40, .46) 34%,
                    rgba(17, 27, 46, .88) 64%,
                    #111b2e 86%),
    var(--hero);
  background-color: #f4f6f9;
}
.v3-neg.is-marino .v3-neg-n { color: #f2f5fa; }
.v3-neg.is-marino .v3-neg-u { color: var(--c); }
.v3-neg.is-marino .v3-neg-d { color: #c3cddc; }
.v3-neg.is-marino .v3-pill2 { background: rgba(255, 255, 255, .1); color: #dde4ee; }
.v3-neg.is-marino .v3-pill2 .ic { color: var(--c); }

/* El logotipo es una PLACA, no un círculo: más ancho que alto y con el filete
   dorado del propio archivo. Por eso su hueco cambia de proporción. */
.v3-neg.logo-rect .v3-neg-ava {
  width: 128px;
  height: 104px;
  border-radius: 14px;
  border: 0;
}
.v3-neg.logo-rect.is-hero .v3-neg-n,
.v3-neg.logo-rect.is-hero .v3-neg-u,
.v3-neg.logo-rect.is-hero .v3-neg-d { margin-left: 146px; }

/* Los sellos de esta ficha llevan segunda línea («Casas / en venta»). */
.v3-sellos i u { display: block; text-decoration: none; font-weight: 500; opacity: .8; }
.v3-neg.is-marino .v3-sellos.is-oscuro { background: #16233b; border-radius: 17px; }

/* La tira de cifras y los accesos, sobre el gris azulado. */
.v3-neg.is-marino .v3-g4.is-blanco .v3-g4-i .ic { background: #fff; color: #16233b; }
.v3-neg.is-marino .v3-g4.is-blanco .v3-g4-i i { color: #2c3a52; }

/* ── El inmueble destacado ────────────────────────────────────────────── */
.v3-inm {
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  margin-top: 13px;
  border-radius: 17px;
  overflow: hidden;
  background: #16233b;
  text-align: left;
}
.v3-inm-f { position: relative; }
.v3-inm-f img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La chapa se dibuja, no viene en la foto: así se traduce y escala. */
.v3-inm-f i {
  position: absolute;
  top: 9px; left: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 18px);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(17, 27, 46, .82);
  color: #fff;
  font-style: normal;
  font-size: .6rem;
  font-weight: 650;
  line-height: 1.2;
}
.v3-inm-f i .ic { color: var(--c); flex: 0 0 auto; }
.v3-inm-t { padding: 14px 13px; line-height: 1.35; }
.v3-inm-t > b { display: block; font-size: .95rem; font-weight: 700; color: #f2f5fa; }
.v3-inm-l { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; }
.v3-inm-l u {
  display: flex; align-items: center; gap: 7px;
  text-decoration: none;
  font-size: .74rem; color: #c3cddc;
}
.v3-inm-l u .ic { color: var(--c); flex: 0 0 auto; }
.v3-inm-t em {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--c);
}
.v3-inm-t a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  color: #16233b;
  font-size: .76rem;
  font-weight: 700;
}

/* ── Las tarjetas de propiedad ────────────────────────────────────────── */
.v3-props { margin-top: 14px; text-align: left; }
.v3-props .v3-neg-ph { margin-bottom: 10px; }
.v3-props-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.v3-prop {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e3e8f0;
}
.v3-prop-f { position: relative; aspect-ratio: 16 / 10; background: #e3e8f0; }
.v3-prop-f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-prop-f i {
  position: absolute;
  top: 7px; left: 7px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #16233b;
  color: #fff;
  font-style: normal;
  font-size: .6rem;
  font-weight: 700;
}
/* El corazón, en su botón redondo. */
.v3-prop-f u {
  position: absolute;
  top: 6px; right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  color: #16233b;
}
.v3-prop > b { margin: 9px 10px 0; font-size: .78rem; font-weight: 700; line-height: 1.25; }
.v3-prop-s { margin: 3px 10px 0; font-size: .66rem; color: var(--v3-soft); }
.v3-prop-p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 10px 0;
}
.v3-prop-p > span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .64rem; color: var(--v3-mute);
}
.v3-prop-p > span .ic { color: var(--c); flex: 0 0 auto; }
.v3-prop-p em {
  font-style: normal;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #16233b;
}
.v3-prop-p em i { font-style: normal; font-size: .62rem; font-weight: 600; color: var(--v3-soft); margin-left: 3px; }

/* «Hablemos» en marino. */
.v3-neg.is-marino .v3-conecta { background: #16233b; }
.v3-neg.is-marino .v3-conecta > span { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.v3-neg.is-marino .v3-barra.is-color { background: #fff; border-color: #e3e8f0; }
/* ── Las piezas de la veterinaria ─────────────────────────────────────────
   Es la tercera con la identidad al lado del avatar, pero la primera que la
   pone sobre BLANCO: la portada acaba justo donde empieza el nombre, así que
   no necesita ni foto de fondo en la tarjeta ni velo. Solo el hueco. */
.v3-neg.is-lado .v3-neg-ava { width: 116px; height: 116px; bottom: -76px; }
.v3-neg.is-lado .v3-neg-n,
.v3-neg.is-lado .v3-neg-u,
.v3-neg.is-lado .v3-neg-d { margin-left: 134px; }
.v3-neg.is-lado .v3-neg-u { margin-top: 1px; }
.v3-neg.is-lado .v3-neg-d { margin-top: 6px; }
.v3-neg.is-lado .v3-pills { margin-top: 12px; }
.v3-neg.is-lado .v3-neg-body { padding-top: 34px; }

/* La fila de cifras, en el color de la marca en vez de en tarjeta clara. */
.v3-neg.cifh-color .v3-cifh {
  background: var(--c);
  border-color: transparent;
  padding: 16px 0;
}
.v3-neg.cifh-color .v3-cifh > span { box-shadow: -1px 0 0 rgba(255, 255, 255, .2); }
.v3-neg.cifh-color .v3-cifh > span:first-child { box-shadow: none; }
.v3-neg.cifh-color .v3-cifh .ic,
.v3-neg.cifh-color .v3-cifh b { color: #fff; }
.v3-neg.cifh-color .v3-cifh i { color: rgba(255, 255, 255, .82); }

/* El botón grande, en versión suave: fondo teñido y la flecha en un círculo
   del color, no al revés. */
.v3-neg.cifh-color .v3-cta {
  background: color-mix(in srgb, var(--c) 10%, #fff);
  color: var(--v3-ink);
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--c) 18%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-neg.cifh-color .v3-cta { background: #e7f2f1; border-color: #d3e8e6; }
}
.v3-neg.cifh-color .v3-cta > .ic {
  box-sizing: content-box;
  width: 26px; height: 26px;
  padding: 12px;
  border-radius: 50%;
  background: #fff;
  color: var(--c);
}
.v3-neg.cifh-color .v3-cta i { color: var(--v3-soft); }
.v3-neg.cifh-color .v3-cta-go {
  box-sizing: content-box;
  width: 20px; height: 20px;
  padding: 9px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  opacity: 1;
}

/* El panel del chequeo, en claro: la foto a la derecha y el texto sobre el
   gris, sin velo — aquí la imagen no pasa por debajo del texto. */
.v3-neg.esp-claro .v3-esp { background-color: #f1f4f4; min-height: 152px; }
.v3-neg.esp-claro .v3-esp-t { background: linear-gradient(100deg, #f1f4f4 62%, rgba(241, 244, 244, 0)); }
.v3-neg.esp-claro .v3-esp-t b { color: var(--v3-ink); font-size: 1rem; }
.v3-neg.esp-claro .v3-esp-t strong { display: none; }
.v3-neg.esp-claro .v3-esp-t > span { color: var(--v3-soft); margin-top: 6px; }
.v3-neg.esp-claro .v3-esp-t i { background: var(--c); color: #fff; }

/* «Contáctanos» en claro, con filetes entre los cuatro. */
.v3-neg.cx-claro .v3-conecta {
  background: color-mix(in srgb, var(--c) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 14%, #fff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-neg.cx-claro .v3-conecta { background: #eef5f4; border-color: #dceceb; }
}
.v3-neg.cx-claro .v3-conecta > b { display: none; }
.v3-neg.cx-claro .v3-conecta > span { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v3-neg.cx-claro .v3-conecta-i { box-shadow: -1px 0 0 color-mix(in srgb, var(--c) 16%, transparent); }
.v3-neg.cx-claro .v3-conecta-i:first-child { box-shadow: none; }
/* Los iconos sin círculo macizo: solo el trazo, como en el mockup. */
.v3-neg.cx-claro .v3-conecta-i i { background: none; color: var(--c); width: auto; height: auto; }
.v3-neg.cx-claro .v3-conecta-i u { color: var(--v3-ink); }

/* Las redes, en barra del color de la marca. */
.v3-neg.redes-oscuro .v3-barra.is-color { background: var(--c); border-color: transparent; }
.v3-neg.redes-oscuro .v3-barra.is-color .v3-barra-i { box-shadow: none; }
.v3-neg.redes-oscuro .v3-barra.is-color .v3-barra-i i { color: #fff; }
/* ── Las piezas del hotel ─────────────────────────────────────────────────
   La única sin avatar: la marca cuelga de arriba en un estandarte. */

.v3-neg.is-azul { background-color: #f4f7fd; }
.v3-neg.is-azul::after { background: linear-gradient(transparent, #f4f7fd 82%); }
.v3-neg.is-azul .v3-neg-body { background-color: #f4f7fd; }

/* El estandarte. Cuelga del borde de arriba y termina en curva: `border-radius`
   con dos radios por esquina («50% / 26px») es lo que le da la punta suave sin
   necesidad de un SVG. */
.v3-banner {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 152px;
  padding: 14px 10px 16px;
  background: #fbfdff;
  border-radius: 0 0 50% 50% / 0 0 26px 26px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .22);
  text-align: center;
}
.v3-banner-ic { color: var(--c); }
.v3-banner b {
  margin-top: 4px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: #16306e;
}
.v3-banner i {
  font-style: normal;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #4a5c86;
}
.v3-banner u { display: inline-flex; gap: 1px; margin-top: 4px; color: var(--c); }
.v3-banner u .ic { fill: var(--c); }

/* El lema, en cursiva sobre la onda. */
.v3-script {
  margin-top: 4px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #16306e;
  text-align: center;
}
.v3-script-s {
  margin-top: 3px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #3d5686;
  text-align: center;
}

/* La línea de datos: dos bloques con un filete en medio, no dos píldoras. */
.v3-linea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  font-size: .82rem;
  font-weight: 650;
  color: #16306e;
}
.v3-linea span { display: inline-flex; align-items: center; gap: 6px; }
.v3-linea .ic { color: var(--c); flex: 0 0 auto; }
.v3-linea em { width: 1px; height: 18px; background: #c7d3e8; }

/* El botón grande con BOTÓN dentro: el bloque entero es azul marino y la
   acción va en una pastilla más clara a la derecha. */
.v3-ctab {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 13px 13px 15px;
  border-radius: 16px;
  background: #16306e;
  text-align: left;
}
.v3-ctab-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  color: #16306e;
}
.v3-ctab-t { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.v3-ctab-t b { display: block; font-size: .92rem; font-weight: 750; color: #fff; }
.v3-ctab-t i { display: block; font-style: normal; font-size: .72rem; color: #b9c6e2; }
.v3-ctab a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 10px 13px;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
}

/* Los accesos, en TIRA con filetes en vez de círculos. */
.v3-g4.is-tira,
.v3-neg.g4-tira .v3-g4 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-top: 16px;
  padding: 14px 0;
  background: #fff;
  border: 1px solid #e2e8f4;
  border-radius: 16px;
}
.v3-neg.g4-tira .v3-g4-i {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 3px;
  gap: 7px;
  box-shadow: -1px 0 0 #e6ebf5;
}
.v3-neg.g4-tira .v3-g4-i:first-child { box-shadow: none; }
.v3-neg.g4-tira .v3-g4-i .ic { color: var(--c); }
.v3-neg.g4-tira .v3-g4-i i { font-size: .6rem; color: #2b3f68; }

/* ── La suite ─────────────────────────────────────────────────────────── */
.v3-suite {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr) auto;
  margin-top: 14px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e8f4;
  text-align: left;
}
.v3-suite-f { position: relative; }
.v3-suite-f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-suite-f i {
  position: absolute;
  top: 8px; left: 0;
  max-width: 92%;
  padding: 4px 9px;
  border-radius: 0 6px 6px 0;
  background: #c9922f;
  color: #fff;
  font-style: normal;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.v3-suite-t { padding: 13px 11px; line-height: 1.35; }
.v3-suite-t > b { display: block; font-size: .95rem; font-weight: 750; color: #16306e; }
.v3-suite-l { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.v3-suite-l u {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; font-size: .7rem; color: #43546f;
}
.v3-suite-l u .ic { color: var(--c); flex: 0 0 auto; }
.v3-suite-t a {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px;
  font-size: .76rem; font-weight: 700; color: #16306e;
  border-bottom: 1.5px solid var(--c);
  padding-bottom: 2px;
}
/* La pastilla del precio, pegada al canto derecho. */
.v3-suite-p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 92px;
  margin: 11px 11px 11px 0;
  padding: 12px 6px;
  border-radius: 13px;
  background: var(--c);
  color: #fff;
  text-align: center;
}
.v3-suite-p i { font-style: normal; font-size: .62rem; opacity: .88; }
.v3-suite-p b { font-size: 1.05rem; font-weight: 800; letter-spacing: -.03em; }

/* ── La promoción ─────────────────────────────────────────────────────── */
.v3-promo2 {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  margin-top: 13px;
  border-radius: 16px;
  overflow: hidden;
  background: #16306e;
  text-align: left;
}
.v3-promo2-f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-promo2-t { padding: 14px 13px; line-height: 1.35; }
.v3-promo2-t i {
  display: block;
  font-style: normal;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7fa5f5;
}
.v3-promo2-t b { display: block; margin-top: 6px; font-size: .95rem; font-weight: 750; color: #fff; }
.v3-promo2-t > span { display: block; margin-top: 3px; font-size: .7rem; color: #b9c6e2; }
.v3-promo2-t em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #6f9bf7;
}
.v3-promo2-t em u {
  text-decoration: none;
  margin-left: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: #dbe4f6;
}
.v3-promo2-t a {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 11px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  color: #16306e;
  font-size: .76rem; font-weight: 700;
}

/* Las experiencias: cuatro columnas y el rótulo debajo, sin hora. */
.v3-pubf { grid-template-columns: repeat(var(--pn, 3), minmax(0, 1fr)); }
.v3-neg.is-azul .v3-pubf-i b { color: #2b3f68; font-weight: 600; text-align: center; }

/* ── La barra de ayuda ────────────────────────────────────────────────── */
.v3-ayuda {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 13px;
  border-radius: 16px;
  background: #e8effc;
  text-align: left;
}
.v3-ayuda-ic { color: var(--c); flex: 0 0 auto; }
.v3-ayuda-t { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.v3-ayuda-t b { display: block; font-size: .84rem; font-weight: 750; color: #16306e; }
.v3-ayuda-t i { display: block; font-style: normal; font-size: .7rem; color: #4a5c86; }
.v3-ayuda a {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
  padding: 10px 13px;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-size: .74rem; font-weight: 700;
}

.v3-neg.is-azul .v3-barra.is-color { background: #16306e; border-color: transparent; }
/* ── Los paneles: publicaciones y eventos ─────────────────────────────── */
.v3-neg-panel {
  margin-top: 14px;
  padding: 11px;
  background: var(--v3-bg2);
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  text-align: left;
}
.v3-neg.is-dark .v3-neg-panel { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }

.v3-neg-ph {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}
.v3-neg-ph b { font-size: .8rem; font-weight: 750; }
.v3-neg.is-dark .v3-neg-ph b { color: #fff; }
.v3-neg-ph i { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--c); }

.v3-post { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.v3-post-th {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 9px;
  overflow: hidden;
  background: #dfe4ee;
}
.v3-post-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-post-t { min-width: 0; line-height: 1.32; }
.v3-post-t b {
  display: block;
  font-size: .76rem; font-weight: 650;
  /* Dos renglones y corta: los títulos de los posts son de largo libre y sin
     tope uno solo estiraba la ficha entera. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.v3-neg.is-dark .v3-post-t b { color: #e8ecf3; }
.v3-post-t i { font-style: normal; font-size: .68rem; color: var(--v3-mute); }

/* Los dos primeros botones, lado a lado. El envoltorio existe para que la
   rejilla de dos columnas afecte SOLO a la pareja: puesta sobre `.v3-neg-btns`
   habría partido en dos también la lista de abajo. */
.v3-neg-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

/* ── La galería de platos ─────────────────────────────────────────────── */
.v3-gal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.v3-gal-i {
  aspect-ratio: 1;
  border-radius: 9px;
  overflow: hidden;
  /* Sin foto queda un degradado cálido, no un hueco gris: la galería se ve
     compuesta aunque el restaurante todavía no haya subido nada. */
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--c) 34%, #fff),
    color-mix(in srgb, var(--c) 12%, #fff));
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-gal-i { background: linear-gradient(145deg, #fde3cc, #fdf2e8); }
}
.v3-gal-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Las redes del pie ────────────────────────────────────────────────── */
.v3-neg-red {
  display: flex;
  gap: 8px;
  /* Ya NO se pegan abajo. Con el alto fijo, `margin-top:auto` empujaría las
     redes al pie y dejaría el hueco en medio de la ficha — el mismo socavón
     que se quería quitar. Ahora van detrás del contenido, sin más. */
  padding-top: 16px;
}
.v3-neg-red span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid var(--v3-line);
  border-radius: 11px;
  color: var(--c);
}
.v3-neg.is-dark .v3-neg-red span { border-color: rgba(255, 255, 255, .16); }

/* ── Herramientas ─────────────────────────────────────────────────────────
   Cinco tarjetas con su ilustración y la barra de estadísticas. Sustituye a la
   tira de cinco iconos que había antes: dice lo mismo, pero enseñándolo. */

.v3-tools { margin-top: 64px; }

/* Los destellos que flanquean el titular. Tres rayas giradas por lado: como
   imagen serían dos peticiones por un adorno de 200 bytes. */
.v3-chispa {
  display: none;
  position: relative;
  width: 26px; height: 34px;
  flex: 0 0 auto;
}
@media (min-width: 900px) { .v3-chispa { display: inline-block; vertical-align: middle; } }
.v3-chispa::before, .v3-chispa::after {
  content: '';
  position: absolute;
  width: 3px; height: 15px;
  border-radius: 3px;
  background: var(--v3-violet);
}
.v3-chispa::before { top: 0; left: 11px; transform: rotate(-24deg); }
.v3-chispa::after  { top: 14px; left: 2px; transform: rotate(-58deg); background: var(--v3-pink); }
.v3-chispa.is-der::before { transform: rotate(24deg); }
.v3-chispa.is-der::after  { left: 18px; transform: rotate(58deg); }

.v3-tl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 40px;
}
@media (min-width: 620px)  { .v3-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .v3-tl { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }

.v3-tl-c {
  display: flex;
  flex-direction: column;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.v3-tl-c:hover { transform: translateY(-4px); box-shadow: var(--v3-sh-lg); }

.v3-tl-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 16px 0; }
/* El recuadro del icono, en degradado del color de la tarjeta. */
.v3-tl-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--c) 82%, #fff),
    color-mix(in srgb, var(--c) 88%, #000));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--c) 34%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-tl-ic { background: var(--c); box-shadow: 0 5px 14px rgba(15, 23, 42, .18); }
}
.v3-tl-tag {
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 11%, #fff);
  color: var(--c);
  font-style: normal;
  font-size: .66rem;
  font-weight: 700;
  white-space: nowrap;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-tl-tag { background: #f3f5fc; }
}

.v3-tl-c h3 { margin: 14px 16px 0; font-size: 1.02rem; font-weight: 780; letter-spacing: -.025em; color: var(--c); }
.v3-tl-c p  { margin: 7px 16px 0; font-size: .82rem; line-height: 1.55; color: var(--v3-soft); }

/* El panel de la ilustración. `margin-top:auto` lo empuja abajo para que las
   cinco tarjetas alineen su ilustración aunque el texto mida distinto. */
.v3-tl-img {
  display: block;
  margin: 16px 0 0;
  padding: 12px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--c) 9%, #fff),
    color-mix(in srgb, var(--c) 3%, #fff));
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-tl-img { background: #f7f8fd; }
}
.v3-tl-img img { width: 100%; height: auto; display: block; }

.v3-tl-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 14px 10px;
  border-top: 1px solid var(--v3-line);
  color: var(--c);
  font-size: .88rem;
  font-weight: 700;
}
.v3-tl-go:hover { color: var(--c); }
/* La flecha en su círculo de contorno. */
.v3-tl-go .ic {
  box-sizing: content-box;
  width: 16px; height: 16px;
  padding: 4px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

/* ── La barra de estadísticas ─────────────────────────────────────────── */
.v3-est {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  padding: 26px 28px;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(100deg, #6d28d9 0%, #9333ea 46%, #e0338c 100%);
  color: #fff;
}
@media (min-width: 1040px) {
  .v3-est { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 22px; }
}
.v3-est-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  flex: 0 0 auto;
  border-radius: 20px;
  background: #fff;
  color: var(--v3-violet);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
}
.v3-est-t { min-width: 0; }
.v3-est-t > b {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.v3-est-vivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  font-style: normal;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* El punto que dice que está en directo. */
.v3-est-vivo::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
}
.v3-est-t > span { display: block; margin-top: 6px; font-size: .88rem; opacity: .9; }

.v3-est-n {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
  margin-top: 16px !important;
  opacity: 1 !important;
}
@media (min-width: 700px) { .v3-est-n { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v3-est-n u {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  text-decoration: none;
  box-shadow: -1px 0 0 rgba(255, 255, 255, .22);
  padding-left: 12px;
}
.v3-est-n u:first-child { box-shadow: none; padding-left: 0; }
@media (max-width: 699px) {
  .v3-est-n u:nth-child(odd) { box-shadow: none; padding-left: 0; }
}
.v3-est-n .ic { grid-row: 1 / 3; align-self: center; opacity: .9; }
.v3-est-n b { font-size: 1.14rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.v3-est-n i { font-style: normal; font-size: .74rem; opacity: .88; }

/* El montaje de pantalla y teléfono. Se esconde por debajo de 1040 px: ahí la
   barra ya va en dos columnas y la ilustración robaría el sitio a las cifras. */
.v3-est-dev { display: none; }
@media (min-width: 1040px) {
  .v3-est-dev { display: block; width: 210px; height: auto; align-self: end; margin-bottom: -26px; }
}

.v3-est-b {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  padding: 14px 24px;
  border-radius: 999px;
  background: #fff;
  color: var(--v3-violet);
  font-size: .94rem;
  font-weight: 750;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
  transition: transform .2s ease;
}
.v3-est-b:hover { color: var(--v3-violet); transform: translateY(-2px); }
@media (min-width: 1040px) { .v3-est-b { justify-self: end; } }
/* ── Lo que trae ──────────────────────────────────────────────────────────
   Seis tarjetas con la ilustración sangrando por el canto derecho. Antes eran
   seis recuadros con icono y texto; la ilustración es lo que hace que se
   entienda cada una sin leerla entera. */

.v3-feats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 44px;
}
@media (min-width: 640px)  { .v3-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .v3-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.v3-feat {
  position: relative;
  overflow: hidden;
  /* El texto ocupa poco más de la mitad: el resto es para la ilustración, que
     entra por la derecha. */
  padding: 24px 46% 26px 24px;
  min-height: 250px;
  border-radius: 22px;
  border: 1px solid var(--v3-line);
  /* Un velo del color de la tarjeta, en diagonal. Muy tenue: es el fondo, no
     el asunto. */
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--c) 7%, #fff) 0%,
      #fff 52%,
      color-mix(in srgb, var(--c) 5%, #fff) 100%);
  transition: transform .22s ease, box-shadow .22s ease;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-feat { background: #fff; }
}
.v3-feat:hover { transform: translateY(-4px); box-shadow: var(--v3-sh-lg); }

/* El recuadro del icono, en degradado del color de la tarjeta. */
.v3-feat-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  margin-bottom: 18px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--c) 80%, #fff),
    color-mix(in srgb, var(--c) 90%, #000));
  box-shadow: 0 5px 15px color-mix(in srgb, var(--c) 32%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .v3-feat-ic { background: var(--c); box-shadow: 0 5px 15px rgba(15, 23, 42, .16); }
}

.v3-feat h3 {
  position: relative;
  z-index: 1;
  font-size: 1.08rem;
  font-weight: 780;
  letter-spacing: -.028em;
  line-height: 1.25;
}
.v3-feat p {
  position: relative;
  z-index: 1;
  margin-top: 9px;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--v3-soft);
}

/* La ilustración, pegada al canto derecho y desbordando un poco por abajo:
   así se lee como parte de la tarjeta y no como una foto metida dentro.
   `pointer-events:none` porque es adorno y no debe atrapar el ratón. */
.v3-feat-img {
  position: absolute;
  right: -12px;
  bottom: -10px;
  width: 52%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* Por debajo de 640 px la tarjeta es una sola columna y estrecha: la
   ilustración se queda más pequeña y el texto recupera su ancho. */
@media (max-width: 639px) {
  .v3-feat { padding-right: 40%; min-height: 210px; }
  .v3-feat-img { width: 44%; }
}
/* ── Precios ──────────────────────────────────────────────────────────────
   Dos tarjetas con la ilustración a la izquierda y los datos a la derecha. */

.v3-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 52px auto 0;
}
@media (min-width: 860px) { .v3-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }

.v3-plan {
  position: relative;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 30px 26px;
  border-radius: 26px;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
}
/* Debajo de 520 px la ilustración se lleva media tarjeta y la lista se queda
   en un canal de 120 px: mejor apilar. */
@media (max-width: 519px) {
  .v3-plan { grid-template-columns: 1fr; text-align: center; }
  .v3-plan-list li { text-align: left; }
}

/* El plan de pago se distingue por un borde de DEGRADADO, no por un tamaño
   distinto: agrandarlo descolocaría la rejilla en cuanto haya tres planes.
   Se hace con dos fondos —uno al `padding-box` y otro al `border-box`—, que es
   la única forma de teñir un borde con un degradado. */
.v3-plan.is-top {
  border-color: transparent;
  border-width: 2px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--v3-cta) border-box;
  box-shadow: 0 14px 40px rgba(124, 58, 237, .16);
}

.v3-plan-tag {
  position: absolute;
  top: -15px; left: 50%;
  transform: translateX(-50%);
  padding: 7px 18px;
  border-radius: 999px;
  background-image: var(--v3-cta);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(124, 58, 237, .3);
}

.v3-plan-img { width: 100%; height: auto; display: block; }

.v3-plan-t { min-width: 0; }
.v3-plan-t h3 { font-size: 1.42rem; font-weight: 800; letter-spacing: -.035em; }

.v3-plan-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 4px;
  /* El filete va debajo del precio, no encima de la lista: separa el importe
     de lo que incluye, que son las dos cosas que se comparan. */
  padding-bottom: 18px;
  border-bottom: 1px solid var(--v3-line);
}
.v3-plan-price b {
  font-size: 2.7rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  background: var(--v3-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v3-plan-price span { font-size: .95rem; color: var(--v3-soft); }

.v3-plan-list { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.v3-plan-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; line-height: 1.45; }
/* La palomita en su círculo de contorno verde, como en el mockup. */
.v3-plan-list .ic {
  box-sizing: content-box;
  width: 13px; height: 13px;
  padding: 2px;
  flex: 0 0 auto;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--v3-green);
  color: var(--v3-green);
}

.v3-plan-b {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 15px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--v3-violet);
  color: var(--v3-violet);
  font-size: .95rem;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease;
}
.v3-plan-b:hover { color: var(--v3-violet); transform: translateY(-2px); }
/* El del plan destacado va macizo: es el que se quiere que se pulse. */
.v3-plan.is-top .v3-plan-b {
  border-color: transparent;
  background-image: var(--v3-cta);
  color: #fff;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .32);
}
.v3-plan.is-top .v3-plan-b:hover { color: #fff; box-shadow: 0 12px 30px rgba(124, 58, 237, .4); }
/* ── Cierre ───────────────────────────────────────────────────────────────
   Un panel oscuro con el gancho a la izquierda, la foto a la derecha y la
   tira de tres garantías abajo. */

.v3-end {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: 30px;
  background: linear-gradient(115deg, #3b1a91 0%, #6d28d9 46%, #b4249a 100%);
  color: #fff;
}
@media (min-width: 940px) {
  .v3-end { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.v3-end-t { padding: 42px 30px 34px; }
@media (min-width: 940px) { .v3-end-t { padding: 52px 20px 44px 48px; } }

/* La píldora del gancho, con su filete tenue. */
.v3-end-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: .84rem;
  font-weight: 650;
}
.v3-end-tag .ic { color: #f0abfc; }

.v3-end h2 {
  margin-top: 22px;
  font-size: clamp(2.05rem, 5.2vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 800;
  color: #fff;
}
/* La segunda línea, teñida. `display:block` la baja de renglón sin un <br>,
   que se quedaría a mitad de la frase al traducir. */
.v3-end h2 em {
  display: block;
  font-style: normal;
  background: linear-gradient(100deg, #f472b6 0%, #c084fc 62%, #818cf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .08em;
}
.v3-end p {
  margin-top: 18px;
  max-width: 340px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #ddd6fe;
}

/* El botón, blanco y con el icono en su chapa de degradado. */
.v3-end-b {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 11px 22px 11px 11px;
  border-radius: 999px;
  background: #fff;
  color: #5b21b6;
  font-size: 1.06rem;
  font-weight: 750;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .26);
  transition: transform .2s ease, box-shadow .22s ease;
}
.v3-end-b:hover { color: #5b21b6; transform: translateY(-2px); box-shadow: 0 18px 42px rgba(15, 23, 42, .32); }
.v3-end-b i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-image: var(--v3-cta);
  color: #fff;
}
.v3-end-go { color: #7c3aed; }

.v3-end-nota {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-size: .86rem;
  color: #d8cffb;
}
.v3-end-nota .ic { color: #c4b5fd; flex: 0 0 auto; }

/* ── Las imágenes ─────────────────────────────────────────────────────── */
.v3-end-art { position: relative; min-height: 210px; }
@media (min-width: 940px) { .v3-end-art { min-height: 486px; } }

.v3-end-gente {
  position: absolute;
  right: -16%; top: 26px;
  filter:
    drop-shadow(0 0 1.5px #fff)
    drop-shadow(0 0 1.5px #fff)
    drop-shadow(0 0 2.5px rgba(255, 255, 255, .92));
  mask-image:
    linear-gradient(to bottom, #000 84%, transparent 100%),
    linear-gradient(to right, transparent 2%, #000 30%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 84%, transparent 100%),
    linear-gradient(to right, transparent 2%, #000 30%);
  -webkit-mask-composite: source-in;
  /* Más ancha que su columna a propósito: la foto es una tira apaisada y solo
     creciendo se pone a la altura del panel. */
  width: 156%;
  height: auto;
  max-width: none;
}
/* La tarjeta del navegador se monta sobre la foto, como en el mockup. Va
   opaca a propósito: es una tarjeta blanca, y quitarle el fondo le hacía
   agujeros por dentro. */
.v3-end-web {
  position: absolute;
  left: 6%; bottom: -30px;
  width: 80%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .34);
}
@media (max-width: 939px) {
  .v3-end-art { padding: 0 20px 60px; }
  .v3-end-gente { position: static; display: block; }
  .v3-end-web { left: 14%; bottom: 0; width: 72%; }
}

/* ── La tira de garantías ─────────────────────────────────────────────── */
.v3-end-pie {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-top: 26px;
  padding: 22px 26px;
  background: rgba(0, 0, 0, .16);
}
@media (min-width: 760px) { .v3-end-pie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.v3-end-p {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 18px;
  text-align: left;
  /* El filete con sombra y no con `border`: un borde por celda suma ancho y
     descuadra la rejilla. */
  box-shadow: -1px 0 0 rgba(255, 255, 255, .18);
}
.v3-end-p:first-child { box-shadow: none; }
@media (max-width: 759px) {
  .v3-end-p { box-shadow: 0 -1px 0 rgba(255, 255, 255, .18); }
  .v3-end-p:first-child { box-shadow: none; }
}
.v3-end-p i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-image: var(--v3-cta);
  color: #fff;
}
.v3-end-p b { display: block; font-size: .95rem; font-weight: 750; }
.v3-end-p u { display: block; text-decoration: none; margin-top: 2px; font-size: .82rem; color: #ddd6fe; }

.v3-end a:focus-visible { outline-color: #fff; }
/* ── Pie ──────────────────────────────────────────────────────────────────── */

.v3-foot {
  border-top: 1px solid var(--v3-line);
  padding: 34px 0 40px;
  margin-top: 72px;
}
.v3-foot-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.v3-foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.v3-foot-links a { font-size: .88rem; color: var(--v3-soft); }
.v3-foot-links a:hover { color: var(--v3-ink); }
.v3-foot-note { margin-top: 8px; font-size: .82rem; color: var(--v3-mute); }

/* ── Movimiento ───────────────────────────────────────────────────────────
   La entrada del teléfono y las tarjetas. Suave y una sola vez: una portada
   que se mueve cada vez que se mira cansa. */
@keyframes v3-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.v3-anim { animation: v3-up .6s cubic-bezier(.22, .8, .3, 1) both; animation-delay: var(--d, 0s); }

/* Quien pidió menos movimiento no ve ninguno. No es un detalle de cortesía:
   para algunas personas el movimiento provoca mareo. */
@media (prefers-reduced-motion: reduce) {
  .v3 *, .v3 *::before, .v3 *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .v3-btn:hover, .v3-paso:hover, .v3-feat:hover, .v3-neg:hover, .v3-l:hover { transform: none; }
  .v3-nav { animation: none !important; }
}

/* El foco del teclado, visible sobre cualquier fondo. */
.v3 a:focus-visible, .v3 button:focus-visible {
  outline: 2.5px solid var(--v3-violet);
  outline-offset: 3px;
  border-radius: 8px;
}
.v3-end a:focus-visible { outline-color: #fff; }