/* Versión "nueva": rediseño sobre mimo.css. Se carga solo cuando la versión elegida es "nueva".
   Mismos textos e imágenes; cambia jerarquía, contraste, ritmo y llamados a la acción. */

:root {
  /* Escala tipográfica más contenida: un título enorme por pantalla, el resto un escalón abajo. */
  --t-xl: clamp(2.3rem, 5vw, 4.5rem);
  --t-l: clamp(1.9rem, 3.8vw, 3.4rem);
  --t-m: clamp(1.55rem, 2.8vw, 2.5rem);
  --t-s: clamp(1.25rem, 2vw, 1.9rem);
  --t-texto: clamp(1.05rem, 1.15vw, 1.15rem);
  --t-texto-l: clamp(1.05rem, 1.3vw, 1.3rem);
  --espacio: clamp(56px, 8vw, 104px);
  --resaltador: linear-gradient(transparent 56%, var(--amarillo) 56%, var(--amarillo) 92%, transparent 92%);
}

/* ---------- 1. Contraste: el amarillo pasa a ser resaltador detrás de texto oscuro ----------
   Amarillo sobre blanco da 1,4:1 (WCAG pide 3:1 en títulos); gris oscuro sobre amarillo da 10:1. */
.titulo .linea.amarillo, .titulo .amarillo, .claves__titulo .grande {
  color: var(--oscuro); width: fit-content; background: var(--resaltador); padding: 0 .1em;
}
.claves__titulo .grande { margin-inline: auto; }
.servicio--invertido .linea.amarillo, .srv-hero__titulo .linea.amarillo, .conectando__frase--der .linea.amarillo { margin-left: auto; }
.nos-hero__titulo { line-height: 1.25; }
.nos-hero__destacado {
  display: inline; color: var(--oscuro); background: var(--resaltador); padding: 0 .1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.nos-hero__lema { margin-top: .8rem; }
/* La trama de puntos queda en su lugar: con el resaltador, el título ya se lee aunque pase por detrás. */
.mundial__texto {
  max-width: 440px; padding: 1.3rem 1.5rem; border-radius: 16px; background: rgba(255, 255, 255, .94); box-shadow: var(--sombra-suave);
}

/* ---------- 2. Texto de lectura: 18 px y líneas de ~65 caracteres ---------- */
.clave p, .servicio p, .servicio-tarjeta p, .hero__texto p, .portada__texto p, .contacto__texto, .texto-legal p, .faq p,
.nos-hero__intro p, .mundial__texto, .fundadora__texto > p:not(.fundadora__cargo), .empleo__intro p, .empleo__perfil p {
  font-size: 1.125rem; line-height: 1.65;
}
.srv-bloque__texto, .linkeate__texto, .conocenos__texto, .empleo__perfil p { max-width: 65ch; }
.srv-bloque__texto { line-height: 1.6; }

/* ---------- 3. Llamados a la acción: Calendly es el botón principal; "Más información", enlace ---------- */
a.btn[href*="calendly.com"] {
  background: var(--oscuro); border-color: var(--oscuro); color: var(--blanco); font-weight: 700; padding: .7em 1.5em;
  box-shadow: var(--sombra-suave);
}
a.btn[href*="calendly.com"]:hover { background: #000; border-color: #000; color: var(--amarillo); }
.enlace-flecha {
  display: inline-flex; align-items: center; gap: .45em; width: fit-content; font-weight: 700; color: var(--oscuro);
  text-decoration: none; border-bottom: 3px solid var(--amarillo); padding-bottom: 2px; transition: gap .25s var(--curva);
}
.enlace-flecha::after { content: "→"; }
.enlace-flecha:hover { gap: .75em; }

/* ---------- 4. Servicios del inicio en tarjetas ---------- */
.servicios-tarjetas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem);
  max-width: 1280px; margin: 0 auto; padding: 1rem var(--lado) 1rem;
}
.servicio-tarjeta {
  position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 1.4rem 1.7rem;
  background: var(--blanco); border: 1px solid #ececec; border-radius: 18px; box-shadow: var(--sombra-suave);
  transition: transform .35s var(--curva), box-shadow .35s;
}
.servicio-tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-fuerte); }
.servicio-tarjeta__num {
  position: absolute; top: -14px; left: 1.4rem; z-index: 1; padding: .2em .7em; border-radius: 999px;
  background: var(--oscuro); color: var(--amarillo); font-weight: 800; font-size: .9rem; letter-spacing: .04em;
}
.servicio-tarjeta__img { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--blanco); }
.servicio-tarjeta__img .ampliable, .servicio-tarjeta__img .ampliable img, .servicio-tarjeta__img > img { width: 100%; height: 100%; }
/* contain: las ilustraciones traen decoraciones en los bordes que el recorte dejaba a medias. */
.servicio-tarjeta__img img { object-fit: contain; }
.servicio-tarjeta__titulo { font-size: clamp(1.35rem, 1.9vw, 1.75rem); line-height: 1.1; }
.servicio-tarjeta p { flex: 1; margin: 0; }

/* ---------- 5. Texto que antes quedaba sobre ilustraciones ---------- */
.srv-leads__alinear { min-height: 560px; display: flex; align-items: center; padding: 6rem var(--lado); }
.tarjeta-texto {
  max-width: 560px !important; padding: 1.7rem 1.9rem; border-radius: 18px;
  background: rgba(255, 255, 255, .95); box-shadow: var(--sombra-suave);
}
.tarjeta-texto p { background: none !important; padding: 0 !important; margin: 0; }
.contacto__caja {
  max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
}
.contacto__caja > .contacto__titulo, .contacto__caja > .contacto__texto, .contacto__caja > .contacto__agenda { grid-column: 1; }
.contacto__titulo { max-width: none; }
.contacto__caja > .form {
  grid-column: 2; grid-row: 1 / span 4; margin-top: 0; padding: 1.8rem; border-radius: 20px;
  background: var(--blanco); box-shadow: var(--sombra-fuerte);
}
/* Etiquetas visibles en el formulario (antes solo había placeholders). */
.form__campo > .oculto {
  position: static !important; width: auto !important; height: auto !important; margin: 0 0 .35rem !important;
  overflow: visible; clip: auto; white-space: normal; display: block; font-weight: 700; font-size: .95rem; color: var(--oscuro);
}

/* ---------- 6. Prueba social ---------- */
.clientes__logos img { width: 140px; height: 56px; max-width: none; max-height: none; object-fit: contain; }
.clientes__logos img[src*="aw-design"] { transform: scale(1.6); }
.clientes__logos img[src*="aw-design"]:hover { transform: scale(1.7); }
.slider__logo { display: block; height: 36px; width: auto; margin: 0 auto .6rem; mix-blend-mode: multiply; }

/* ---------- 7. Ritmo vertical uniforme ---------- */
.claves { padding-top: var(--espacio); }
.titulo-barra { margin-top: var(--espacio); margin-bottom: 2.5rem; }
.clientes { padding-top: var(--espacio); }
.testimonios { margin-top: var(--espacio); }
.contacto { margin-top: var(--espacio); }

/* ---------- 8. Celular ---------- */
.cta-movil { display: none; }
@media (max-width: 1024px) {
  .servicios-tarjetas { grid-template-columns: minmax(0, 1fr); max-width: 640px; gap: 2rem; }
}
@media (max-width: 900px) {
  .contacto__caja { grid-template-columns: minmax(0, 1fr); }
  .contacto__caja > .form { grid-column: 1; grid-row: auto; margin-top: 1.5rem; padding: 1.3rem; }
}
@media (max-width: 767px) {
  .servicios-inicio__puntos, .deco-franja, .claves__cruces { display: none; }
  .cta-movil {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 24px -14px rgba(0, 0, 0, .35);
  }
  .cta-movil .btn { display: block; width: 100%; text-align: center; }
  body { padding-bottom: 78px; }
  .boton-arriba { bottom: 90px; }
  .selector-version { bottom: 90px; }
  .tarjeta-texto { padding: 1.2rem; }
}