/* Primer acercamiento: complemento del sistema visual del sitio, activado solo en su nueva página.
   Las capturas son imágenes reales del producto; los mensajes de beneficio son HTML accesible. */
.tto-primer .tto-hero { background: radial-gradient(ellipse at 90% 30%, #dff1ef 0%, transparent 53%), linear-gradient(120deg, #f0f5fc, #fff); }
.tto-primer .tto-hero .tto-grid { grid-template-columns: 1fr 1.05fr; gap: 48px; }
.tto-primer .pa-breadcrumb { margin-bottom: 24px; font-size: 13px; color: #46586f; }
.tto-primer .pa-breadcrumb a { color: #235385; text-decoration: underline; text-underline-offset: 3px; }
.tto-primer .pa-breadcrumb span { padding: 0 8px; }
.tto-primer .pa-hero-media { padding: 22px; background: #fff; border: 1px solid #d4e3ed; border-radius: 22px; box-shadow: 0 24px 65px #164a7020; }
.tto-primer .pa-hero-media > strong { display: block; margin-bottom: 14px; color: #147474; font-size: 20px; line-height: 1.4; }
.tto-primer .pa-hero-media .tto-image > a { padding: 0; border: 0; }
.tto-primer .pa-pills { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 26px 0 0; gap: 10px; }
.tto-primer .pa-pills li { padding: 7px 12px; border-radius: 6px; color: #1f5467; background: #e6f2f3; font-size: 13px; font-weight: 700; }
.tto-primer .pa-benefits { padding: 0 0 64px; background: #f5f8fc; }
.tto-primer .pa-benefits .tto-card { border-top: 3px solid #148080; height: 100%; }
body.ttv-page .tto-primer .pa-benefits h2 { font-size: 22px !important; line-height: 1.35 !important; }
.tto-primer .pa-icon { display: block; color: #147474; font-size: 32px; margin-bottom: 14px; line-height: 1.2; }
.tto-primer .pa-content-grid { align-items: stretch; }
.tto-primer .pa-content-grid .tto-card { display: flex; flex-direction: column; }
.tto-primer .pa-content-grid .tto-card > a { margin-top: auto; padding-top: 10px; color: #1b65aa; text-decoration: underline; text-underline-offset: 4px; }
.tto-primer .pa-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.tto-primer .pa-journey li { padding: 26px; border: 1px solid #d6e2ef; border-radius: 12px; background: #fff; }
.tto-primer .pa-journey h3 { color: #235385; }
.tto-primer .pa-journey p { font-size: 15px; }
.tto-primer .pa-review { margin-top: 38px; }
.tto-primer .pa-review > a { box-shadow: 0 16px 44px #24476d12; }
.tto-primer .pa-continuity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tto-primer .pa-continuity a { display: flex; flex-direction: column; padding: 26px; border-radius: 12px; border: 1px solid #d7e2ef; background: #fff; color: #0f172a; }
.tto-primer .pa-continuity a:hover { border-color: #1b65aa; }
.tto-primer .pa-continuity a > strong { color: #235385; font-size: 20px; margin-bottom: 10px; }
.tto-primer .pa-continuity a > span:last-child { margin-top: auto; padding-top: 16px; color: #1b65aa; font-weight: 700; }
@media (max-width: 1000px) {
    .tto-primer .tto-hero .tto-grid { grid-template-columns: 1fr; }
    /* Reserva el área del acceso flotante existente sin moverlo en el resto del sitio. */
    .tto-primer .tto-hero .tto-grid > div:first-child > .tto-eyebrow { max-width: calc(100% - 150px); min-height: 65px; }
    .tto-primer .pa-hero-media { max-width: 720px; width: 100%; margin-inline: auto; }
    .tto-primer .pa-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .tto-primer .pa-hero-media { padding: 16px; border-radius: 14px; }
    .tto-primer .pa-hero-media > strong { font-size: 18px; }
    .tto-primer .pa-journey, .tto-primer .pa-continuity { grid-template-columns: 1fr; }
    .tto-primer .pa-benefits { padding-bottom: 44px; }
    .tto-primer .pa-breadcrumb { max-width: calc(100% - 130px); font-size: 12px; min-height: 40px; }
    .tto-primer .tto-hero .tto-grid > div:first-child > .tto-eyebrow { max-width: calc(100% - 132px); min-height: 65px; }
}