/* ========================================================= Real iarte — Obsidiana y oro, en clave de papel Toda la paleta vive en :root. Cambia estas variables y cambia el sitio. ========================================================= */ :root { --papel: oklch(96% 0.014 85); /* fondo marfil */ --papel-2: oklch(92.5% 0.02 83); /* bandas alternas */ --tinta: oklch(20% 0.012 60); /* obsidiana cálida */ --tinta-2: oklch(38% 0.014 60); /* texto secundario */ --oro: oklch(72% 0.105 80); --oro-hondo: oklch(50% 0.095 70); /* oro legible sobre papel */ --linea: oklch(20% 0.012 60 / .14); --noche: oklch(17% 0.01 60); --noche-2: oklch(22% 0.012 60); --noche-txt: oklch(93% 0.02 85); --noche-txt-2: oklch(78% 0.02 80); --error: oklch(48% 0.16 30); --ok: oklch(45% 0.1 150); --f-titulo: "Fraunces", Georgia, serif; --f-texto: "Jost", "Segoe UI", sans-serif; --t-0: clamp(.82rem, .8rem + .1vw, .88rem); --t-1: clamp(1rem, .97rem + .15vw, 1.08rem); --t-2: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); --t-3: clamp(1.9rem, 1.4rem + 2vw, 3.1rem); --t-4: clamp(2.5rem, 1.5rem + 4.4vw, 5.4rem); --ancho: 76rem; --gutter: clamp(1rem, 4vw, 2.5rem); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* entradas y salidas */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* movimiento en pantalla */ --cab: 4.4rem; color-scheme: light; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 1rem); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 var(--t-1)/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.sin-scroll { overflow: hidden; } h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.015em; text-wrap: balance; } h2 { font-size: var(--t-3); } em { font-style: italic; color: var(--oro-hondo); } p { margin: 0; text-wrap: pretty; } a { color: inherit; } button, select, input, textarea { font: inherit; color: inherit; } button, a, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--oro-hondo); outline-offset: 3px; } ::selection { background: var(--oro); color: var(--noche); } .envoltura { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; } .bloque { padding-block: clamp(4rem, 9vw, 7.5rem); } .bloque--alt { background: var(--papel-2); } .bloque--pegado { padding-top: clamp(2rem, 4vw, 3rem); } /* Vitrina: en CRM, Páginas y Marketing lo primero que se ve son los contenedores. El encabezado va compacto dentro de la misma sección, sin bloque aparte. */ .vitrina { padding-top: clamp(2rem, 4vw, 3.2rem); } .vitrina .sobretitulo { margin-bottom: .6rem; } .vitrina__titulo { font-size: var(--t-3); font-weight: 350; max-width: 24ch; font-variation-settings: "opsz" 144; } .texto-guia.vitrina__guia { max-width: 60ch; margin: .7rem 0 clamp(1.4rem, 3vw, 2.2rem); } .acciones.vitrina__accion { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); justify-content: center; } .oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .sobretitulo, .etiqueta { font-size: var(--t-0); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-hondo); margin-bottom: 1rem; } .etiqueta { margin-bottom: .7rem; } .nota { font-size: var(--t-0); color: var(--tinta-2); } .enlace { color: var(--oro-hondo); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-block: .2rem; } .enlace:hover { color: var(--tinta); } .titulo-ancho { max-width: 22ch; } .titulo-grande { font-size: var(--t-4); font-weight: 300; } .texto-guia { margin-top: 1.2rem; color: var(--tinta-2); max-width: 36ch; } .sello { display: inline-block; margin-left: .6rem; vertical-align: middle; font: 500 .68rem/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; padding: .35rem .55rem; background: var(--oro); color: var(--noche); } .saltar { position: absolute; left: -999px; top: .5rem; background: var(--tinta); color: var(--papel); padding: .7rem 1rem; z-index: 100; } .saltar:focus { left: .5rem; } /* ---------- Botones ---------- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .85rem 1.6rem; font-weight: 500; text-decoration: none; letter-spacing: .01em; border: 1px solid transparent; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out); } .boton:active { transform: scale(.97); } .boton--tinta { background: var(--tinta); color: var(--papel); } .boton--tinta:hover { background: var(--oro-hondo); } .boton--linea { border-color: var(--tinta); } .boton--linea:hover { background: var(--tinta); color: var(--papel); } .boton--oro { background: var(--oro); color: var(--noche); } .boton--oro:hover { background: oklch(80% 0.1 82); } .boton--ancho { width: 100%; } .acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; } /* ---------- Logo ---------- */ .logo { font: 500 1.45rem/1 var(--f-titulo); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; } .logo span { font-weight: 300; } .logo i { color: var(--oro-hondo); font-weight: 500; } .logo--claro i { color: var(--oro); } /* ---------- Cabecera y menú ---------- */ .cabecera { position: sticky; top: 0; z-index: 40; background: color-mix(in oklch, var(--papel) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: transform .3s var(--ease-out), border-color .2s ease; } .cabecera.con-fondo { border-bottom-color: var(--linea); } .cabecera.oculta { transform: translateY(-100%); } .cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: calc(var(--cab) - 1px); } /* + 1px de borde = --cab */ .menu { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem); } .menu ul { display: flex; gap: clamp(.9rem, 2.2vw, 1.9rem); list-style: none; margin: 0; padding: 0; } .menu ul a { text-decoration: none; font-size: .96rem; padding-block: .6rem; position: relative; } .menu ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease-out); } .menu ul a:hover::after, .menu ul a[aria-current="page"]::after { transform: scaleX(1); } .menu ul a[aria-current="page"] { color: var(--oro-hondo); } .menu__cta { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1.1rem; border: 1px solid var(--tinta); text-decoration: none; transition: background-color .2s, color .2s; } .menu__cta:hover, .menu__cta[aria-current="page"] { background: var(--tinta); color: var(--papel); } .menu-boton { display: none; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .4rem .2rem .4rem .6rem; background: none; border: 0; } .menu-boton__barras, .menu-boton__barras::before { display: block; width: 1.4rem; height: 1px; background: currentColor; position: relative; transition: transform .25s var(--ease-in-out); } .menu-boton__barras::before { content: ""; position: absolute; top: -6px; } .menu-boton__barras { top: 3px; } .menu-abierto .menu-boton__barras { transform: translateY(-3px) rotate(45deg); } .menu-abierto .menu-boton__barras::before { transform: translateY(6px) rotate(-90deg); } /* ---------- Portada (inicio) ---------- */ .portada { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: 2rem; border-bottom: 1px solid var(--linea); } .portada h1 { font-size: var(--t-4); font-weight: 350; font-variation-settings: "opsz" 144; } .portada__bajada { font: 300 var(--t-2)/1.4 var(--f-titulo); color: var(--tinta-2); max-width: 32ch; margin-top: 1.6rem; } .entra { animation: aparece .8s var(--ease-out) both; animation-delay: calc(var(--i) * .07s); } @keyframes aparece { from { opacity: 0; transform: translateY(14px); } } /* ---------- Cabeza de páginas internas ---------- */ .cabeza-pagina { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--linea); } .cabeza-pagina h1 { font-size: var(--t-4); font-weight: 350; max-width: 16ch; font-variation-settings: "opsz" 144; } .cabeza-pagina__bajada { font: 300 var(--t-2)/1.4 var(--f-titulo); color: var(--tinta-2); max-width: 40ch; margin-top: 1.4rem; } /* ---------- Estructuras ---------- */ .dos-col { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; } .dos-col__fija { position: sticky; top: calc(var(--cab) + 2rem); } .cabeza-seccion { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; } /* Pasos */ .pasos { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--tinta); } .pasos--4 { grid-template-columns: repeat(4, 1fr); } .pasos li { padding: 1.6rem 1.8rem 0 0; } .pasos li + li { padding-left: 1.8rem; border-left: 1px solid var(--linea); } .pasos__num { font: 300 var(--t-3)/1 var(--f-titulo); color: var(--oro-hondo); } .pasos h3 { font-size: var(--t-2); margin: .9rem 0 .5rem; } .pasos p { color: var(--tinta-2); } /* Banda oscura */ .banda-oscura { background: var(--noche); color: var(--noche-txt); padding-block: clamp(4rem, 8vw, 6.5rem); } .banda-oscura em, .banda-oscura .sobretitulo { color: var(--oro); } .banda-oscura__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem 4rem; align-items: end; } .banda-oscura p:not(.sobretitulo) { color: var(--noche-txt-2); margin-bottom: 1.6rem; } /* ---------- Planes ---------- */ .planes__explica { max-width: 60ch; color: var(--tinta-2); min-height: 3.2em; } .interruptor { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--tinta); padding: 3px; flex-shrink: 0; } .interruptor button { position: relative; z-index: 1; min-height: 2.75rem; background: none; border: 0; padding: .55rem 1.1rem; font-size: .92rem; transition: color .3s; } .interruptor button[aria-pressed="true"] { color: var(--papel); } .interruptor__marca { position: absolute; inset: 3px auto 3px 3px; width: calc(50% - 3px); background: var(--tinta); transition: transform .25s var(--ease-in-out); } .interruptor[data-modo="sin"] .interruptor__marca { transform: translateX(100%); } /* Cabecera de la página de planes + interruptor */ .planes-cabeza { margin-bottom: clamp(1.4rem, 3vw, 2rem); } .planes-cabeza .vitrina__titulo { max-width: 20ch; } .planes-cabeza__bajada { font: 300 var(--t-2)/1.4 var(--f-titulo); color: var(--tinta-2); max-width: 46ch; margin-top: 1rem; } .planes-control { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; margin-bottom: clamp(1.4rem, 3vw, 2rem); } .planes-control .planes__explica { flex: 1 1 22rem; min-height: 0; font-size: .95rem; } /* Cuatro tarjetas en cuadrícula 2×2: Start y Launch arriba, Growth y Scale abajo. */ .lista-planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); } .plan { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--papel); border: 1px solid var(--linea); transition: border-color .25s; } .plan:hover { border-color: oklch(72% 0.105 80 / .55); } .plan__cabeza { display: grid; gap: .5rem; } .plan__fila-nombre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .plan__nombre { font: 400 var(--t-3)/1 var(--f-titulo); letter-spacing: normal; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; } .plan__nombre .sello { margin-left: 0; } .plan__lema { font: italic 300 1.15rem/1.35 var(--f-titulo); color: var(--tinta-2); } /* Medidor de nivel: cuatro barras que suben */ .nivel { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.7rem; flex-shrink: 0; } .nivel i { width: .5rem; background: var(--linea); transition: background-color .25s; } .nivel i:nth-child(1) { height: 32%; } .nivel i:nth-child(2) { height: 55%; } .nivel i:nth-child(3) { height: 78%; } .nivel i:nth-child(4) { height: 100%; } .nivel i.on { background: var(--oro); } .plan__precio { font: 400 clamp(2.6rem, 1.9rem + 3vw, 4rem)/1 var(--f-titulo); font-variation-settings: "opsz" 144; font-variant-numeric: tabular-nums; padding-top: 1.1rem; border-top: 1px solid var(--linea); } .plan__precio small { display: block; font: 400 var(--t-0) var(--f-texto); color: var(--tinta-2); margin-top: .6rem; } .plan__cifra { display: inline-block; transition: opacity .16s var(--ease-out), transform .16s var(--ease-out); } .plan__cifra.cambia { opacity: 0; transform: translateY(-6px); } .plan__ahorro:empty { display: none; } .plan__ahorro { font-size: .92rem; color: var(--tinta-2); } .plan__ahorro s { text-decoration-thickness: 1px; opacity: .75; } .plan__ahorro b { color: var(--oro-hondo); font-weight: 600; } .plan__esencial { flex: 1; display: grid; align-content: start; gap: .9rem; } .plan__esencial .etiqueta { margin: 0; } .datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .dato { display: flex; align-items: center; gap: .75rem; padding: .85rem .9rem; background: oklch(93% 0.02 85 / .05); border: 1px solid var(--linea); min-width: 0; } .dato svg { width: 1.7rem; height: 1.7rem; flex-shrink: 0; fill: none; stroke: var(--oro); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .dato span { display: grid; font-size: .85rem; line-height: 1.25; color: var(--tinta-2); min-width: 0; } .dato b { font: 400 1.3rem/1.1 var(--f-titulo); color: var(--tinta); } .plan__hereda { font: italic 300 1.05rem/1.3 var(--f-titulo); color: var(--oro); } .extras { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .extras li { display: flex; gap: .6rem; align-items: baseline; font-size: .95rem; line-height: 1.35; } .extras svg { width: .95rem; height: .95rem; flex-shrink: 0; fill: none; stroke: var(--oro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: translateY(.15rem); } .plan__boton { align-self: stretch; } .plan__todo { border-top: 1px solid var(--linea); padding-top: .9rem; } .plan__todo summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--oro); font-weight: 500; padding-block: .3rem; } .plan__todo summary::-webkit-details-marker { display: none; } .plan__todo summary::after { content: "+"; font: 300 1.5rem/1 var(--f-texto); transition: transform .2s var(--ease-out); } .plan__todo[open] summary::after { transform: rotate(45deg); } .plan__para { margin: .6rem 0 1rem; font-size: .95rem; color: var(--tinta-2); } .financiero { margin-top: 1.4rem; padding: 1.2rem 1.3rem; background: var(--papel); } .financiero h4 { margin-bottom: .35rem; font-size: 1.1rem; } .financiero p { color: var(--tinta-2); font-size: .95rem; } .plan--oro { background: var(--noche); color: var(--noche-txt); border-color: transparent; } .plan--elegido { outline: 2px solid var(--oro); outline-offset: 3px; } .plan--oro .plan__lema, .plan--oro .plan__precio small, .plan--oro .financiero p, .plan--oro .plan__ahorro, .plan--oro .plan__para { color: var(--noche-txt-2); } .plan--oro .plan__ahorro b { color: var(--oro); } .plan--oro .etiqueta { color: var(--oro); } .plan--oro .viñetas li { border-bottom-color: oklch(93% 0.02 85 / .12); } .plan--oro .viñetas li::before { background: var(--oro); } .plan--oro .financiero { background: var(--noche-2); } .plan--oro :focus-visible { outline-color: var(--oro); } /* Condiciones de todos los planes, en tres íconos */ .garantias { list-style: none; margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem clamp(1rem, 3vw, 2.5rem); } .garantias li { display: flex; gap: .9rem; align-items: center; } .garantias svg { width: 2rem; height: 2rem; flex-shrink: 0; fill: none; stroke: var(--oro); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .garantias span { display: grid; font-size: .92rem; line-height: 1.3; color: var(--tinta-2); } .garantias b { font-weight: 500; color: var(--tinta); font-size: 1rem; } /* Primer Paso: una franja, no una sección */ .primer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem clamp(1.2rem, 3vw, 2.2rem); margin-top: clamp(1.8rem, 4vw, 2.8rem); padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 2rem); border: 1px dashed oklch(72% 0.105 80 / .5); scroll-margin-top: 6rem; } .primer__cifra { display: grid; justify-items: center; } .primer__cifra span { font: 300 var(--t-4)/1 var(--f-titulo); color: var(--oro); } .primer__cifra small { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); } .primer h2 { font-size: var(--t-2); margin-bottom: .4rem; } .primer h2 em { font-size: .8em; } .primer p { color: var(--tinta-2); font-size: .95rem; max-width: 62ch; } /* Cómo se paga: tres nodos unidos por una línea */ .ruta { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 0; } .ruta li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1rem; align-items: start; position: relative; padding-bottom: 1.6rem; } .ruta li:not(:last-child)::before { content: ""; position: absolute; left: 1.7rem; top: 3.4rem; bottom: .2rem; width: 1px; background: linear-gradient(var(--oro), transparent); } .ruta__nodo { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border: 1px solid var(--oro); border-radius: 50%; font: 400 1rem/1 var(--f-titulo); color: var(--oro); background: var(--papel); } .ruta__nodo svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--oro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ruta h3 { font-size: var(--t-2); margin: .3rem 0 .25rem; } .ruta p { color: var(--tinta-2); font-size: .95rem; } .preguntas__cta { margin-top: 1.8rem; align-items: center; } #pago .dos-col > div > .sobretitulo { margin-bottom: 1rem; } .viñetas { list-style: none; margin: 0; padding: 0; } .viñetas li { padding: .6rem 0 .6rem 1.6rem; border-bottom: 1px solid var(--linea); position: relative; } .viñetas li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: .8rem; height: 1px; background: var(--oro-hondo); } .viñetas b { font-weight: 600; } .viñetas__premio { color: var(--oro-hondo); font-weight: 500; } .lema { font: italic 300 var(--t-2)/1.35 var(--f-titulo); color: var(--tinta-2); margin: 1rem 0 1.8rem; max-width: 26ch; } .precio-grande { font: 400 var(--t-3) var(--f-titulo); margin-bottom: 1.8rem; } .precio-grande small { font: 400 var(--t-0) var(--f-texto); color: var(--tinta-2); margin-left: .4rem; } /* Tablas */ .tabla-envoltura { overflow-x: auto; margin-top: 2.5rem; -webkit-overflow-scrolling: touch; } .tabla-envoltura:focus-visible { outline-offset: 6px; } .tabla-comparativa, .tabla-simple { width: 100%; border-collapse: collapse; font-size: .95rem; } .tabla-comparativa { min-width: 44rem; } .tabla-comparativa th, .tabla-comparativa td { padding: .85rem .8rem; text-align: center; border-bottom: 1px solid var(--linea); vertical-align: middle; } .tabla-comparativa thead th { font: 400 var(--t-2) var(--f-titulo); border-bottom: 1px solid var(--tinta); padding-bottom: 1rem; } .tabla-comparativa tbody th { text-align: left; font-weight: 400; color: var(--tinta); width: 32%; } .tabla-comparativa tbody td { color: var(--tinta-2); } .tabla-comparativa .grupo th { padding-top: 2rem; font-size: var(--t-0); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-hondo); border-bottom-color: var(--tinta); } .tabla-comparativa .col-oro { background: color-mix(in oklch, var(--oro) 14%, transparent); } .tabla-comparativa thead .col-oro { background: var(--noche); color: var(--noche-txt); } .icono-si { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--tinta); stroke-width: 1.6; vertical-align: middle; } .guion { color: oklch(20% 0.012 60 / .35); } .tabla-simple { margin-top: 0; } .tabla-simple th, .tabla-simple td { padding: .95rem .6rem; text-align: right; border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; } .tabla-simple th:first-child { text-align: left; } .tabla-simple thead th { font-size: var(--t-0); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-hondo); border-bottom-color: var(--tinta); } .tabla-simple tbody th { font: 400 1.15rem var(--f-titulo); } .tabla-simple td:nth-child(3) { font-weight: 500; } /* Preguntas */ .preguntas { border-top: 1px solid var(--tinta); } .preguntas details { border-bottom: 1px solid var(--linea); } .preguntas summary { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 1.2rem 0; cursor: pointer; list-style: none; font: 400 1.2rem/1.3 var(--f-titulo); } .preguntas summary::-webkit-details-marker { display: none; } .preguntas summary::after { content: "+"; font: 300 1.5rem/1 var(--f-texto); transition: transform .2s var(--ease-out); } .preguntas details[open] summary::after { transform: rotate(45deg); } .preguntas details p { padding: 0 2rem 1.4rem 0; color: var(--tinta-2); } .preguntas a { color: var(--oro-hondo); } /* ---------- Servicios ---------- */ .con-indice { display: grid; grid-template-columns: 14rem 1fr; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); } .indice { position: sticky; top: calc(var(--cab) + 2rem); align-self: start; } .indice ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linea); } .indice a { display: block; padding: .5rem 0 .5rem 1rem; margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; color: var(--tinta-2); font-size: .95rem; transition: color .2s, border-color .2s; } .indice a:hover, .indice a.activo { color: var(--tinta); border-left-color: var(--oro-hondo); } .servicio { padding-bottom: clamp(3rem, 6vw, 5rem); margin-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--linea); scroll-margin-top: calc(var(--cab) + 1.5rem); } .servicio:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .servicio__num { display: block; font-size: .78rem; letter-spacing: .1em; color: var(--tinta-2); margin-bottom: .8rem; } .servicio__intro { font: 300 var(--t-2)/1.4 var(--f-titulo); color: var(--tinta-2); margin: 1.2rem 0 2rem; max-width: 40ch; } .servicio > .enlace, .servicio > .boton { margin-top: 1.8rem; } .escalones { margin: 0; border-top: 1px solid var(--tinta); } .escalones div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--linea); } .escalones dt { font: 400 1.2rem var(--f-titulo); } .escalones dd { margin: 0; color: var(--tinta-2); } .escalones .es-oro dt { color: var(--oro-hondo); } .nota-caja { background: var(--papel-2); padding: 1.3rem 1.5rem; margin-bottom: 2rem; display: grid; gap: .7rem; font-size: .96rem; color: var(--tinta-2); } .nota-caja b { color: var(--tinta); } /* ---------- Catálogo ---------- */ .catalogo__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .catalogo__texto h2 { margin-bottom: 1.6rem; } .banda-oscura .nota { color: var(--noche-txt-2); } .reglas { list-style: none; margin: 0 0 1.4rem; padding: 0; } .reglas li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid oklch(93% 0.02 85 / .14); color: var(--noche-txt-2); } .reglas b { color: var(--noche-txt); font-weight: 500; font-variant-numeric: tabular-nums; } .cotizador { background: var(--papel); color: var(--tinta); padding: clamp(1.4rem, 3vw, 2.4rem); } .cotizador__campo { font: 400 var(--t-2) var(--f-titulo); display: block; } .cotizador__entrada { display: flex; align-items: baseline; gap: .6rem; margin: .6rem 0 .8rem; border-bottom: 1px solid var(--tinta); } .cotizador__entrada input { width: 100%; min-width: 0; border: 0; background: none; font: 400 var(--t-4)/1.1 var(--f-titulo); color: var(--tinta); padding: 0; font-variant-numeric: tabular-nums; } .cotizador__entrada input:focus { outline: none; } .cotizador__entrada:focus-within { border-bottom: 2px solid var(--oro-hondo); } .cotizador__entrada span { color: var(--tinta-2); } input[type="range"] { width: 100%; accent-color: var(--tinta); margin: .6rem 0 1rem; min-height: 1.5rem; } .atajos { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; } .atajos button { min-width: 3rem; min-height: 2.75rem; background: none; border: 1px solid var(--linea); padding: .35rem .8rem; font-size: .9rem; transition: border-color .2s, background-color .2s; } .atajos button:hover { border-color: var(--tinta); } .cuenta { margin: 0 0 1.4rem; } .cuenta div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--linea); font-size: .95rem; } .cuenta dt { color: var(--tinta-2); } .cuenta dd { margin: 0; font-variant-numeric: tabular-nums; } .cuenta__regalo dd { color: var(--oro-hondo); } .cuenta .cuenta__total { border-bottom: 0; padding-top: 1rem; align-items: baseline; } .cuenta__total dt { color: var(--tinta); font-weight: 500; } .cuenta__total dd { font: 400 var(--t-3)/1 var(--f-titulo); } .cotizador .nota { margin-top: .8rem; text-align: center; } /* ---------- Nosotros ---------- */ .prosa { display: grid; gap: 1.3rem; font-size: 1.1rem; max-width: 62ch; } .prosa p:first-child { font: 300 var(--t-2)/1.45 var(--f-titulo); } .principios { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--tinta); } .principios article { padding: 1.6rem 1.6rem 0 0; } .principios article + article { padding-left: 1.6rem; border-left: 1px solid var(--linea); } .principios h3 { font-size: var(--t-2); margin-bottom: .7rem; } .principios p { color: var(--tinta-2); } /* ---------- Contacto ---------- */ .contacto__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; } .campo { display: flex; flex-direction: column; gap: .45rem; } .campo--ancho { grid-column: 1 / -1; } .campo label { font-weight: 500; font-size: .95rem; } .req { color: var(--oro-hondo); } .opcional { font-weight: 400; color: var(--tinta-2); } .campo input, .campo select, .campo textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; font-size: 1rem; background-color: oklch(98.5% 0.008 85); color: var(--tinta); border: 1px solid oklch(20% 0.012 60 / .3); border-radius: 0; transition: border-color .2s, box-shadow .2s; } .campo textarea { resize: vertical; min-height: 7rem; } .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta-2); } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px color-mix(in oklch, var(--oro) 40%, transparent); } .campo [aria-invalid="true"] { border-color: var(--error); } .campo__error { min-height: 1.2em; font-size: .88rem; color: var(--error); } .campo__error:empty { min-height: 0; } .estado:empty { display: none; } .estado { padding: 1rem 1.2rem; font-size: .96rem; } .estado--ok { background: color-mix(in oklch, var(--ok) 12%, var(--papel)); color: var(--ok); } .estado--aviso { background: var(--papel-2); color: var(--tinta); } .estado a { color: var(--oro-hondo); font-weight: 500; } .contacto__lado { display: grid; gap: 2rem; padding-top: .4rem; } .contacto__lado > div { border-top: 1px solid var(--tinta); padding-top: 1rem; } .contacto__lado p:not(.etiqueta) { color: var(--tinta-2); } .lista-numerada { margin: 0; padding-left: 1.2rem; color: var(--tinta-2); display: grid; gap: .5rem; } /* ---------- Cierre y pie ---------- */ .cierre { background: var(--tinta); color: var(--noche-txt); padding-block: clamp(4rem, 9vw, 7rem); } .cierre__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem 4rem; align-items: end; } .cierre h2 { font-size: var(--t-4); font-weight: 300; } .cierre p { color: var(--noche-txt-2); margin-bottom: 1.6rem; } .cierre :focus-visible, .banda-oscura :focus-visible, .pie :focus-visible { outline-color: var(--oro); } /* Renglón bajo los botones del cierre: enlaza una página con la siguiente. */ .pie { background: var(--noche); color: var(--noche-txt-2); font-size: .95rem; } .pie__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem); } .pie .logo { color: var(--noche-txt); font-size: 1.7rem; } .pie__marca p { margin-top: 1rem; max-width: 30ch; } .pie h2 { font: 500 var(--t-0) var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin-bottom: 1rem; } .pie ul { list-style: none; margin: 0; padding: 0; } .pie li a, .pie p a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: .3rem; text-decoration: none; } .pie a:hover { color: var(--noche-txt); } .pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.4rem; border-top: 1px solid oklch(93% 0.02 85 / .1); font-size: var(--t-0); } /* ---------- Revelado al hacer scroll ---------- */ [data-revela] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } [data-revela].visible { opacity: 1; transform: none; } .pasos li:nth-child(2), .principios article:nth-child(2) { transition-delay: .06s; } .pasos li:nth-child(3), .principios article:nth-child(3) { transition-delay: .12s; } .pasos li:nth-child(4), .principios article:nth-child(4) { transition-delay: .18s; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .menu-boton { display: inline-flex; } .menu { position: fixed; inset: var(--cab) 0 0; z-index: 39; flex-direction: column; align-items: stretch; gap: 1.5rem; padding: 1.5rem var(--gutter) 2rem; background: var(--papel); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility 0s .18s; } .menu-abierto .menu { visibility: visible; opacity: 1; transform: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); } .menu ul { flex-direction: column; gap: 0; } .menu ul a { display: block; padding: 1rem 0; font: 400 1.8rem var(--f-titulo); border-bottom: 1px solid var(--linea); } .menu ul a::after { display: none; } .menu__cta { justify-content: center; min-height: 3.2rem; } .cabecera.menu-abierto { background: var(--papel); border-bottom-color: var(--linea); } .dos-col, .catalogo__grid, .cierre__grid, .banda-oscura__grid, .contacto__grid, .con-indice { grid-template-columns: 1fr; } .dos-col__fija { position: static; } .indice { position: static; } .indice ol { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; } .indice a { border: 1px solid var(--linea); margin: 0; padding: .55rem .9rem; } .pasos--4, .principios { grid-template-columns: 1fr 1fr; } .pasos--4 li:nth-child(3), .principios article:nth-child(3) { padding-left: 0; border-left: 0; } .pasos--4 li, .principios article { padding-bottom: 1.6rem; } .pie__grid { grid-template-columns: 1fr 1fr; } .pie__marca { grid-column: 1 / -1; } } @media (max-width: 900px) { .lista-planes { grid-template-columns: 1fr; } } @media (max-width: 640px) { .pasos, .pasos--4, .principios, .formulario { grid-template-columns: 1fr; } .pasos li, .pasos li + li, .principios article, .principios article + article { padding: 1.4rem 0; border-left: 0; border-bottom: 1px solid var(--linea); } .interruptor { width: 100%; } .garantias { grid-template-columns: 1fr; } .primer { grid-template-columns: 1fr; justify-items: start; } .primer__cifra { justify-items: start; grid-auto-flow: column; gap: .8rem; align-items: baseline; } .primer .boton { align-self: stretch; } .escalones div { grid-template-columns: 1fr; gap: .2rem; } .reglas li { grid-template-columns: 1fr; gap: .1rem; } .pie__grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .entra { animation: desvanece .3s ease both; animation-delay: 0s; } [data-revela], .menu, .plan__cifra.cambia { transform: none !important; } .cabecera.oculta { transform: none; } .interruptor__marca { transition: none; } } @keyframes desvanece { from { opacity: 0; } } @keyframes letra-suave { from { opacity: 0; } to { opacity: 1; } } /* ---------- Portada con imagen de fondo (inicio) ---------- */ .portada--imagen { position: relative; isolation: isolate; overflow: hidden; background: var(--noche); color: var(--noche-txt); border-bottom: 0; min-height: min(92vh, 54rem); display: flex; flex-direction: column; justify-content: flex-end; padding-top: clamp(5rem, 12vw, 9rem); } .portada__fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; animation: fondo-entra 1.4s var(--ease-out) both; } /* Velo: oscuro donde va el texto, abierto donde está la ilustración */ .portada--imagen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, oklch(15% 0.012 60 / .92) 0%, oklch(15% 0.012 60 / .72) 38%, oklch(15% 0.012 60 / .1) 72%), linear-gradient(0deg, oklch(15% 0.012 60 / .75) 0%, transparent 38%); } @keyframes fondo-entra { from { opacity: 0; transform: scale(1.04); } } .portada--imagen em, .portada--imagen .sobretitulo { color: var(--oro); } .portada--imagen .portada__bajada { color: var(--noche-txt-2); } .portada--imagen :focus-visible { outline-color: var(--oro); } .boton--linea-clara { border-color: oklch(93% 0.02 85 / .7); color: var(--noche-txt); } .boton--linea-clara:hover { background: var(--noche-txt); color: var(--noche); } @media (max-width: 960px) { .portada--imagen { min-height: 0; } .portada__fondo { object-position: 78% 30%; } .portada--imagen::before { background: linear-gradient(180deg, oklch(15% 0.012 60 / .9) 0%, oklch(15% 0.012 60 / .8) 55%, oklch(15% 0.012 60 / .62) 80%, oklch(15% 0.012 60 / .85) 100%); } } @media (prefers-reduced-motion: reduce) { .portada__fondo { animation: desvanece .3s ease both; } } /* ========================================================= INICIO — lo Real y el Arte, fundidos A la izquierda, el escritorio (cálido, dorado, bordes rectos); a la derecha, la ilustración (violeta nocturno, neón, bordes suaves). No hay línea entre los dos: el fondo cambia de uno a otro sin cortes. ========================================================= */ .tema { --real: oklch(17% 0.016 55); --real-txt: oklch(93% 0.02 80); --real-txt-2: oklch(78% 0.03 70); --arte: oklch(19% 0.07 285); --arte-2: oklch(25% 0.1 292); --arte-txt: oklch(95% 0.02 290); --arte-txt-2: oklch(82% 0.045 290); --neon-azul: oklch(78% 0.13 235); --neon-violeta: oklch(68% 0.21 300); --neon-magenta: oklch(70% 0.23 350); --neon: linear-gradient(90deg, var(--neon-azul), var(--neon-violeta), var(--neon-magenta)); /* Un solo fondo para toda la página: de lo real (cálido) a lo arte (violeta), pasando por el rosado del atardecer. Sin cortes entre secciones. */ --mezcla: linear-gradient(90deg, var(--real) 0%, var(--real) 16%, oklch(18.5% 0.035 25) 50%, var(--arte) 84%, var(--arte) 100%); background: var(--real); } @supports (background: linear-gradient(in oklch 90deg, red, blue)) { .tema { --mezcla: linear-gradient(in oklch 90deg, var(--real) 12%, var(--arte) 88%); } } .tema main { position: relative; isolation: isolate; background: /* luz de ventana sobre el escritorio */ radial-gradient(42rem 30rem at 4% 14%, oklch(62% 0.13 60 / .16), transparent 70%), radial-gradient(36rem 28rem at 8% 52%, oklch(60% 0.12 55 / .12), transparent 70%), radial-gradient(40rem 30rem at 2% 86%, oklch(62% 0.13 60 / .12), transparent 70%), /* atardecer en la zona donde se juntan */ radial-gradient(48rem 34rem at 50% 32%, oklch(58% 0.14 20 / .09), transparent 70%), radial-gradient(44rem 30rem at 48% 74%, oklch(56% 0.15 340 / .08), transparent 70%), /* el cielo de la ilustración */ radial-gradient(46rem 34rem at 98% 10%, oklch(58% 0.2 335 / .24), transparent 70%), radial-gradient(42rem 32rem at 92% 44%, oklch(55% 0.17 255 / .22), transparent 70%), radial-gradient(46rem 34rem at 100% 80%, oklch(55% 0.2 300 / .22), transparent 70%), var(--mezcla); } /* Estrellas que aparecen poco a poco hacia la derecha */ .tema main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 20px 30px, oklch(96% 0.02 290 / .85) 50%, transparent 51%), radial-gradient(1px 1px at 140px 90px, oklch(96% 0.02 290 / .6) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 230px 190px, oklch(96% 0.02 290 / .75) 50%, transparent 51%), radial-gradient(1px 1px at 80px 250px, oklch(96% 0.02 290 / .55) 50%, transparent 51%), radial-gradient(1px 1px at 190px 300px, oklch(96% 0.02 290 / .5) 50%, transparent 51%); background-size: 280px 330px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 85%); mask-image: linear-gradient(90deg, transparent 30%, #000 85%); } /* Cabecera oscura en el inicio: "Real" cálido, "iarte" violeta */ .tema .cabecera { background: oklch(15% 0.012 60 / .86); color: var(--real-txt); } .tema .cabecera.con-fondo { border-bottom-color: oklch(93% 0.02 85 / .1); } .tema .logo span { color: oklch(84% 0.1 300); } .tema .logo i { color: var(--oro); } .tema .menu ul a[aria-current="page"] { color: var(--oro); } .tema .menu__cta { border-color: oklch(93% 0.02 85 / .6); } .tema .menu__cta:hover { background: var(--real-txt); color: var(--real); } .tema :focus-visible { outline-color: var(--oro); } /* Portada: sin escalera, el texto ocupa la mitad real */ .pagina-inicio .portada--imagen { min-height: min(88vh, 50rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); } .pagina-inicio .portada__texto { max-width: 38rem; } .pagina-inicio .portada--imagen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: -1; background: var(--mezcla); -webkit-mask-image: linear-gradient(to top, #000 8%, transparent); mask-image: linear-gradient(to top, #000 8%, transparent); } /* ---------- Secciones: dos columnas sobre el mismo fondo ---------- */ .split { position: relative; color: var(--arte-txt); padding-block: clamp(4.5rem, 9vw, 8rem); } .split__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(4rem, 10vw, 9rem); align-items: start; } .split h2 { font-size: var(--t-3); } .split__texto { margin-top: 1.3rem; max-width: 40ch; } /* Lado real: cálido, sobrio */ .split__real { color: var(--real-txt); } .split__real em, .split__real .sobretitulo { color: var(--oro); } .split__real .split__texto { color: var(--real-txt-2); } .split__real .enlace { margin-top: 1.8rem; display: inline-block; } .enlace--claro { color: var(--oro); } .enlace--claro:hover { color: var(--real-txt); } /* Lado arte: luminoso */ .split__arte .split__texto { margin-top: 0; color: var(--arte-txt-2); } /* Fichas de servicios, como los íconos de la ilustración */ .fichas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .ficha { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem 1.3rem 1.5rem; text-decoration: none; color: var(--arte-txt); background: oklch(30% 0.1 295 / .38); border: 1px solid oklch(78% 0.13 300 / .28); border-radius: 16px; transition: border-color .2s ease, background-color .2s ease, transform .2s var(--ease-out); } .ficha__icono { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: .5rem; border-radius: 12px; background: linear-gradient(135deg, oklch(55% 0.19 260), oklch(50% 0.22 305) 55%, oklch(55% 0.23 350)); box-shadow: 0 0 22px oklch(68% 0.21 300 / .45), inset 0 1px 0 oklch(100% 0 0 / .25); } .ficha__icono svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: oklch(98% 0.01 290); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ficha h3 { font-size: 1.3rem; } .ficha p { color: var(--arte-txt-2); font-size: .95rem; } .ficha:hover { border-color: oklch(80% 0.15 300 / .7); background: oklch(34% 0.12 295 / .5); } @media (hover: hover) and (pointer: fine) { .ficha:hover { transform: translateY(-3px); } } /* Trayecto: la estela de luz con sus nodos */ .trayecto { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 2rem; } .trayecto::before { content: ""; position: absolute; left: 1.2rem; top: 1rem; bottom: 1rem; width: 2px; margin-left: -1px; background: linear-gradient(180deg, var(--neon-azul), var(--neon-violeta), var(--neon-magenta)); opacity: .7; } .trayecto li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1.2rem; align-items: start; position: relative; } .trayecto__nodo { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font: 500 1rem var(--f-titulo); color: var(--arte-txt); background: var(--arte-2); border: 1px solid oklch(80% 0.14 300 / .7); box-shadow: 0 0 16px oklch(68% 0.21 300 / .5); } .trayecto h3 { font-size: var(--t-2); margin: .2rem 0 .35rem; } .trayecto p { color: var(--arte-txt-2); } /* Niveles */ .niveles { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .niveles a { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: baseline; padding: 1rem 1.2rem; border-radius: 14px; text-decoration: none; color: var(--arte-txt); background: oklch(28% 0.09 292 / .4); border: 1px solid oklch(78% 0.13 300 / .2); transition: border-color .2s ease, background-color .2s ease; } .niveles a:hover { border-color: oklch(80% 0.15 300 / .6); background: oklch(32% 0.11 292 / .55); } .niveles__nom { font: 400 1.35rem/1.1 var(--f-titulo); } .niveles__frase { grid-column: 1 / -1; grid-row: 2; font: italic 300 .98rem/1.35 var(--f-titulo); color: var(--arte-txt-2); } .niveles__pre { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; } .niveles__oro a { border: 1px solid transparent; background: linear-gradient(var(--arte-2), var(--arte-2)) padding-box, var(--neon) border-box; box-shadow: 0 0 28px oklch(68% 0.21 300 / .3); } .niveles__oro a:hover { background: linear-gradient(oklch(29% 0.12 292), oklch(29% 0.12 292)) padding-box, var(--neon) border-box; } .niveles .sello { background: var(--neon); color: oklch(15% 0.02 290); } /* Cifras del catálogo */ .cifras { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 1.8rem 0 2rem; } .cifras dt { font-size: var(--t-0); letter-spacing: .14em; text-transform: uppercase; color: oklch(84% 0.1 300); } .cifras dd { margin: .3rem 0 0; font: 400 var(--t-2) var(--f-titulo); font-variant-numeric: tabular-nums; } .boton--neon, .tema .cierre .boton--oro { color: oklch(98% 0.01 290); background: linear-gradient(90deg, oklch(50% 0.2 285), oklch(50% 0.22 335)); box-shadow: 0 0 24px oklch(62% 0.22 320 / .35); } .boton--neon:hover, .tema .cierre .boton--oro:hover { background: linear-gradient(90deg, oklch(56% 0.2 285), oklch(56% 0.22 335)); } /* El cierre del inicio usa el mismo fondo */ .tema .cierre { background: transparent; } .pagina-inicio .cierre__grid { grid-template-columns: 1fr 1fr; column-gap: clamp(4rem, 10vw, 9rem); } .tema .cierre h2 { color: var(--real-txt); } .tema .cierre p { color: var(--arte-txt-2); } .tema .pie { border-top: 1px solid oklch(93% 0.02 85 / .08); } /* ---------- Pantallas angostas: las columnas se apilan ---------- */ @media (max-width: 960px) { .tema .menu, .tema .cabecera.menu-abierto { background: oklch(15% 0.012 60); } .tema .menu ul a { border-bottom-color: oklch(93% 0.02 85 / .12); } .split__grid, .pagina-inicio .cierre__grid { grid-template-columns: 1fr; row-gap: 2.5rem; } .split { padding-block: clamp(3.5rem, 10vw, 5rem); } .tema main::before { -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 90%); mask-image: linear-gradient(90deg, transparent 15%, #000 90%); } } @media (max-width: 640px) { .fichas { grid-template-columns: 1fr; } } /* ========================================================= INICIO — pantallas completas y franjas de compra En escritorio cada sección mide exactamente una pantalla bajo la cabecera, con su franja de compra al pie. En móvil, alturas naturales. ========================================================= */ .pantalla { display: flex; flex-direction: column; } .pantalla__cuerpo { flex: 1; display: flex; align-items: center; } .pantalla__cuerpo > .envoltura { margin-inline: auto; } .pagina-inicio .split.pantalla { padding-block: 0; } .pagina-inicio .split .pantalla__cuerpo { padding-block: clamp(4rem, 8vw, 6.5rem); } /* ---------- Franja de compra ---------- */ .apuro { position: relative; z-index: 1; color: var(--real-txt); background: linear-gradient(90deg, oklch(13% 0.014 55 / .92), oklch(15% 0.05 320 / .9) 55%, oklch(15% 0.07 285 / .92)); border-block: 1px solid oklch(78% 0.1 320 / .22); } .apuro__cinta { overflow: hidden; border-bottom: 1px solid oklch(93% 0.02 85 / .08); } .apuro__pista { display: flex; width: max-content; animation: cinta 48s linear infinite; } .apuro__pista span { display: inline-flex; align-items: center; gap: 1.1rem; padding: .55rem 0 .55rem 1.1rem; font: 500 .74rem/1 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: oklch(86% 0.07 75); } .apuro__pista span::after { content: "✦"; color: oklch(80% 0.14 320); letter-spacing: 0; } @keyframes cinta { to { transform: translateX(-50%); } } .apuro__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; padding-block: 1.15rem; } .apuro__texto { font: 300 var(--t-2)/1.3 var(--f-titulo); max-width: 52ch; color: var(--real-txt-2); } .apuro__texto b { font-weight: 500; color: var(--real-txt); } .apuro .boton { flex-shrink: 0; } .apuro .boton span { display: inline-block; transition: transform .2s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .apuro .boton:hover span { transform: translateX(3px); } } /* La franja del hero va sobre la imagen */ .portada--imagen .apuro { background: linear-gradient(90deg, oklch(12% 0.012 55 / .78), oklch(14% 0.05 310 / .62)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ---------- Escritorio: una sección = una pantalla ---------- */ @media (min-width: 961px) { .pagina-inicio .pantalla { min-height: calc(100svh - var(--cab)); } .pagina-inicio .portada--imagen.pantalla { padding: 0; justify-content: stretch; } .pagina-inicio .portada--imagen .pantalla__cuerpo { padding-block: clamp(2rem, 6vh, 4rem); } .pagina-inicio .split .pantalla__cuerpo { padding-block: clamp(1.5rem, 5vh, 4rem); } } /* Pantallas bajas (portátiles de 768px): se compacta lo secundario */ @media (min-width: 961px) and (max-height: 820px) { .pagina-inicio .portada h1 { font-size: clamp(2.4rem, 1rem + 6.2vh, 4.6rem); } .pagina-inicio .portada__bajada { margin-top: 1rem; font-size: 1.2rem; } .pagina-inicio .acciones { margin-top: 1.4rem; } .pagina-inicio .split h2 { font-size: clamp(1.8rem, .6rem + 3.6vh, 2.8rem); } .niveles__frase { display: none; } .niveles a { padding-block: .8rem; } .trayecto { gap: 1.2rem; } .ficha { padding: 1.1rem 1.1rem 1.2rem; } .ficha__icono { width: 2.5rem; height: 2.5rem; margin-bottom: .2rem; } .apuro__fila { padding-block: .8rem; } .apuro__texto { font-size: 1.15rem; } } @media (max-width: 640px) { .apuro__fila { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .apuro__pista { animation: none; } /* la cinta queda quieta, en una sola línea */ } /* ========================================================= PÁGINAS — contenedores con el hero de cada proyecto ========================================================= */ .enlaces-capitulo { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin-top: 1.6rem; } .enlaces-capitulo .enlace { margin-top: 0; } .proyectos { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } .proyecto { display: flex; flex-direction: column; text-align: left; padding: 0; width: 100%; background: var(--noche); color: var(--noche-txt); border: 1px solid oklch(20% 0.012 60 / .5); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s ease; } .proyecto__navegador { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; background: var(--noche-2); font-size: .78rem; color: var(--noche-txt-2); } .proyecto__navegador i { width: .55rem; height: .55rem; border-radius: 50%; background: oklch(93% 0.02 85 / .25); } .proyecto__navegador span { margin-left: .6rem; padding: .2rem .7rem; border-radius: 99px; background: oklch(15% 0.012 60); flex: 1; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .proyecto__pantalla { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; } .proyecto__pantalla img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .6s var(--ease-out); } .proyecto__abrir { position: absolute; left: 50%; bottom: 1.2rem; transform: translate(-50%, .5rem); opacity: 0; padding: .7rem 1.2rem; background: var(--oro); color: var(--noche); font-weight: 500; font-size: .92rem; white-space: nowrap; transition: opacity .2s ease, transform .25s var(--ease-out); } .proyecto__pie { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: 1.1rem 1.3rem 1.3rem; } .proyecto__nombre { font: 400 var(--t-2)/1.1 var(--f-titulo); } .proyecto__rubro { align-self: center; font-size: var(--t-0); letter-spacing: .12em; text-transform: uppercase; color: var(--oro); } .proyecto__resumen { grid-column: 1 / -1; color: var(--noche-txt-2); font-size: .95rem; } .proyecto:focus-visible { outline: 3px solid var(--oro-hondo); outline-offset: 4px; } .proyecto:focus-visible .proyecto__abrir { opacity: 1; transform: translate(-50%, 0); } @media (hover: hover) and (pointer: fine) { .proyecto:hover { transform: translateY(-4px); box-shadow: 0 18px 40px oklch(20% 0.02 60 / .25); } .proyecto:hover .proyecto__pantalla img { transform: scale(1.03); } .proyecto:hover .proyecto__abrir { opacity: 1; transform: translate(-50%, 0); } } @media (hover: none) { .proyecto__abrir { opacity: 1; transform: translate(-50%, 0); } } /* ---------- Visor a pantalla completa ---------- */ .visor { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--noche); color: var(--noche-txt); display: none; flex-direction: column; } .visor[open] { display: flex; animation: visor-entra .28s var(--ease-out); } .visor::backdrop { background: oklch(10% 0.01 60 / .7); } @keyframes visor-entra { from { opacity: 0; transform: scale(.985); } } .visor__barra { display: flex; align-items: center; gap: 1rem; min-height: 3.4rem; padding: .4rem clamp(.6rem, 2vw, 1.2rem); padding-top: max(.4rem, env(safe-area-inset-top)); background: var(--noche); border-bottom: 1px solid oklch(93% 0.02 85 / .1); } .visor__volver { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem 1rem; background: var(--oro); color: var(--noche); border: 0; font-weight: 500; white-space: nowrap; } .visor__volver:hover { background: oklch(80% 0.1 82); } .visor__titulo { flex: 1; min-width: 0; font: 400 1.15rem var(--f-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .visor__url { font: 400 .82rem var(--f-texto); color: var(--noche-txt-2); margin-left: .6rem; } .visor__acciones { display: flex; gap: .3rem; } .visor__icono { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: none; border: 1px solid oklch(93% 0.02 85 / .2); color: var(--noche-txt); } .visor__icono:hover { background: oklch(93% 0.02 85 / .08); } .visor__icono svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .visor :focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; } .visor__marco { position: relative; flex: 1; background: oklch(98% 0.005 85); } .visor__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: oklch(98% 0.005 85); } .visor__cargando { position: absolute; inset: 0; display: grid; place-items: center; background: var(--noche); color: var(--noche-txt-2); font: italic 300 1.3rem var(--f-titulo); z-index: 1; transition: opacity .2s ease; } .visor__cargando[hidden] { display: none; } .visor__bloqueado { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.2rem; padding: clamp(1.5rem, 8vw, 7rem); background: var(--noche); color: var(--noche-txt); } .visor__bloqueado[hidden] { display: none; } .visor__bloqueado { background-size: cover; background-position: center top; } .visor__bloqueado h2 { font-size: var(--t-3); max-width: 18ch; } .visor__bloqueado p { color: var(--noche-txt-2); max-width: 50ch; } @media (max-width: 640px) { .visor__volver { padding-inline: .8rem; } .visor__url, #visorRecargar { display: none; } } /* ========================================================= MARKETING — contenedores de video ========================================================= */ .videos { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); } .video { grid-column: span 2; display: flex; flex-direction: column; background: var(--noche); color: var(--noche-txt); border-radius: 14px; overflow: hidden; } .video--1, .video--2 { grid-column: span 3; } .video__medio { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(90% 80% at 80% 10%, oklch(45% 0.18 320 / .5), transparent 60%), radial-gradient(80% 70% at 10% 100%, oklch(45% 0.12 60 / .45), transparent 60%), var(--noche-2); } .video--4 .video__medio { background: radial-gradient(100% 80% at 20% 20%, oklch(55% 0.12 60 / .5), transparent 65%), var(--noche-2); } .video--1 .video__medio, .video--2 .video__medio, .video--5 .video__medio { background: radial-gradient(90% 80% at 80% 10%, oklch(50% 0.2 320 / .55), transparent 60%), radial-gradient(80% 70% at 10% 100%, oklch(48% 0.17 255 / .5), transparent 60%), oklch(20% 0.07 285); } .video__medio video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video__marcador { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; color: oklch(93% 0.02 85 / .75); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; } .video__marcador svg { width: 3.4rem; height: 3.4rem; padding: .9rem; border-radius: 50%; border: 1px solid oklch(93% 0.02 85 / .35); fill: oklch(93% 0.02 85 / .85); } .video__sello { position: absolute; top: .9rem; left: .9rem; padding: .35rem .7rem; font: 500 .72rem/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; background: oklch(12% 0.01 60 / .7); color: var(--noche-txt); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .video__texto { display: flex; flex-direction: column; gap: .6rem; padding: 1.2rem 1.3rem 1.4rem; flex: 1; } .video__texto h2 { font-size: var(--t-2); } .video__texto p { color: var(--noche-txt-2); font-size: .95rem; } .mezcla { margin-top: auto; padding-top: .6rem; } .mezcla__barra { display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, oklch(62% 0.2 285), oklch(66% 0.23 340)); overflow: hidden; } .mezcla__barra span { display: block; height: 100%; background: var(--oro); } .mezcla__txt { display: flex; justify-content: space-between; margin-top: .45rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; } .mezcla__txt span:first-child { color: var(--oro); } .mezcla__txt span:last-child { color: oklch(80% 0.12 310); } /* ========================================================= PLANES — servicios y "Arma tu plan" ========================================================= */ .servicios-resumen { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--tinta); } .servicios-resumen a { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.5rem 1.8rem 0; text-decoration: none; border-bottom: 1px solid var(--linea); transition: background-color .2s ease; } .servicios-resumen a:not(:nth-child(3n + 1)) { padding-left: 1.5rem; border-left: 1px solid var(--linea); } .servicios-resumen a:hover { background: var(--papel-2); } .servicios-resumen span { font-size: .78rem; letter-spacing: .1em; color: var(--tinta-2); } .servicios-resumen h3 { font-size: var(--t-2); } .servicios-resumen p { color: var(--tinta-2); font-size: .96rem; } .generador { display: grid; grid-template-columns: 1fr 22rem; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); } .generador__secciones { display: grid; gap: 1.2rem; } .paso-plan { background: var(--papel); padding: clamp(1.2rem, 2.5vw, 1.8rem); } .paso-plan__cabeza { display: flex; gap: 1rem; align-items: baseline; padding-bottom: 1rem; margin-bottom: .4rem; border-bottom: 1px solid var(--linea); } .paso-plan__num { font: 300 var(--t-2)/1 var(--f-titulo); color: var(--oro-hondo); } .paso-plan__cabeza h3 { font-size: var(--t-2); } .paso-plan__cabeza p { color: var(--tinta-2); font-size: .95rem; } .paso-plan__campos { display: grid; } .campo-plan { border: 0; margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--linea); min-width: 0; } .campo-plan:last-child { border-bottom: 0; } .campo-plan[hidden] { display: none; } .campo-plan > label:not(.interruptor-si), .campo-plan legend { display: block; font-weight: 500; margin-bottom: .6rem; padding: 0; } .campo-plan__detalle { margin: -.3rem 0 .7rem; font-size: .9rem; color: var(--tinta-2); } .campo-plan--si .campo-plan__detalle { margin: .4rem 0 0 3.4rem; } .campo-plan--fijo p { color: var(--tinta-2); } .campo-plan--fijo b { color: var(--tinta); font-weight: 500; } .campo-plan textarea { width: 100%; min-height: 5.5rem; padding: .7rem .9rem; background: oklch(98.5% 0.008 85); color: var(--tinta); border: 1px solid oklch(20% 0.012 60 / .3); resize: vertical; } .campo-plan textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px color-mix(in oklch, var(--oro) 40%, transparent); } .contador { display: inline-flex; align-items: stretch; border: 1px solid var(--tinta); } .contador button { width: 2.9rem; min-height: 2.9rem; background: none; border: 0; font-size: 1.3rem; line-height: 1; transition: background-color .15s ease; } .contador button:hover { background: var(--papel-2); } .contador input { width: 4.2rem; border: 0; border-inline: 1px solid var(--linea); background: none; text-align: center; font: 400 1.25rem var(--f-titulo); color: var(--tinta); font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .contador input::-webkit-outer-spin-button, .contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .contador input:focus { outline: none; background: var(--papel-2); } .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { position: relative; cursor: pointer; } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip span { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid oklch(20% 0.012 60 / .28); font-size: .94rem; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .chip--multi span::before { content: ""; width: .9rem; height: .9rem; border: 1px solid currentColor; flex-shrink: 0; } .chip:hover span { border-color: var(--tinta); } .chip input:checked + span { background: var(--tinta); color: var(--papel); border-color: var(--tinta); } .chip--multi input:checked + span::before { background: var(--oro); border-color: var(--oro); box-shadow: inset 0 0 0 2px var(--tinta); } .chip input:focus-visible + span { outline: 2px solid var(--oro-hondo); outline-offset: 2px; } .interruptor-si { display: flex; align-items: center; gap: .9rem; cursor: pointer; font-weight: 500; min-height: 2.75rem; } .interruptor-si input { position: absolute; opacity: 0; pointer-events: none; } .interruptor-si__pista { position: relative; flex-shrink: 0; width: 2.5rem; height: 1.4rem; border-radius: 99px; background: oklch(20% 0.012 60 / .22); transition: background-color .2s ease; } .interruptor-si__pista::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--papel); box-shadow: 0 1px 2px oklch(20% 0.02 60 / .3); transition: transform .2s var(--ease-out); } .interruptor-si input:checked + .interruptor-si__pista { background: var(--tinta); } .interruptor-si input:checked + .interruptor-si__pista::after { transform: translateX(1.1rem); background: var(--oro); } .interruptor-si input:focus-visible + .interruptor-si__pista { outline: 2px solid var(--oro-hondo); outline-offset: 3px; } .resumen { position: sticky; top: calc(var(--cab) + 1.5rem); background: var(--noche); color: var(--noche-txt); padding: 1.5rem; } .resumen .etiqueta { color: var(--oro); } .resumen__lista { list-style: none; margin: 0 0 1.2rem; padding: 0; max-height: 40vh; overflow-y: auto; } .resumen__lista li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid oklch(93% 0.02 85 / .1); font-size: .9rem; } .resumen__lista li span { color: var(--noche-txt-2); } .resumen__lista b { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; } .resumen__lista small { font-size: .72rem; color: var(--oro); } .resumen__vacio { color: var(--noche-txt-2); font-style: italic; } .resumen__totales { margin: 0 0 .8rem; } .resumen__totales div { display: flex; justify-content: space-between; align-items: baseline; padding: .4rem 0; } .resumen__totales div[hidden] { display: none; } .resumen__totales dt { color: var(--noche-txt-2); } .resumen__totales dd { margin: 0; font: 400 var(--t-3)/1 var(--f-titulo); font-variant-numeric: tabular-nums; } .resumen__totales div + div dd { font-size: var(--t-2); } .resumen__nota { font-size: .88rem; color: var(--oro); margin-bottom: 1rem; } .resumen .nota { margin-top: .8rem; color: var(--noche-txt-2); text-align: center; } .resumen :focus-visible { outline-color: var(--oro); } @media (max-width: 960px) { .proyectos { grid-template-columns: 1fr; } .videos { grid-template-columns: 1fr 1fr; } .video, .video--1, .video--2 { grid-column: span 1; } .video--1 { grid-column: 1 / -1; } .servicios-resumen { grid-template-columns: 1fr 1fr; } .servicios-resumen a:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; } .servicios-resumen a:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--linea); } .generador { grid-template-columns: minmax(0, 1fr); } .resumen { position: sticky; top: auto; bottom: 0; z-index: 5; } .resumen__lista { max-height: 22vh; } } @media (max-width: 640px) { .videos, .servicios-resumen { grid-template-columns: 1fr; } .servicios-resumen a:nth-child(even) { padding-left: 0; border-left: 0; } .proyecto__pie { grid-template-columns: 1fr; } .resumen__lista { display: none; } .resumen { padding: 1rem 1.2rem; } .resumen .nota { display: none; } } @media (prefers-reduced-motion: reduce) { .visor[open] { animation: none; } } /* Inicio: el titular de la portada cabe en tres líneas y deja ver la franja */ .pagina-inicio .portada__texto { max-width: 42rem; } .pagina-inicio .portada h1 { font-size: clamp(2.5rem, 1.3rem + 3.7vw, 4.9rem); } /* ========================================================= TEMA DE TODO EL SITIO — mitad luxury, mitad arte Las páginas internas usan el mismo fondo del inicio. Aquí se invierten los colores base (pensados para papel claro) y se ajustan las piezas que tenían colores fijos. ========================================================= */ .tema { --papel: oklch(16% 0.014 55); /* superficies */ --papel-2: oklch(45% 0.07 320 / .14); /* bandas alternas, translúcidas */ --tinta: oklch(94% 0.02 82); /* texto */ --tinta-2: oklch(80% 0.03 75); --oro-hondo: var(--oro); --linea: oklch(93% 0.02 85 / .14); --error: oklch(76% 0.15 30); --ok: oklch(82% 0.13 150); color-scheme: dark; color: var(--tinta); } .tema .cabeza-pagina { border-bottom-color: oklch(93% 0.02 85 / .1); } .tema .bloque--alt { border-block: 1px solid oklch(93% 0.02 85 / .06); } .tema .banda-oscura { background: oklch(10% 0.012 60 / .5); } /* Botón principal: dorado sobre oscuro */ .tema .boton--tinta { background: var(--oro); color: var(--noche); } .tema .boton--tinta:hover { background: oklch(80% 0.1 82); } /* Superficies: paneles translúcidos en vez de papel */ .tema .paso-plan, .tema .cotizador, .tema .financiero, .tema .nota-caja { background: oklch(11% 0.012 60 / .58); border: 1px solid oklch(93% 0.02 85 / .09); } .tema .plan--oro .financiero { background: oklch(11% 0.012 60 / .5); } .tema .plan--oro { border: 1px solid transparent; background: linear-gradient(var(--arte-2), var(--arte-2)) padding-box, var(--neon) border-box; box-shadow: 0 0 28px oklch(68% 0.21 300 / .25); } .tema .tabla-comparativa thead .col-oro { background: var(--arte-2); } .tema .guion { color: oklch(93% 0.02 85 / .3); } .tema .sello { background: var(--neon); color: oklch(15% 0.02 290); } /* Formularios */ .tema .campo input, .tema .campo select, .tema .campo textarea, .tema .campo-plan textarea { background-color: oklch(11% 0.012 60 / .62); color: var(--tinta); border-color: oklch(93% 0.02 85 / .28); } .tema .campo input:hover, .tema .campo select:hover, .tema .campo textarea:hover { border-color: oklch(93% 0.02 85 / .55); } .tema .campo input:focus, .tema .campo select:focus, .tema .campo textarea:focus, .tema .campo-plan textarea:focus { border-color: var(--oro); } .tema .campo [aria-invalid="true"] { border-color: var(--error); } .tema select option { background: oklch(16% 0.014 55); color: var(--tinta); } .tema ::placeholder { color: oklch(80% 0.03 75 / .6); } .tema .chip span { border-color: oklch(93% 0.02 85 / .3); } .tema .interruptor-si__pista { background: oklch(93% 0.02 85 / .22); } .tema .interruptor-si__pista::after { background: oklch(94% 0.02 82); } .tema .interruptor-si input:checked + .interruptor-si__pista { background: oklch(50% 0.2 300); } .tema .atajos button { border-color: oklch(93% 0.02 85 / .25); } .tema .resumen { background: oklch(10% 0.012 60 / .85); border: 1px solid oklch(93% 0.02 85 / .1); } .tema .proyecto, .tema .video { border: 1px solid oklch(93% 0.02 85 / .12); } /* ========================================================= Enlace «Ingresar» del header ========================================================= */ .menu__ingresar { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem .9rem; text-decoration: none; font-size: .96rem; color: var(--oro-hondo); } .menu__ingresar:hover { text-decoration: underline; text-underline-offset: 4px; } /* Con la sesión abierta muestra el nombre de la cuenta, con un punto que indica que ya entró. */ .menu__ingresar--cuenta { gap: .45rem; font-weight: 500; } .menu__ingresar--cuenta::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 25%, transparent); } @media (max-width: 720px) { .menu__ingresar { order: -1; } } /* ========================================================= TITULARES: mitad luxury, mitad animada La parte normal del título es la tipografía luxury (Fraunces, estática). El —siempre al final, es decir, a la derecha— se parte letra por letra desde JS y se anima con el neón de la marca. No se aplica en el CRM (`.sin-anima` o dentro de `.crm-mock`). ========================================================= */ main h1, main h2 { font-variation-settings: "opsz" 144; } .anima { display: inline; } .anima .palabra { display: inline-block; white-space: nowrap; } /* El degradado se reparte letra por letra con --p (0 al principio, 1 al final). Es un color fijo: nada se repinta mientras el titular esta quieto. Lo unico que se anima es la entrada, y solo cuando el titular aparece en pantalla. */ .anima .letra { display: inline-block; opacity: 0; color: color-mix(in oklch, var(--neon-azul, #6ab8ff), var(--neon-magenta, #ff7ad0) calc(var(--p) * 100%)); } @supports not (color: color-mix(in oklch, red, blue 50%)) { .anima .letra { color: var(--neon-violeta, #a97cff); } } .anima.entro .letra { animation: anima-letra .55s var(--ease-out) both; animation-delay: calc(var(--l) * .034s); } @keyframes anima-letra { from { opacity: 0; transform: translateY(.45em) rotate(4deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } /* Sobre papel claro el neón se apaga: allí el ciclo va de oro a violeta hondo. */ body:not(.tema) .anima .letra { --neon-azul: oklch(50% 0.095 70); --neon-violeta: oklch(48% 0.16 300); --neon-magenta: oklch(52% 0.17 350); } @media (prefers-reduced-motion: reduce) { .anima.entro .letra { animation: letra-suave .3s ease both; animation-delay: 0s; } } /* ========================================================= PORTADA CON VIDEO — el video acaba justo en la imagen de fondo ========================================================= */ .portada__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .6s var(--ease-out); pointer-events: none; } .portada__video.visible { opacity: 1; } .portada__video.se-va { opacity: 0; transition-duration: .9s; } /* ========================================================= SECCIÓN ANCHA (páginas web): cabeza a la izquierda, trabajo debajo ========================================================= */ .split--ancho { padding-block: clamp(4rem, 8vw, 6.5rem); } .split__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); } .split__cabeza .split__real { max-width: 34rem; } .pagina-inicio .proyectos { grid-template-columns: repeat(2, 1fr); } @media (max-width: 760px) { .pagina-inicio .proyectos { grid-template-columns: 1fr; } } /* En móvil la imagen se recortaba tanto y el velo pesaba tanto que la portada quedaba casi negra: se abre el velo y se centra el recorte en la ilustración. */ @media (max-width: 760px) { .pagina-inicio .portada__fondo { object-position: 64% 38%; } .pagina-inicio .portada--imagen::before { background: linear-gradient(180deg, oklch(15% 0.012 60 / .82) 0%, oklch(15% 0.012 60 / .42) 40%, oklch(15% 0.012 60 / .5) 72%, oklch(15% 0.012 60 / .88) 100%); } } /* ========================================================= PLANES QUE VENDEN — bajo cada fila, el resultado, el ahorro frente a contratarlo suelto y el botón, siempre a la vista. ========================================================= */ .promesa { max-width: 60ch; margin-bottom: 1.6rem; color: var(--tinta-2); } .promesa b { color: var(--tinta); font-weight: 500; } .tema .promesa { color: var(--arte-txt-2); } .tema .promesa b { color: var(--real-txt); } .remate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--linea); } .remate p { font: 300 var(--t-2)/1.35 var(--f-titulo); max-width: 46ch; } .remate b { font-weight: 500; color: var(--oro-hondo); } .tema .remate { border-top-color: oklch(93% 0.02 85 / .14); } .tema .remate b { color: var(--oro); } /* ========================================================= Catálogo dentro de Planes: calculadora + gráfico de barras ========================================================= */ .cat-cabeza { margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); } .cat-cabeza .titulo-ancho { max-width: 24ch; } .cat-cabeza__bajada { font: 300 var(--t-2)/1.4 var(--f-titulo); color: var(--tinta-2); max-width: 46ch; margin-top: 1rem; } .cat-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start; } .cat-panel { display: grid; gap: 1.1rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--papel); border: 1px solid oklch(72% 0.105 80 / .45); } .cat-panel__pregunta { font: 400 var(--t-2) var(--f-titulo); } .cat-contador { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; } .cat-contador__paso { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; background: none; color: var(--oro); border: 1px solid oklch(72% 0.105 80 / .55); border-radius: 50%; font: 300 1.7rem/1 var(--f-texto); transition: background-color .2s, color .2s, transform .16s var(--ease-out); } .cat-contador__paso:hover { background: var(--oro); color: var(--noche); } .cat-contador__paso:active { transform: scale(.94); } .cat-contador__valor { display: flex; align-items: baseline; justify-content: center; gap: .5rem; border-bottom: 1px solid var(--linea); min-width: 0; } .cat-contador__valor:focus-within { border-bottom-color: var(--oro); } .cat-contador__valor input { width: 100%; min-width: 0; text-align: right; border: 0; background: none; padding: 0; font: 400 clamp(2.8rem, 2rem + 3.4vw, 4.2rem)/1.1 var(--f-titulo); color: var(--tinta); font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .cat-contador__valor input::-webkit-outer-spin-button, .cat-contador__valor input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cat-contador__valor input:focus { outline: none; } .cat-contador__valor span { color: var(--tinta-2); } /* Barra que se llena según la cantidad */ .cat-rango { -webkit-appearance: none; appearance: none; width: 100%; height: 1.6rem; margin: 0; background: transparent; cursor: pointer; --p: 37%; } .cat-rango::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--oro) var(--p), var(--linea) var(--p)); } .cat-rango::-moz-range-track { height: 6px; border-radius: 3px; background: var(--linea); } .cat-rango::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--oro); } .cat-rango::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin-top: -9px; border-radius: 50%; background: var(--oro); border: 3px solid var(--noche); box-shadow: 0 0 0 1px var(--oro); } .cat-rango::-moz-range-thumb { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--oro); border: 3px solid var(--noche); box-shadow: 0 0 0 1px var(--oro); } .cat-total { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 1.1rem 0; border-block: 1px solid var(--linea); } .cat-total__etiqueta { display: block; font-size: var(--t-0); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: .4rem; } .cat-total strong { display: block; font: 400 clamp(2.4rem, 1.8rem + 3vw, 3.8rem)/1 var(--f-titulo); font-variation-settings: "opsz" 144; color: var(--oro); font-variant-numeric: tabular-nums; font-weight: 400; } .cat-total__lado { display: grid; justify-items: end; gap: .5rem; text-align: right; } .cat-total__foto { font-size: .92rem; color: var(--tinta-2); } .cat-total__foto b { color: var(--tinta); font-weight: 500; } .cat-insignia { padding: .3rem .65rem; background: var(--oro); color: var(--noche); font: 600 .78rem/1 var(--f-texto); letter-spacing: .08em; } .cat-panel .cuenta { margin: 0; } .cat-panel .nota { text-align: center; margin: 0; } /* Lado derecho */ .cat-lado { display: grid; gap: clamp(1.4rem, 3vw, 2rem); } .cat-lado .etiqueta { margin-bottom: .9rem; } .cat-barras__lista { display: grid; gap: .55rem; } .cat-barra { display: grid; grid-template-columns: 5.2rem 1fr 6.4rem; align-items: center; gap: .8rem; width: 100%; padding: .55rem .7rem; background: none; border: 1px solid transparent; text-align: left; color: var(--tinta); transition: border-color .2s, background-color .2s; } .cat-barra:hover { border-color: var(--linea); } .cat-barra.activa { border-color: oklch(72% 0.105 80 / .6); background: oklch(72% 0.105 80 / .08); } .cat-barra__n { font: 400 1.05rem var(--f-titulo); } .cat-barra__pista { height: .9rem; background: oklch(93% 0.02 85 / .07); } .cat-barra__pista i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, oklch(60% 0.09 78), var(--oro)); transform-origin: left; transition: width .5s var(--ease-out); } .cat-barra__v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; } .cat-barra__v small { display: block; font-size: .72rem; font-weight: 400; color: var(--tinta-2); } .cat-reglas ul { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .1rem; } .cat-reglas li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--linea); } .cat-reglas li svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--oro); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .cat-reglas li span { display: grid; font-size: .9rem; line-height: 1.3; color: var(--tinta-2); } .cat-reglas li b { font: 400 1.1rem/1.2 var(--f-titulo); color: var(--tinta); font-variant-numeric: tabular-nums; } .cat-recibes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .cat-recibes li { padding: .45rem .85rem; border: 1px solid var(--linea); font-size: .88rem; color: var(--tinta-2); } .cat-recibes li::before { content: "✓"; color: var(--oro); margin-right: .45rem; } @media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .cat-total { flex-direction: column; align-items: flex-start; } .cat-total__lado { justify-items: start; text-align: left; } .cat-barra { grid-template-columns: 4.4rem 1fr 5.6rem; gap: .5rem; padding-inline: .3rem; } } @media (prefers-reduced-motion: reduce) { .cat-barra__pista i, .cat-contador__paso { transition: none; } } /* ========================================================= PORTADA EN MODO CINE Al principio solo está el video, limpio: sin velo, sin eslogan, sin botones y sin franja. Cuando el video termina, todo eso aparece con un fundido escalonado, nunca de golpe. ========================================================= */ .portada--cine { cursor: grab; user-select: none; -webkit-user-select: none; } .portada--cine.portada--arrastrando { cursor: grabbing; } /* El velo y el degradado inferior se apagan mientras dura la intro. */ .portada--cine::before, .portada--cine::after { opacity: 0; } .portada--imagen::before, .pagina-inicio .portada--imagen::after { transition: opacity .9s var(--ease-out); } /* Lo que aparece al final. Se mantiene en el DOM (buscadores lo leen igual), solo que invisible y fuera del alcance del cursor y del tabulador. */ .portada--cine .pantalla__cuerpo, .portada--cine .apuro { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(18px); } .portada--cine .pantalla__cuerpo, .portada--cine .apuro, .portada--revela .pantalla__cuerpo, .portada--revela .apuro { transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), visibility 0s; } .portada--revela .pantalla__cuerpo { transition-delay: .1s; } /* La franja entra cruzada con el desvanecido del video (.9s), no después: su alto ya está reservado en el layout, así que si llega tarde se ve su hueco vacío al pie en cuanto el video se va. */ .portada--revela .apuro { transition-delay: 0s; transition-duration: .8s; } .portada--revela .pantalla__cuerpo, .portada--revela .apuro { opacity: 1; visibility: visible; transform: none; } /* La entrada escalonada del eslogan se reserva para cuando le toca aparecer. */ .portada--cine .entra, .portada--revela .entra { animation: none; } /* ---- El aviso: arrastra hacia arriba para abrir el portátil ---- */ .portada__gesto { position: absolute; left: 0; right: 0; bottom: clamp(2rem, 7vh, 4.5rem); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .9rem; padding-inline: var(--gutter); text-align: center; animation: aparece 1.2s var(--ease-out) .6s both; } .portada__gesto[hidden] { display: none; } .portada__abrir { display: inline-flex; flex-direction: column; align-items: center; gap: .7rem; padding: .8rem 1.4rem; background: none; border: 0; color: var(--noche-txt); font-size: .95rem; letter-spacing: .02em; } .portada__abrir__txt { text-shadow: 0 2px 14px oklch(10% 0.01 60 / .8); } .portada__abrir__txt b { font-weight: 600; color: var(--oro); } .portada__abrir__flecha { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid oklch(93% 0.02 85 / .45); position: relative; background: oklch(12% 0.01 60 / .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: sube-flecha 2s var(--ease-in-out) infinite; } .portada__abrir__flecha::before, .portada__abrir__flecha::after { content: ""; position: absolute; left: 50%; background: var(--noche-txt); } .portada__abrir__flecha::before { top: .75rem; width: 1px; height: 1.1rem; transform: translateX(-50%); } .portada__abrir__flecha::after { top: .78rem; width: .62rem; height: .62rem; border-left: 1px solid var(--noche-txt); border-top: 1px solid var(--noche-txt); background: none; transform: translateX(-50%) rotate(45deg); transform-origin: center; } @keyframes sube-flecha { 0%, 100% { transform: translateY(0); opacity: .85; } 50% { transform: translateY(-8px); opacity: 1; } } /* Mientras se arrastra, el aviso se aparta para no estorbar. */ .portada--arrastrando .portada__abrir { opacity: .25; transition: opacity .2s ease; } .portada__saltar { background: none; border: 0; color: var(--noche-txt-2); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; padding: .5rem 1rem; text-decoration: underline; text-underline-offset: 4px; } .portada__saltar:hover { color: var(--noche-txt); } @media (max-width: 760px) { .portada__abrir__txt { max-width: 22ch; } } @media (prefers-reduced-motion: reduce) { .portada__abrir__flecha { animation: none; } .portada--cine .pantalla__cuerpo, .portada--cine .apuro { transform: none; } } /* Mientras dura la intro, arrastrar hacia arriba abre la tapa: el gesto no debe desplazar la página. Al terminar, el scroll vuelve a la normalidad. */ .portada--cine { touch-action: none; overscroll-behavior: contain; } /* Durante la intro la cabecera está fuera de pantalla (absolute, desplazada), así que el alto disponible es la pantalla entera. Sin esto, la portada sigue midiendo `100svh - var(--cab)` y deja una franja vacía bajo el portátil. Al revelar se quita `--cine`, la cabecera vuelve al flujo y ocupa justo ese alto: el total sigue siendo una pantalla, así que no hay salto. */ .pagina-inicio .portada--cine { min-height: 100svh; height: 100svh; padding: 0; } /* ========================================================= INTRO: la cabecera se va mientras corre el video y vuelve al final ========================================================= */ /* `absolute` y no `sticky`: si no, la cabecera sigue ocupando su alto y deja una franja vacía encima del video. */ body.intro .cabecera { position: absolute; top: 0; left: 0; right: 0; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .5s var(--ease-out), opacity .4s var(--ease-out); } .cabecera { transition: transform .3s var(--ease-out), opacity .5s var(--ease-out) .5s, border-color .2s ease; } /* En el teléfono la intro ocupa la pantalla entera, de pie o de lado. */ @media (max-width: 760px), (max-height: 560px) { .pagina-inicio .portada--cine .portada__video, .pagina-inicio .portada--cine .portada__fondo { object-position: center; } .pagina-inicio .portada--cine .portada__gesto { bottom: clamp(1rem, 4vh, 2.5rem); } } /* ---------- Pantalla negra: gira el teléfono ---------- */ .portada__girar { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 2rem var(--gutter); text-align: center; background: #000; color: var(--noche-txt); animation: aparece .4s var(--ease-out) both; } .portada__girar[hidden] { display: none; } .portada__girar__video { width: min(34vh, 11rem); height: auto; display: block; } .portada__girar__txt { font: 300 var(--t-2)/1.35 var(--f-titulo); max-width: 18ch; } .portada__girar__pie { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: .4rem; } .portada__girar__pie .boton[hidden] { display: none; } /* Mientras se pide girar, el video de fondo no se toca. */ .portada--girando { cursor: default; } /* En el teléfono se desliza hacia abajo, así que la flecha apunta hacia allá. */ .portada__abrir--abajo .portada__abrir__flecha { animation-name: baja-flecha; } .portada__abrir--abajo .portada__abrir__flecha::after { transform: translateX(-50%) rotate(-135deg); top: 1.05rem; } .portada__abrir--abajo .portada__abrir__flecha::before { top: .55rem; } @keyframes baja-flecha { 0%, 100% { transform: translateY(0); opacity: .85; } 50% { transform: translateY(8px); opacity: 1; } } /* ========================================================= Cada sección ocupa toda la pantalla (decisión de Harold, 2026-10-07). Mide como mínimo lo que queda de pantalla bajo la cabecera y centra su contenido; si el contenido es más alto, la sección crece y se desplaza normal. El inicio ya lo hace con `.pantalla`, y el pie queda con su altura. ========================================================= */ main > section:not(.pantalla), .servicio { min-height: calc(100svh - var(--cab)); display: grid; align-content: center; } @supports not (height: 100svh) { main > section:not(.pantalla), .servicio { min-height: calc(100vh - var(--cab)); } } /* ========================================================= Menos roce (revisión de experiencia, 2026-10-08): botón fijo de WhatsApp, zonas táctiles de 44 px, comparativa plegada, contacto con tres campos y tarjetas de video sin recuadro vacío. ========================================================= */ .wa-fijo { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 70; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 6px 18px oklch(10% 0.02 60 / .45); transition: transform .15s var(--ease-out); } .wa-fijo svg { width: 1.9rem; height: 1.9rem; fill: currentColor; } .wa-fijo:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .wa-fijo:hover { transform: scale(1.06); } } @media (max-width: 960px) { .pagina-inicio .wa-fijo { bottom: max(6.5rem, env(safe-area-inset-bottom)); } } @media print { .wa-fijo { display: none; } } .cabecera .logo { display: inline-flex; align-items: center; min-height: 2.75rem; } .enlace { display: inline-flex; align-items: center; min-height: 2.75rem; } .plegable { margin-top: 1.2rem; } .plegable > summary, .mas-datos > summary { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem 1rem; cursor: pointer; border: 1px solid var(--linea-fuerte, currentColor); border-radius: 99px; font-weight: 500; list-style: none; } .plegable > summary::-webkit-details-marker, .mas-datos > summary::-webkit-details-marker { display: none; } .plegable > summary::after, .mas-datos > summary::after { content: "+"; margin-left: .6rem; font-size: 1.2em; line-height: 1; } .plegable[open] > summary::after, .mas-datos[open] > summary::after { content: "−"; } .plegable[open] > summary { margin-bottom: 1.2rem; } .mas-datos__cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; margin-top: 1.2rem; } @media (max-width: 640px) { .mas-datos__cuerpo { grid-template-columns: 1fr; } } .video--sin .video__texto { padding-top: 1.5rem; } .mas-datos > summary .opcional { margin-left: .35em; } /* ========================================================= INICIO — secciones con imágenes: Marketing, CRM, Automatizaciones y cierre. Alturas naturales, sin imán. ========================================================= */ .seccion { position: relative; padding-block: clamp(4rem, 8vw, 6.5rem); border-top: 1px solid var(--linea); color: var(--tinta); } .seccion--primera { border-top: 0; padding-top: clamp(4.5rem, 9vw, 7rem); } .seccion__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .seccion__cabeza > div { max-width: 38rem; } .seccion h2 { font-size: var(--t-3); font-weight: 300; } .seccion__texto { margin-top: 1.2rem; max-width: 40ch; color: var(--tinta-2); font-size: 1.12rem; } .seccion__cabeza--centro { flex-direction: column; align-items: center; text-align: center; } .seccion__cabeza--centro > div { max-width: 44rem; } .seccion__cabeza--centro .seccion__texto { margin-inline: auto; } .seccion .enlace--claro { color: var(--oro); } /* ----- Marketing: celulares con recortes de la ilustración ----- */ .mk__cuerpo { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 5vw, 3rem); align-items: center; } .mk__celulares { --pw: clamp(70px, calc((100vw - 3rem) / 3.65), 210px); /* ancho de la pantalla de cada celular */ display: flex; justify-content: center; align-items: center; gap: calc(var(--pw) * .14); padding-block: 2rem; background: radial-gradient(closest-side, oklch(55% 0.2 300 / .3), transparent 85%); } .celular { flex-shrink: 0; padding: calc(var(--pw) * .055); background: oklch(9% 0.01 60); border: 1px solid oklch(93% 0.02 85 / .22); border-radius: calc(var(--pw) * .19); box-shadow: 0 30px 70px oklch(0% 0 0 / .55); } .celular--bajo { margin-top: calc(var(--pw) * .14); } .mk__der { min-width: 0; } .mk__der .seccion__cabeza { flex-direction: column; align-items: flex-start; gap: 1.2rem; margin-bottom: 1.4rem; } .crm2__fila { display: block; } .celular--medio { border-color: oklch(72% 0.105 80 / .55); } .celular__pantalla { position: relative; overflow: hidden; width: var(--pw); height: calc(var(--pw) * 2); border-radius: calc(var(--pw) * .14); background: var(--papel); } .celular__pantalla::before { content: ""; position: absolute; z-index: 2; top: calc(var(--pw) * .044); left: 50%; width: calc(var(--pw) * .3); height: calc(var(--pw) * .033); margin-left: calc(var(--pw) * -.15); border-radius: 99px; background: oklch(9% 0.01 60); } .celular__tag { position: absolute; z-index: 2; left: calc(var(--pw) * .067); top: calc(var(--pw) * .145); padding: .2em .7em; background: oklch(12% 0.012 55 / .78); color: var(--tinta); font: 600 clamp(7px, calc(var(--pw) * .058), 10.5px)/1.3 var(--f-texto); letter-spacing: .12em; } .celular--ia .celular__tag { background: var(--oro); color: var(--noche); } .celular__acciones { position: absolute; z-index: 2; right: calc(var(--pw) * .055); bottom: calc(var(--pw) * .41); display: flex; flex-direction: column; gap: calc(var(--pw) * .078); } .celular__acciones svg { width: calc(var(--pw) * .122); height: calc(var(--pw) * .122); fill: none; stroke: oklch(97% 0.02 85); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .celular__acciones span { display: flex; flex-direction: column; align-items: center; gap: calc(var(--pw) * .014); } .celular__acciones small { font: 600 clamp(7px, calc(var(--pw) * .05), 10px)/1 var(--f-texto); color: oklch(98% 0.01 85); text-shadow: 0 1px 3px oklch(0% 0 0 / .85); white-space: nowrap; } .mk__tarjetas { display: grid; gap: .9rem; } .mk-tarjeta { display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; text-decoration: none; color: inherit; padding: 1.4rem 1.5rem; background: var(--papel); border: 1px solid var(--linea); transition: border-color .2s ease, transform .2s var(--ease-out); } .mk-tarjeta:hover { border-color: oklch(72% 0.105 80 / .55); } .mk-tarjeta h3 { font: 400 1.65rem/1.1 var(--f-titulo); margin-bottom: .4rem; } .mk-tarjeta p { color: var(--tinta-2); font-size: .98rem; } .mk-grafico { flex-shrink: 0; } .mk-grafico rect { fill: var(--oro); } .mk-recorte { position: relative; flex-shrink: 0; overflow: hidden; width: 6.5rem; aspect-ratio: 3 / 2; border: 1px solid oklch(72% 0.105 80 / .45); } .mk-recorte img { position: absolute; max-width: none; height: auto; display: block; } .mk-recorte--camara img { width: 449.5%; left: -349.5%; top: -279.4%; } .mk-recorte--campanas img { width: 522.5%; left: -362.5%; top: -136.2%; } .mk-recorte__rec { position: absolute; left: .4rem; top: .4rem; display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .45rem; background: oklch(12% 0.012 55 / .8); font: 600 .62rem/1.3 var(--f-texto); letter-spacing: .12em; } .mk-recorte__rec i { width: .45rem; height: .45rem; border-radius: 50%; background: oklch(62% 0.24 25); animation: mk-rec 1.4s steps(2, jump-none) infinite; } @keyframes mk-rec { 50% { opacity: .25; } } /* ----- CRM: captura grande con resplandor ----- */ .crm2__captura { position: relative; max-width: 65rem; margin: 0 auto clamp(3.5rem, 7vw, 4.75rem); } .crm2__brillo { position: absolute; inset: -12% -6% -14%; background: radial-gradient(closest-side, oklch(55% 0.2 300 / .4), oklch(72% 0.105 80 / .14) 55%, transparent 80%); pointer-events: none; } .crm2__ventana { position: relative; background: var(--papel); border: 1px solid oklch(93% 0.02 85 / .18); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 100px oklch(0% 0 0 / .6); } .crm2__barra { display: flex; align-items: center; gap: .45rem; padding: .8rem 1.1rem; background: oklch(20% 0.014 55); border-bottom: 1px solid var(--linea); font-size: .82rem; color: var(--tinta-2); } .crm2__barra i { width: .7rem; height: .7rem; border-radius: 50%; } .crm2__barra i:nth-child(1) { background: var(--neon-magenta); } .crm2__barra i:nth-child(2) { background: var(--oro); } .crm2__barra i:nth-child(3) { background: var(--neon-azul); } .crm2__barra span { margin-left: .6rem; } .crm2__ventana img { display: block; width: 100%; height: auto; } .crm2__chat { position: absolute; right: -1.2rem; bottom: -2.5rem; width: min(18.5rem, 56%); padding: 1rem 1.1rem; background: oklch(20% 0.018 60); border: 1px solid oklch(72% 0.105 80 / .6); border-radius: 14px; box-shadow: 0 24px 60px oklch(0% 0 0 / .6); } .crm2__chat-t { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); } .crm2__chat-t svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .crm2__msg { max-width: 88%; margin-bottom: .5rem; padding: .5rem .75rem; background: var(--real); border-radius: 10px 10px 10px 2px; font-size: .9rem; line-height: 1.4; } .crm2__msg--ia { width: fit-content; margin: 0 0 0 auto; background: var(--oro); color: var(--noche); border-radius: 10px 10px 2px 10px; } .crm2__funciones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; } .crm2__funciones li { padding: 1.6rem 1.5rem; background: var(--papel); border: 1px solid var(--linea); } .crm2__funciones li.destacada { border-color: oklch(72% 0.105 80 / .55); } .crm2__icono { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1.1rem; border-radius: 50%; background: oklch(72% 0.105 80 / .14); } .crm2__icono svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--oro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .destacada .crm2__icono { background: var(--oro); } .destacada .crm2__icono svg { stroke: var(--noche); } .crm2__funciones h3 { font: 400 1.5rem/1.15 var(--f-titulo); margin-bottom: .4rem; } .crm2__funciones p { color: var(--tinta-2); font-size: .98rem; } .crm2__enlace { margin-top: 2.5rem; text-align: center; } /* ----- Cierre con imagen ----- */ .cierre--imagen { padding-block: 0 clamp(4rem, 8vw, 7rem); } .cierre__panel { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 3.5rem; padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.75rem, 5vw, 4rem); border: 1px solid oklch(72% 0.105 80 / .4); } .cierre__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 40%; } .cierre__velo { position: absolute; inset: 0; background: linear-gradient(90deg, oklch(12% 0.01 55 / .94) 0%, oklch(12% 0.01 55 / .8) 50%, oklch(20% 0.08 290 / .35) 100%); } .cierre__texto, .cierre__botones { position: relative; } .cierre__texto { flex: 1 1 20rem; } .cierre--imagen h2 { font-size: var(--t-3); } .cierre--imagen .cierre__texto p { margin: 1.1rem 0 0; max-width: 34ch; color: var(--real-txt); font-size: 1.12rem; } .cierre__botones { margin-top: 0; } @media (max-width: 960px) { .mk__cuerpo { grid-template-columns: 1fr; } .mk__der { display: contents; } .mk__der .seccion__cabeza { order: -1; margin-bottom: 0; } .crm2__funciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .crm2__funciones { grid-template-columns: 1fr; } .crm2__chat { right: -.4rem; bottom: -2rem; width: min(17rem, 72%); } } @media (prefers-reduced-motion: reduce) { .mk-tarjeta { transition: none; } .mk-recorte__rec i { animation: none; } } /* ========================================================= INICIO — una sección = una pantalla (escritorio) El tamaño de celulares, captura y banner sigue el alto de la ventana, así Marketing, Páginas, CRM y Automatizaciones caben sin desplazarse. ========================================================= */ .seccion.pantalla { padding-block: 0; } .seccion .pantalla__cuerpo { padding-block: clamp(4rem, 8vw, 6.5rem); } @media (min-width: 961px) { .seccion .pantalla__cuerpo { padding-block: clamp(1.5rem, 5vh, 4rem); } .seccion__cabeza { margin-bottom: clamp(1.25rem, 4vh, 3.5rem); } /* Marketing: celulares lo más grandes que permita la columna izquierda y el alto de la ventana */ .mk__cuerpo { grid-template-columns: 1.85fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; } .mk__celulares { --pw: clamp(90px, min(calc((100svh - 11rem) / 2.4), calc((min(100vw - 5rem, 76rem) - 3rem) * .65 / 3.65)), 300px); padding-block: clamp(.5rem, 2vh, 2rem); } .mk__der .seccion__cabeza { margin-bottom: clamp(.9rem, 3vh, 1.6rem); } .mk__tarjetas { gap: clamp(.5rem, 1.4vh, .9rem); } .mk-tarjeta { padding: clamp(.65rem, 2vh, 1.4rem) 1.4rem; } .mk-tarjeta h3 { font-size: clamp(1.3rem, .6rem + 1.6vh, 1.65rem); margin-bottom: .25rem; } .mk-recorte { width: clamp(4.6rem, 12vh, 6.5rem); } /* Páginas: cuatro tarjetas en una fila */ .pagina-inicio .split__cabeza { margin-bottom: clamp(1.25rem, 4vh, 3rem); } /* CRM: captura al 75% a la izquierda, las cuatro funciones al 25% a la derecha, una bajo otra */ .crm2__envoltura { display: flex; flex-direction: column; min-height: calc(100svh - var(--cab) - 2 * clamp(1.5rem, 5vh, 4rem)); } .crm2__envoltura .seccion__cabeza { margin-bottom: clamp(.9rem, 3vh, 1.8rem); } .crm2__fila { flex: 1; min-height: 16rem; display: grid; grid-template-columns: 75% minmax(0, 1fr); gap: 1.2rem; } .crm2__captura { display: flex; flex-direction: column; min-height: 0; max-width: none; margin: 0; } .crm2__brillo { inset: -8% -3%; } .crm2__ventana { flex: 1; min-height: 0; display: flex; flex-direction: column; } .crm2__ventana img { flex: 1 1 0; min-height: 0; width: 100%; height: auto; object-fit: cover; object-position: top left; } .crm2__chat { right: 1.2rem; bottom: 1.2rem; } .crm2__funciones { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: .8rem; } .crm2__funciones li { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-content: center; align-items: center; padding: .7rem 1rem; } .crm2__icono { grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; margin-bottom: 0; } .crm2__icono svg { width: 1.35rem; height: 1.35rem; } .crm2__funciones h3 { font-size: 1.2rem; margin-bottom: .1rem; } .crm2__funciones p { font-size: .88rem; line-height: 1.35; } /* Automatizaciones: el banner se acorta con la altura */ } @media (min-width: 1200px) { .pagina-inicio .proyectos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; } .pagina-inicio .proyecto__pie { grid-template-columns: 1fr; padding: .9rem 1rem 1.1rem; } .pagina-inicio .proyecto__nombre { font-size: 1.45rem; } .pagina-inicio .proyecto__resumen { font-size: .88rem; } } /* Pantallas bajas (portátiles de 768 px): títulos algo más chicos */ @media (min-width: 961px) and (max-height: 820px) { .seccion h2 { font-size: clamp(1.8rem, .6rem + 3.6vh, 2.8rem); } .seccion__texto { font-size: 1rem; margin-top: .8rem; } .mk__der .seccion__cabeza { gap: .7rem; } .mk-tarjeta p { font-size: .88rem; line-height: 1.4; } .crm2__funciones li { padding: .5rem .9rem; } } /* ========================================================= INICIO — Automatizaciones: flujo de tres columnas y línea de tiempo ========================================================= */ .auto2 { display: flex; flex-direction: column; gap: clamp(.9rem, 2.4svh, 1.8rem); } .auto2__cabeza { display: grid; grid-template-columns: 1fr minmax(0, 36%); gap: 1.5rem 3rem; align-items: stretch; } .auto2__texto .seccion__texto { max-width: 38ch; } .auto2__imagen { width: 100%; height: 100%; min-height: 9rem; max-height: clamp(9rem, 24svh, 14rem); object-fit: cover; object-position: 50% 62%; border-radius: 14px; border: 1px solid var(--linea); align-self: center; } .flujo { --h: clamp(3.4rem, 7.5svh, 4.5rem); /* alto de cada tarjeta */ --g: clamp(.5rem, 1.6svh, 1rem); /* espacio entre tarjetas */ --lista: calc(var(--h) * 3 + var(--g) * 2); /* alto de una columna de tres tarjetas */ display: grid; grid-template-columns: 1fr .9fr 1fr .9fr 1fr; align-items: start; } .flujo__col { min-width: 0; } .flujo__paso { display: flex; align-items: center; gap: .7rem; height: 1.75rem; margin-bottom: .7rem; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .flujo__num { display: grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border: 1px solid var(--oro); border-radius: 50%; font: 400 .95rem var(--f-titulo); letter-spacing: 0; color: var(--oro); } .flujo__col--sale .flujo__num { background: var(--oro); color: var(--noche); } .flujo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g); } .flujo__card { height: var(--h); box-sizing: border-box; min-width: 0; display: flex; align-items: center; gap: .85rem; padding: 0 1.1rem; background: var(--papel); border: 1px solid oklch(93% 0.02 85 / .16); border-radius: 12px; } .flujo__card--oro { border-color: oklch(72% 0.105 80 / .6); } .flujo__card svg { width: 1.85rem; height: 1.85rem; flex-shrink: 0; fill: none; stroke: var(--oro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .flujo__card b { display: block; font: 400 1.3rem/1.15 var(--f-titulo); } .flujo__card small { display: block; font-size: .86rem; line-height: 1.3; color: var(--tinta-2); } .flujo__crm { position: relative; box-sizing: border-box; height: var(--lista); padding: clamp(.7rem, 2svh, 1.3rem) 1.2rem 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; background: linear-gradient(160deg, oklch(21% 0.02 60), oklch(21% 0.09 290)); border: 1px solid oklch(72% 0.105 80 / .7); border-radius: 18px; box-shadow: 0 0 60px oklch(55% 0.2 300 / .35); } .flujo__crm > svg { width: 2.1rem; height: 2.1rem; fill: none; stroke: var(--oro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .flujo__crm b { font: 400 clamp(1.6rem, 1rem + 2.4svh, 2.4rem)/1.1 var(--f-titulo); } .flujo__crm > p { max-width: 24ch; font-size: .92rem; line-height: 1.35; color: oklch(88% 0.02 82); } .flujo__chips { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; list-style: none; margin: 0; padding: 0; display: flex; gap: .7rem; } .flujo__chips li { flex: 1; display: grid; place-items: center; min-height: 2.6rem; padding: .2rem .5rem; background: oklch(12% 0.012 55 / .7); border: 1px solid oklch(93% 0.02 85 / .3); border-radius: 10px; font-size: .85rem; line-height: 1.2; text-align: center; } /* Conectores: líneas, barra y flechas dibujadas con CSS, alineadas a las tarjetas */ .flujo__union { position: relative; height: var(--lista); margin-top: 2.45rem; } .flujo__union i { position: absolute; display: block; background: var(--oro); } .flujo__union i.izq { left: 0; width: 50%; height: 2px; margin-top: -1px; } .flujo__union i.der { left: 50%; right: 0; height: 2px; margin-top: -1px; } .flujo__union i.r1 { top: calc(var(--h) / 2); } .flujo__union i.r2 { top: calc(var(--h) * 1.5 + var(--g)); } .flujo__union i.r3 { top: calc(var(--h) * 2.5 + var(--g) * 2); } .flujo__union i.v { left: 50%; width: 2px; margin-left: -1px; top: calc(var(--h) / 2); height: calc(var(--h) * 2 + var(--g) * 2); } .flujo__union i.flecha::after { content: ""; position: absolute; right: 0; top: -4px; border-left: 8px solid var(--oro); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .flujo__union i.flecha { right: 8px; } /* Línea de tiempo del ejemplo */ .noche__titulo { margin-bottom: .6rem; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); } .noche__pista { --riel: 4.35rem; position: relative; display: flex; gap: 1rem; } .noche__pista::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: var(--riel); height: 2px; background: oklch(93% 0.02 85 / .45); } .noche__pista::after { content: ""; position: absolute; right: 0; top: calc(var(--riel) - 4px); border-left: 8px solid oklch(93% 0.02 85 / .45); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .noche__banda { min-width: 0; display: flex; flex-direction: column; box-sizing: border-box; padding: .7rem 1rem 1rem; border: 1px solid; border-radius: 14px; } .noche__banda--noche { flex: 2; background: oklch(60% 0.2 300 / .13); border-color: oklch(70% 0.2 300 / .35); } .noche__banda--dia { flex: 3; background: oklch(72% 0.105 80 / .08); border-color: oklch(72% 0.105 80 / .3); } .noche__etiqueta { margin-bottom: .3rem; font-size: .72rem; font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; } .noche__banda--noche .noche__etiqueta { color: oklch(78% 0.15 300); } .noche__banda--dia .noche__etiqueta { color: var(--oro); } .noche__paradas { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; } .parada { flex: 1; min-width: 0; display: grid; justify-items: center; align-content: start; gap: .35rem; text-align: center; } .parada time { font: 400 1.3rem/1.3 var(--f-titulo); } .parada i { position: relative; z-index: 1; width: 1rem; height: 1rem; box-sizing: border-box; border: 3px solid var(--real); border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 1px var(--oro); } .noche__banda--noche .parada i { background: var(--neon-violeta); box-shadow: 0 0 0 1px var(--neon-violeta); } .parada p { max-width: 18ch; font-size: .92rem; line-height: 1.3; color: oklch(86% 0.025 80); } @media (min-width: 961px) and (max-height: 820px) { .auto2__texto .seccion__texto { max-width: 52ch; } .flujo__crm > svg { display: none; } .flujo__crm > p { font-size: .85rem; } .flujo__card b { font-size: 1.15rem; } .parada time { font-size: 1.15rem; } .parada p { font-size: .85rem; } .noche__pista { --riel: 3.5rem; } .auto2 { gap: .7rem; } .auto2__imagen { min-height: 0; max-height: 9.5rem; } .flujo { --h: 3.2rem; --g: .45rem; } .flujo__paso { margin-bottom: .5rem; } .flujo__union { margin-top: 2.25rem; } .flujo__chips { bottom: .7rem; } .flujo__chips li { min-height: 2.2rem; } .noche__banda { padding: .5rem .8rem .65rem; } .noche__etiqueta { margin-bottom: .1rem; } .parada { gap: .25rem; } .noche__titulo { margin-bottom: .4rem; } } @media (max-width: 960px) { .auto2__cabeza { grid-template-columns: 1fr; } .auto2__imagen { height: 11rem; max-height: none; align-self: stretch; } .flujo { grid-template-columns: 1fr; --h: 4.5rem; --g: 1rem; } .flujo__union { height: 2.6rem; margin-top: 0; } .flujo__union i { display: none; } .flujo__union::before { content: ""; position: absolute; left: 50%; top: .2rem; bottom: .5rem; width: 2px; margin-left: -1px; background: var(--oro); } .flujo__union::after { content: ""; position: absolute; left: 50%; bottom: .15rem; margin-left: -6px; border-top: 8px solid var(--oro); border-left: 6px solid transparent; border-right: 6px solid transparent; } .flujo__col + .flujo__union + .flujo__col .flujo__paso { margin-top: 0; } .flujo__crm { min-height: 15rem; height: auto; padding-bottom: 5rem; } .noche__pista { flex-direction: column; } .noche__pista::before, .noche__pista::after { display: none; } .noche__paradas { flex-direction: column; gap: .8rem; } .parada { grid-template-columns: 1rem 6.5rem 1fr; align-items: center; justify-items: start; column-gap: .8rem; text-align: left; } .parada i { order: -1; } .parada p { max-width: none; } } /* ----- Celular de IA con video: se ve como un reel de Instagram ----- */ .celular__pantalla video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--papel); } .celular__cuenta { position: absolute; z-index: 2; left: calc(var(--pw) * .07); bottom: calc(var(--pw) * .075); display: flex; align-items: center; gap: calc(var(--pw) * .04); color: oklch(98% 0.01 85); text-shadow: 0 1px 4px oklch(0% 0 0 / .85); } .celular__cuenta i { width: calc(var(--pw) * .1); height: calc(var(--pw) * .1); box-sizing: border-box; border: max(1.5px, calc(var(--pw) * .012)) solid transparent; border-radius: 50%; background: linear-gradient(oklch(14% 0.012 55), oklch(14% 0.012 55)) padding-box, conic-gradient(from 200deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34) border-box; } .celular__cuenta b { font: 600 clamp(8px, calc(var(--pw) * .055), 11px)/1 var(--f-texto); } /* Franja de marca al pie, igual a la que trae el reel de Diosalud: negra, 6,25 % del alto, nombre del cliente en mayúsculas finas y espaciadas. La cuenta va encima de la franja. */ .celular__marca { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: calc(var(--pw) * .125); display: grid; place-items: center; background: #0b0b0b; color: oklch(98% 0.005 85); font: 300 calc(var(--pw) * .048)/1 var(--f-texto); letter-spacing: .35em; text-indent: .35em; text-transform: uppercase; white-space: nowrap; pointer-events: none; } .celular--video .celular__cuenta { bottom: calc(var(--pw) * .21); } .celular__progreso { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: max(2px, calc(var(--pw) * .014)); background: oklch(97% 0.02 85 / .3); } .celular__progreso i { display: block; height: 100%; width: var(--p, 0%); background: oklch(97% 0.02 85 / .95); } .celular__sonido { position: absolute; z-index: 3; right: calc(var(--pw) * .067); top: calc(var(--pw) * .12); display: grid; place-items: center; width: clamp(1.6rem, calc(var(--pw) * .15), 2rem); height: clamp(1.6rem, calc(var(--pw) * .15), 2rem); padding: 0; border: 0; border-radius: 50%; background: oklch(12% 0.012 55 / .6); color: oklch(98% 0.01 85); cursor: pointer; } .celular__sonido[hidden] { display: none; } .celular__sonido:hover { background: oklch(12% 0.012 55 / .85); } .celular__sonido svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .celular__sonido .on, .celular__sonido[aria-pressed="true"] .off { display: none; } .celular__sonido[aria-pressed="true"] .on { display: block; } /* Reels: botón de reproducir al centro, como en Instagram. Mientras suena se vuelve invisible y ocupa toda la pantalla del celular: tocarla pausa. */ .celular__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: oklch(99% 0.005 85); cursor: pointer; } .celular__play span { display: grid; place-items: center; width: calc(var(--pw) * .3); height: calc(var(--pw) * .3); border-radius: 50%; background: oklch(12% 0.012 55 / .5); box-shadow: 0 6px 24px oklch(0% 0 0 / .45); transition: opacity .2s ease, transform .2s var(--ease-out); } .celular__play svg { width: 46%; height: 46%; margin-left: 8%; fill: currentColor; } .celular__play:hover span { transform: scale(1.06); } .celular__play:focus-visible { outline: 2px solid var(--oro); outline-offset: -4px; } .celular.reproduciendo .celular__play span { opacity: 0; transform: scale(.85); } .celular__tag, .celular__acciones, .celular__cuenta, .celular__progreso { pointer-events: none; } .celular:not(.reproduciendo) .celular__sonido { visibility: hidden; } @media (prefers-reduced-motion: reduce) { .celular__play span { transition: none; } } /* ========================================================= PLANES — una sección = una pantalla (escritorio) Los cuatro planes ocupan dos pantallas: Start y Launch, luego Growth y Scale. Catálogo, «Arma tu plan» y «Cómo se paga» miden una pantalla cada uno; en «Arma tu plan» el formulario se desplaza dentro de su caja. ========================================================= */ .planes-arriba { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2.5rem; margin-bottom: clamp(1.4rem, 3vw, 2rem); } .planes-arriba .planes-cabeza { flex: 1 1 30rem; margin-bottom: 0; } .planes-arriba .planes-control { margin-bottom: 0; } .planes-segunda .lista-planes { margin-top: 0; } @media (min-width: 961px) { .pagina-planes .pantalla { min-height: calc(100svh - var(--cab)); padding-block: 0; } .pagina-planes .pantalla__cuerpo { padding-block: clamp(1.25rem, 4vh, 3rem); } .planes-pantalla { display: flex; flex-direction: column; gap: clamp(.8rem, 2.2vh, 1.6rem); } .planes-pantalla .planes-arriba, .planes-pantalla .garantias, .planes-pantalla .primer { margin: 0; } .planes-cabeza .vitrina__titulo, .planes-cabeza h2 { font-size: clamp(1.9rem, .9rem + 2.6vh, 2.9rem); max-width: none; } .planes-cabeza .sobretitulo { margin-bottom: .4rem; } .planes-cabeza__bajada { margin-top: .5rem; font-size: 1.05rem; } .planes-arriba .planes-control { flex: 0 1 24rem; flex-direction: column; align-items: flex-start; gap: .5rem; } .planes-arriba .planes__explica { flex: none; font-size: .86rem; } .planes-pantalla .garantias li { gap: .7rem; } .planes-pantalla .garantias svg { width: 1.6rem; height: 1.6rem; } /* Tarjeta compacta: nombre y precio arriba, cuatro datos en fila, extras en dos columnas */ .pagina-planes .plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cab precio" "esencial esencial" "boton todo"; align-content: start; column-gap: 1.5rem; row-gap: clamp(.6rem, 1.6vh, 1rem); padding: clamp(1rem, 2.4vh, 1.6rem) clamp(1.2rem, 2vw, 1.7rem); } .pagina-planes .plan__cabeza { grid-area: cab; gap: .3rem; } .pagina-planes .plan__nombre { font-size: clamp(1.7rem, .9rem + 2vh, 2.3rem); } .pagina-planes .plan__lema { font-size: .98rem; } .pagina-planes .plan__precio { grid-area: precio; padding-top: 0; border-top: 0; text-align: right; font-size: clamp(1.8rem, .9rem + 2.4vh, 2.6rem); } .pagina-planes .plan__precio small { margin-top: .35rem; font-size: .78rem; } .pagina-planes .plan__ahorro { grid-column: 1 / -1; } .pagina-planes .plan__esencial { grid-area: esencial; gap: .6rem; padding-top: clamp(.6rem, 1.6vh, 1rem); border-top: 1px solid var(--linea); } .pagina-planes .datos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; } .pagina-planes .dato { flex-direction: column; align-items: flex-start; gap: .35rem; padding: .6rem .7rem; } .pagina-planes .dato svg { width: 1.35rem; height: 1.35rem; } .pagina-planes .dato b { font-size: 1.1rem; } .pagina-planes .dato span { font-size: .76rem; } .pagina-planes .extras { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; row-gap: .35rem; } .pagina-planes .extras li { font-size: .86rem; } .pagina-planes .plan__boton { grid-area: boton; justify-self: start; align-self: center; } .pagina-planes .plan__todo { grid-area: todo; align-self: center; padding-top: 0; border-top: 0; } .pagina-planes .plan__todo[open] { grid-column: 1 / -1; grid-row: auto; } /* Catálogo: calculadora a la izquierda; título, barras y reglas a la derecha */ .pagina-planes .cat-envoltura { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: auto 1fr; column-gap: clamp(1.2rem, 3vw, 2.2rem); row-gap: clamp(.8rem, 2vh, 1.4rem); align-items: start; } .pagina-planes .cat-envoltura .cat-grid { display: contents; } .pagina-planes .cat-cabeza { grid-column: 2; grid-row: 1; margin-bottom: 0; } .pagina-planes .cat-cabeza .titulo-ancho { font-size: clamp(1.8rem, .8rem + 2.6vh, 2.7rem); max-width: none; } .pagina-planes .cat-cabeza__bajada { margin-top: .5rem; font-size: 1rem; } .pagina-planes .cat-panel { grid-column: 1; grid-row: 1 / span 2; gap: clamp(.55rem, 1.5vh, 1.1rem); padding: clamp(1rem, 2.6vh, 2rem); } .pagina-planes .cat-lado { grid-column: 2; grid-row: 2; gap: clamp(.8rem, 2vh, 1.6rem); } .pagina-planes .cat-contador__valor input { font-size: clamp(2.2rem, 1rem + 3.6vh, 3.8rem); } .pagina-planes .cat-total { padding-block: clamp(.5rem, 1.4vh, 1.1rem); } .pagina-planes .cat-total strong { font-size: clamp(2rem, 1rem + 3vh, 3.4rem); } .pagina-planes .cat-panel .cuenta div { padding-block: clamp(.2rem, .6vh, .45rem); font-size: .9rem; } .pagina-planes .cat-lado .etiqueta { margin-bottom: .5rem; } .pagina-planes .cat-barras__lista { gap: .25rem; } .pagina-planes .cat-barra { padding-block: clamp(.25rem, .7vh, .55rem); } .pagina-planes .cat-reglas ul { margin-bottom: .5rem; } .pagina-planes .cat-reglas li { padding-block: clamp(.3rem, .9vh, .7rem); } /* Arma tu plan: el formulario se desplaza dentro de su caja; el resumen queda a la vista */ .pagina-planes .arma { display: flex; flex-direction: column; height: calc(100svh - var(--cab) - 2 * clamp(1.25rem, 4vh, 3rem) - 2px); } /* 2px: el borde de la banda alterna */ .pagina-planes .arma .titulo-ancho { font-size: clamp(1.8rem, .8rem + 2.6vh, 2.7rem); max-width: none; } .pagina-planes .arma .texto-guia { margin-top: .5rem; max-width: 72ch; } .pagina-planes .arma .generador { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; margin-top: clamp(.8rem, 2vh, 1.5rem); } .pagina-planes .arma .generador__secciones { min-height: 0; overflow-y: auto; padding-right: .6rem; scrollbar-width: thin; scrollbar-color: var(--oro) transparent; } .pagina-planes .arma .resumen { position: static; min-height: 0; overflow-y: auto; } .pagina-planes .arma .resumen__lista { max-height: none; } } @media (min-width: 961px) { .pagina-planes .cat-reglas ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2rem; } .pagina-planes .cat-reglas li { grid-template-columns: 1.8rem 1fr; gap: .6rem; } .pagina-planes .cat-reglas li b { font-size: 1rem; } .pagina-planes .cat-reglas li span { font-size: .82rem; } .pagina-planes .cat-barra__v small { display: none; } .pagina-planes .cat-lado .nota { font-size: .8rem; } .planes-pantalla .primer { padding: clamp(.8rem, 2vh, 1.3rem) clamp(1.2rem, 2.5vw, 1.8rem); } .planes-pantalla .primer__cifra span { font-size: clamp(2.2rem, 1rem + 3vh, 3.2rem); } .planes-pantalla .primer h2 { font-size: 1.25rem; } .planes-pantalla .primer p { font-size: .88rem; } } /* Pantallas bajas (portátiles de 768 px): lo secundario se compacta para que todo quepa */ @media (min-width: 961px) and (max-height: 820px) { .planes-segunda .planes-cabeza .sobretitulo { display: none; } .planes-segunda .planes-cabeza h2 { font-size: 1.6rem; } .pagina-planes .plan__lema { display: none; } .pagina-planes .extras { row-gap: .15rem; } .pagina-planes .extras li { font-size: .8rem; } .pagina-planes .dato { padding: .45rem .6rem; } .pagina-planes .dato svg, .pagina-planes .plan__esencial > .etiqueta { display: none; } .pagina-planes .plan__boton { min-height: 2.6rem; padding-block: .5rem; } .planes-pantalla .primer { padding-block: .7rem; } .planes-pantalla .primer__cifra span { font-size: 2rem; } .planes-pantalla .primer p { font-size: .82rem; } .pagina-planes .cat-cabeza__bajada { display: none; } .pagina-planes .cat-barra { padding-block: .15rem; } .pagina-planes .cat-reglas li { padding-block: .25rem; } .pagina-planes .cat-reglas li span { font-size: .78rem; } .pagina-planes .cat-recibes li { padding: .3rem .65rem; font-size: .8rem; } } /* ---------- Asesor (js/asesor.js) ---------- Un ancla fija abajo a la derecha (encima del botón de WhatsApp si existe) con un botón redondo de chat y una notificación pendiente («1») que llama a abrirlo, y un aviso que presenta a Rea. El panel de chat, en el celular, ocupa toda la pantalla. */ .asesor-ancla { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 71; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; max-width: calc(100vw - 2rem); transition: opacity .2s ease; } .asesor-ancla--con-wa { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.3rem); } .asesor-lanzador { position: relative; display: grid; place-items: center; width: 4.25rem; height: 4.25rem; padding: 0; background: oklch(15% 0.02 285); color: var(--noche-txt); border: 2px solid var(--oro); border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 4px oklch(72% 0.105 80 / .18), 0 12px 32px oklch(10% 0.02 285 / .6), 0 0 28px oklch(62% 0.2 285 / .35); transition: transform .16s var(--ease-out), box-shadow .2s ease, border-color .2s ease; animation: asesor-llama 6s ease-in-out 2s infinite; } /* Un anillo que se abre y se desvanece, como el de una llamada o un mensaje que acaba de llegar. */ .asesor-lanzador::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--oro); animation: asesor-latido 2.2s ease-out infinite; pointer-events: none; } .asesor-lanzador__icono { display: grid; place-items: center; width: 64%; height: 64%; } .asesor-lanzador__icono img { display: block; width: 100%; height: 100%; object-fit: contain; } /* La notificación pendiente: un «1» rojo en la esquina, hasta que se abre el chat. */ .asesor-lanzador__aviso { position: absolute; top: -.15rem; right: -.15rem; display: grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .35rem; border-radius: 99px; background: oklch(58% 0.23 27); color: #fff; font: 700 .82rem/1 var(--f-texto); border: 2px solid oklch(17% 0.01 60); box-shadow: 0 2px 8px oklch(0% 0 0 / .45); animation: asesor-aviso 1.8s ease-in-out infinite; } @keyframes asesor-latido { from { transform: scale(1); opacity: .75; } to { transform: scale(1.65); opacity: 0; } } @keyframes asesor-aviso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } @keyframes asesor-llama { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-9deg); } 92% { transform: rotate(8deg); } 94% { transform: rotate(-6deg); } 96% { transform: rotate(4deg); } } .asesor-lanzador:active { transform: scale(.94); } .asesor-lanzador:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } @media (hover: hover) and (pointer: fine) { .asesor-lanzador:hover { border-color: oklch(82% 0.1 84); transform: scale(1.06); box-shadow: 0 0 0 5px oklch(72% 0.105 80 / .28), 0 14px 36px oklch(10% 0.02 285 / .65), 0 0 34px oklch(62% 0.2 285 / .5); } } @media (prefers-reduced-motion: reduce) { .asesor-lanzador, .asesor-lanzador__aviso { animation: none; } .asesor-lanzador::before { animation: none; opacity: 0; } .asesor-lanzador { transition: none; } } @media (max-width: 480px) { .asesor-lanzador { width: 3.9rem; height: 3.9rem; } } /* El aviso que presenta a Rea: una vez por visita, a los pocos segundos. */ .asesor-globo { display: flex; align-items: flex-start; width: min(20.5rem, calc(100vw - 2rem)); background: oklch(97% 0.012 85); color: oklch(18% 0.012 60); border-radius: 16px 16px 4px 16px; box-shadow: 0 16px 38px oklch(10% 0.02 60 / .45); animation: asesor-entra .3s var(--ease-out); } .asesor-globo[hidden] { display: none; } .asesor-globo__txt { flex: 1; display: grid; gap: .25rem; padding: .85rem 0 .85rem 1rem; border: 0; background: none; color: inherit; text-align: left; font-size: .9rem; line-height: 1.4; cursor: pointer; } .asesor-globo__txt b { font-size: .95rem; font-weight: 600; } .asesor-globo__x { flex: none; width: 2.75rem; height: 2.75rem; border: 0; background: none; color: oklch(40% 0.02 60); font-size: 1.4rem; line-height: 1; cursor: pointer; } .asesor-globo__txt:focus-visible, .asesor-globo__x:focus-visible { outline: 2px solid oklch(46% 0.14 80); outline-offset: -2px; } body.intro .asesor-ancla, body.asesor-abierto .asesor-ancla { opacity: 0; pointer-events: none; } @media (max-width: 960px) { .pagina-inicio .asesor-ancla { bottom: max(6.5rem, env(safe-area-inset-bottom)); } .pagina-inicio .asesor-ancla--con-wa { bottom: 10.8rem; } } .asesor { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 80; display: flex; flex-direction: column; width: min(25rem, calc(100vw - 2rem)); height: min(40rem, calc(100dvh - 2rem)); /* Paleta propia: el sitio entero va en modo noche (.tema), así que el panel no depende de --papel ni --tinta. */ --as-fondo: oklch(17% 0.012 60); --as-sup: oklch(23% 0.014 60); --as-tarj: oklch(20.5% 0.03 290); --as-txt: oklch(94% 0.02 85); --as-txt-2: oklch(79% 0.025 80); --as-linea: oklch(93% 0.02 85 / .14); background: var(--as-fondo); color: var(--as-txt); border: 1px solid oklch(72% 0.105 80 / .35); box-shadow: 0 24px 60px oklch(10% 0.02 60 / .35); transform-origin: bottom right; animation: asesor-entra .24s var(--ease-out); } .asesor[hidden] { display: none; } @keyframes asesor-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } } .asesor__cab { position: relative; display: flex; align-items: center; gap: .75rem; padding: .75rem .6rem .75rem 1rem; border-bottom: 1px solid var(--as-linea); } .asesor__avatar { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--oro); color: var(--noche); font-family: var(--f-titulo); font-size: 1.2rem; } .asesor__quien { flex: 1; min-width: 0; } .asesor__enlinea { display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; background: oklch(72% 0.17 150); vertical-align: middle; } .asesor__progreso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: none; } .asesor__progreso span { display: block; height: 100%; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); } .asesor__titulo { font-family: var(--f-titulo); font-size: 1.25rem; line-height: 1.1; } .asesor__titulo em { color: var(--oro); } .asesor__sub { font-size: var(--t-0); color: var(--as-txt-2); } .asesor__x { width: 2.75rem; height: 2.75rem; border: 0; background: none; color: inherit; font-size: 1.7rem; line-height: 1; } .asesor__lista { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; } .asesor__msg { max-width: 88%; padding: .65rem .9rem; line-height: 1.45; animation: asesor-msg .22s var(--ease-out); overflow-wrap: anywhere; } @keyframes asesor-msg { from { opacity: 0; transform: translateY(4px); } } .asesor__msg--bot { align-self: flex-start; background: var(--as-sup); } .asesor__msg--yo { align-self: flex-end; background: var(--oro); color: var(--noche); } .asesor__msg--dx { max-width: 100%; background: var(--as-tarj); border: 1px solid var(--as-linea); border-top: 3px solid var(--oro); padding: 1rem 1.1rem; } .asesor__dx > * + * { margin-top: .55rem; } .asesor__etq { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); } .asesor__dx .asesor__etq:not(:first-child) { margin-top: 1rem; } .asesor__dolor { font-family: var(--f-titulo); font-size: 1.45rem; line-height: 1.12; margin-top: .15rem !important; } .asesor__pasos { margin: .3rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; } .asesor__tambien, .asesor__tip, .asesor__nota { font-size: var(--t-0); color: var(--as-txt-2); } .asesor__tip { border-left: 2px solid var(--oro); padding-left: .7rem; } .asesor__oferta { margin-top: 1rem !important; padding-top: .9rem; border-top: 1px solid var(--as-linea); } .asesor__plan { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; font-family: var(--f-titulo); font-size: 1.25rem; margin-top: .2rem; } .asesor__plan span { font-family: var(--f-texto); font-size: var(--t-1); font-weight: 500; color: var(--oro); white-space: nowrap; } .asesor__plan--total { margin-top: .5rem; font-size: 1.1rem; } .asesor__sueltos { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: var(--t-0); } .asesor__sueltos li { display: flex; justify-content: space-between; gap: .8rem; } .asesor__zona { padding: .7rem 1rem .2rem; border-top: 1px solid var(--as-linea); display: grid; gap: .5rem; max-height: 34%; overflow-y: auto; overscroll-behavior: contain; } .asesor__barra { display: flex; margin: .5rem 1rem 1rem; border: 1px solid oklch(93% 0.02 85 / .35); background: var(--as-sup); } .asesor__barra:focus-within { outline: 2px solid var(--oro); outline-offset: 2px; } .asesor__barra input { flex: 1; min-width: 0; min-height: 2.9rem; padding: .5rem .8rem; border: 0; background: none; font-size: 16px; } .asesor__barra input:focus { outline: none; } .asesor__barra input::placeholder { color: var(--as-txt-2); opacity: .8; } .asesor__barra button { width: 2.9rem; border: 0; background: var(--oro); color: var(--noche); font-size: 1.2rem; } .asesor__escribe { display: inline-flex; gap: .3rem; padding: .8rem .9rem; } .asesor__escribe span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--as-txt-2); animation: asesor-punto 1s infinite ease-in-out; } .asesor__escribe span:nth-child(2) { animation-delay: .15s; } .asesor__escribe span:nth-child(3) { animation-delay: .3s; } @keyframes asesor-punto { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } } .asesor__msg a { color: var(--oro); } .asesor__incluye { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: var(--t-0); } .asesor__garantias { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem !important; } .asesor__garantias span { padding: .2rem .6rem; border: 1px solid oklch(72% 0.105 80 / .45); border-radius: 99px; font-size: .74rem; color: var(--oro); } .asesor__oferta:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; } .asesor__msg--bot:has(> .asesor__oferta) { max-width: 100%; background: var(--as-tarj); border: 1px solid var(--as-linea); border-top: 3px solid var(--oro); padding: 1rem 1.1rem; } .asesor__oferta > * + * { margin-top: .4rem; } .asesor__cuotas { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .6rem; counter-reset: cuota; } .asesor__cuotas li { display: grid; gap: .1rem; padding-left: 2rem; position: relative; counter-increment: cuota; } .asesor__cuotas li::before { content: counter(cuota); position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--oro); color: var(--noche); font-size: .75rem; font-weight: 600; } .asesor__cuotas span { font-size: var(--t-0); color: var(--as-txt-2); } .asesor__pagar { display: inline-flex; margin-top: .5rem; padding: .7rem 1.1rem; background: var(--oro); color: var(--noche) !important; font-weight: 600; text-decoration: none; } .asesor__chip.asesor__chip--oro { background: var(--oro); border-color: var(--oro); color: var(--noche); font-weight: 600; } .asesor__zona:empty { display: none; } .asesor__chips { display: flex; flex-wrap: wrap; gap: .45rem; } .asesor__chip { min-height: 2.75rem; padding: .45rem .9rem; border: 1px solid oklch(93% 0.02 85 / .35); border-radius: 99px; background: none; font-size: var(--t-0); font-weight: 500; text-align: left; transition: background-color .15s ease, color .15s ease; } .asesor__chip[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--noche); } @media (hover: hover) and (pointer: fine) { .asesor__chip:hover { border-color: var(--oro); } .asesor__chip[aria-pressed="true"]:hover { color: var(--noche); } } .asesor__chip:active { transform: scale(.97); } .asesor__libre { display: flex; border: 1px solid oklch(93% 0.02 85 / .35); background: var(--as-sup); } .asesor__libre input::placeholder, .asesor__datos input::placeholder { color: var(--as-txt-2); opacity: .8; } .asesor__libre input { flex: 1; min-width: 0; min-height: 2.9rem; padding: .5rem .8rem; border: 0; background: none; font-size: 16px; } .asesor__libre input:focus { outline: none; } .asesor__libre:focus-within { outline: 2px solid var(--oro); outline-offset: 2px; } .asesor__libre button { width: 2.9rem; border: 0; background: var(--oro); color: var(--noche); font-size: 1.2rem; } .asesor__libre button[hidden] { display: none; } .asesor .boton--tinta { background: var(--oro); color: var(--noche); } .asesor__seguir { width: 100%; min-height: 2.9rem; padding-block: .6rem; } .asesor__seguir:disabled { opacity: .45; cursor: not-allowed; } .asesor__datos { display: grid; gap: .5rem; } .asesor__datos input:not(.oculto) { min-height: 2.9rem; padding: .5rem .8rem; border: 1px solid oklch(93% 0.02 85 / .35); background: var(--as-sup); font-size: 16px; } .asesor__estado { font-size: var(--t-0); color: var(--as-txt-2); min-height: 1.2em; } .asesor__estado a { color: var(--oro); } @media (max-width: 560px) { .asesor { inset: 0; width: 100%; height: 100dvh; border: 0; padding-bottom: env(safe-area-inset-bottom); } body.asesor-abierto { overflow: hidden; } } @media (prefers-reduced-motion: reduce) { .asesor, .asesor__msg, .asesor__escribe span { animation: none; } .asesor__progreso span { transition: none; } } @media print { .asesor, .asesor-ancla { display: none; } } /* ========================================================= ARMA TU PLAN — por slides, uno por sección, con su ilustración viva ========================================================= */ .generador__secciones { display: block; min-width: 0; } .armador { display: flex; flex-direction: column; gap: clamp(.7rem, 1.8vh, 1.1rem); min-width: 0; } .armador__tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .armador__tabs::-webkit-scrollbar { display: none; } .armador__tab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.6rem; padding: .45rem .85rem; background: var(--papel); border: 1px solid var(--linea); color: var(--tinta-2); font-size: .86rem; font-weight: 500; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; } .armador__tab svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .armador__tab:hover { color: var(--tinta); border-color: oklch(72% 0.105 80 / .45); } .armador__tab[aria-selected="true"] { color: var(--noche); background: var(--oro); border-color: var(--oro); } .armador__punto { position: absolute; top: .3rem; right: .3rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--neon-violeta); opacity: 0; transform: scale(0); transition: opacity .2s, transform .25s var(--ease-out); } .armador__tab.con-algo .armador__punto { opacity: 1; transform: scale(1); } .armador__tab[aria-selected="true"] .armador__punto { background: var(--noche); } .slide { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(1rem, 2.4vw, 2rem); min-height: 0; padding: clamp(1rem, 2.4vh, 1.6rem); background: var(--papel); border: 1px solid var(--linea); } .slide[hidden] { display: none; } .slide.adelante { animation: slide-adelante .4s var(--ease-out); } .slide.atras { animation: slide-atras .4s var(--ease-out); } @keyframes slide-adelante { from { opacity: 0; transform: translateX(28px); } } @keyframes slide-atras { from { opacity: 0; transform: translateX(-28px); } } .slide__arte { position: relative; overflow: hidden; min-height: 16rem; border-radius: 14px; border: 1px solid oklch(93% 0.02 85 / .08); background: radial-gradient(circle at 50% 40%, oklch(30% 0.1 295 / .55), oklch(14% 0.02 290 / .9) 72%); } .slide__campos { display: flex; flex-direction: column; gap: .6rem; min-width: 0; min-height: 0; overflow-y: auto; padding-right: .3rem; scrollbar-width: thin; scrollbar-color: var(--oro) transparent; } .slide__cabeza { display: flex; align-items: baseline; gap: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linea); } .slide__num { font: 300 var(--t-2)/1 var(--f-titulo); color: var(--oro); } .slide__cabeza h3 { font-size: clamp(1.3rem, .8rem + 1.4vh, 1.7rem); } .slide__cabeza p { color: var(--tinta-2); font-size: .9rem; } .slide__lista { display: grid; } .slide .campo-plan { padding: .6rem 0; } .slide .campo-plan__detalle { font-size: .82rem; line-height: 1.35; } .slide .campo-plan--si .campo-plan__detalle { margin: .3rem 0 0 3.4rem; } .campo-plan--numero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .campo-plan--numero > div:first-child label { margin-bottom: 0; } .campo-plan--numero .campo-plan__detalle { margin: .25rem 0 0; } .interruptor-si small { margin-left: .35rem; color: var(--oro); font-size: .82rem; font-weight: 500; } .armador__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .armador__flecha { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--linea); border-radius: 50%; background: transparent; color: var(--tinta); cursor: pointer; transition: border-color .2s; } .armador__flecha:hover:not(:disabled) { border-color: var(--oro); } .armador__flecha:disabled { opacity: .35; cursor: default; } .armador__flecha svg, .armador__siguiente svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .armador__cuenta { color: var(--tinta-2); font-size: .9rem; } .armador__cuenta b { color: var(--tinta); } .armador__siguiente { gap: .5rem; min-height: 2.75rem; padding-block: .55rem; } .armador__siguiente[hidden] { display: none; } /* Piezas comunes de las ilustraciones */ .arte-si { opacity: .25; filter: grayscale(1); transition: opacity .3s, filter .3s, transform .3s var(--ease-out), box-shadow .3s, border-color .3s; } .arte-si.on { opacity: 1; filter: none; } @keyframes tile-pop { from { opacity: 0; transform: scale(.6); } } @keyframes flotar { 50% { transform: translateY(-10px) rotate(-4deg); } } @keyframes girar { to { transform: rotate(1turn); } } /* Marketing: celular con el feed, redes alrededor y corazones al sumar */ .arte-mk { position: absolute; inset: 0; display: grid; place-items: center; } .arte-mk__tel { width: clamp(8rem, 21vh, 10.5rem); aspect-ratio: 9 / 18; box-sizing: border-box; overflow: hidden; padding: .9rem .45rem .45rem; border: 6px solid oklch(9% 0.01 60); border-radius: 1.4rem; background: oklch(14% 0.015 60); box-shadow: 0 20px 50px oklch(0% 0 0 / .5), 0 0 0 1px oklch(93% 0.02 85 / .15); } .arte-mk__feed { display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 3px; height: 100%; } .arte-mk__feed i { position: relative; aspect-ratio: 4 / 5; border-radius: 3px; animation: tile-pop .35s var(--ease-out) both; } .arte-mk__feed i.reel { background: linear-gradient(160deg, oklch(55% 0.2 300), oklch(48% 0.21 345)); } .arte-mk__feed i.reel::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -4px 0 0 -2px; border-left: 6px solid oklch(98% 0.01 85 / .9); border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .arte-mk__feed i.pieza { background: linear-gradient(145deg, oklch(74% 0.1 82), oklch(52% 0.09 60)); } .arte-mk__feed b, .arte-mk__feed span { grid-column: 1 / -1; text-align: center; font-size: .7rem; color: var(--tinta-2); } .arte-mk__feed span { margin-top: 45%; } .arte-red { position: absolute; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; box-shadow: 0 8px 24px oklch(0% 0 0 / .4); animation: flotar 5s ease-in-out infinite; } .arte-red svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .arte-red--ig { top: 10%; left: 10%; background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285aeb 92%); } .arte-red--tt { top: 14%; right: 10%; background: #111; box-shadow: -2px -2px 0 #25f4ee, 2px 2px 0 #fe2c55, 0 8px 24px oklch(0% 0 0 / .4); animation-delay: -1.2s; } .arte-red--fb { bottom: 24%; left: 7%; background: #1877f2; animation-delay: -2.4s; } .arte-red--yt { bottom: 18%; right: 8%; background: #ff0033; animation-delay: -3.3s; } .arte-pill { position: absolute; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; white-space: nowrap; border: 1px solid oklch(93% 0.02 85 / .18); border-radius: 99px; background: oklch(12% 0.012 55 / .82); font-size: .74rem; color: var(--tinta); } .arte-pill svg { width: .9rem; height: .9rem; fill: none; stroke: var(--oro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .arte-pill b { font-weight: 600; font-variant-numeric: tabular-nums; } .arte-pill--a { top: 38%; left: 3%; } .arte-pill--b { top: 50%; right: 3%; } .arte-pill--c { top: 3%; left: 50%; translate: -50% 0; } .arte-pill--d { bottom: 4%; left: 5%; } .arte-pill--e { bottom: 4%; right: 5%; } .arte-pill.on { border-color: oklch(72% 0.105 80 / .6); } .arte-corazones { position: absolute; left: 50%; bottom: 32%; width: 0; height: 0; } .arte-corazones i { position: absolute; left: var(--x); animation: corazon 1.2s var(--ease-out) var(--d) both; } .arte-corazones i::before { content: "\2665\FE0E"; font-size: 1.4rem; color: #ff4d7a; text-shadow: 0 2px 10px oklch(60% 0.2 10 / .6); } @keyframes corazon { 0% { opacity: 0; transform: translateY(0) scale(.4); } 15% { opacity: 1; transform: translateY(-12px) scale(1.15); } 100% { opacity: 0; transform: translate(calc(var(--x) * .5), -120px) scale(.8); } } /* Pauta: radar, canales que se encienden y presupuesto */ .arte-pauta { position: absolute; inset: 0; } .arte-pauta__radar { position: absolute; left: 50%; top: 44%; width: clamp(8.5rem, 25vh, 12.5rem); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; } .arte-pauta__radar i { position: absolute; inset: 0; border: 1px solid oklch(72% 0.105 80 / .35); border-radius: 50%; } .arte-pauta__radar i:nth-child(2) { inset: 18%; } .arte-pauta__radar i:nth-child(3) { inset: 36%; } .arte-pauta__barrido { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, oklch(72% 0.105 80 / .45), transparent 22%); animation: girar 3.2s linear infinite; } .arte-pauta__blanco { position: absolute; left: 50%; top: 50%; width: .7rem; height: .7rem; margin: -.35rem; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 6px oklch(72% 0.105 80 / .25); } .arte-canal { position: absolute; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; white-space: nowrap; border: 1px solid oklch(93% 0.02 85 / .2); border-radius: 99px; background: oklch(12% 0.012 55 / .85); font-size: .76rem; font-weight: 500; } .arte-canal svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .arte-canal--meta { top: 7%; left: 5%; color: #9cbcff; } .arte-canal--google { top: 14%; right: 5%; color: #9fe0a8; } .arte-canal--seo { top: 64%; left: 6%; color: var(--oro); } .arte-canal.on { border-color: currentColor; box-shadow: 0 0 20px color-mix(in oklch, currentColor 35%, transparent); } .arte-pauta__plata { position: absolute; left: 7%; right: 7%; bottom: 7%; display: grid; gap: .25rem; font-size: .74rem; color: var(--tinta-2); } .arte-pauta__plata b { color: var(--tinta); font-size: .88rem; font-weight: 500; } .arte-pauta__plata i { position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: oklch(93% 0.02 85 / .12); } .arte-pauta__plata i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--plata, 0%); background: linear-gradient(90deg, var(--oro), var(--neon-violeta)); transition: width .5s var(--ease-out); } .slide__arte[data-presupuesto="700000"] .arte-pauta__plata { --plata: 30%; } .slide__arte[data-presupuesto="1400000"] .arte-pauta__plata { --plata: 60%; } .slide__arte[data-presupuesto="2400000"] .arte-pauta__plata { --plata: 100%; } /* Página web: el navegador se arma según lo que elijas */ .arte-web { position: absolute; inset: 9% 8% 17%; } .arte-web__nav { display: flex; align-items: center; gap: 4px; padding: .4rem .6rem; background: oklch(20% 0.014 55); border: 1px solid oklch(93% 0.02 85 / .15); border-bottom: 0; border-radius: 10px 10px 0 0; } .arte-web__nav i { width: 6px; height: 6px; border-radius: 50%; background: oklch(93% 0.02 85 / .3); } .arte-web__nav span { flex: 1; height: .55rem; margin-left: .5rem; border-radius: 99px; background: oklch(93% 0.02 85 / .1); } .arte-web__lienzo { position: relative; height: calc(100% - 1.5rem); box-sizing: border-box; overflow: hidden; padding: .7rem; display: flex; flex-direction: column; gap: .5rem; background: oklch(13% 0.012 55); border: 1px solid oklch(93% 0.02 85 / .15); border-radius: 0 0 10px 10px; } .arte-web__nada { margin: auto; padding: .6rem 1rem; border: 1px dashed oklch(93% 0.02 85 / .3); color: var(--tinta-2); font-size: .85rem; } .arte-web__hero, .arte-web__menu, .arte-web__tienda, .arte-web__wa, .arte-web__gb { display: none; } .arte-web__hero { gap: .35rem; padding: .8rem; border-radius: 8px; background: linear-gradient(135deg, oklch(35% 0.12 295 / .6), oklch(32% 0.08 40 / .55)); } .arte-web__hero b { width: 70%; height: .7rem; border-radius: 3px; background: oklch(95% 0.02 85 / .85); } .arte-web__hero i { height: .35rem; border-radius: 2px; background: oklch(95% 0.02 85 / .35); } .arte-web__hero i:nth-of-type(2) { width: 60%; } .arte-web__hero span { width: 4rem; height: .9rem; margin-top: .2rem; border-radius: 3px; background: var(--oro); } .arte-web__menu { gap: .6rem; } .arte-web__menu i { width: 2.2rem; height: .35rem; border-radius: 2px; background: oklch(95% 0.02 85 / .35); } .arte-web__tienda { grid-template-columns: repeat(3, 1fr); gap: 6px; } .arte-web__tienda i { aspect-ratio: 1; border-radius: 5px; background: linear-gradient(135deg, oklch(70% 0.1 80 / .8), oklch(45% 0.12 330 / .8)); animation: tile-pop .35s var(--ease-out) both; } .arte-web__wa, .arte-web__gb { position: absolute; bottom: .6rem; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: 99px; font-size: .7rem; font-weight: 600; animation: tile-pop .35s var(--ease-out) both; } .arte-web__wa { right: .6rem; background: #25d366; color: #06300f; } .arte-web__gb { left: .6rem; background: #f2ebdd; color: #1a1410; } .arte-web__wa svg, .arte-web__gb svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2; } .slide__arte:not([data-tipo="no"]) .arte-web__nada { display: none; } .slide__arte:not([data-tipo="no"]) .arte-web__hero { display: grid; animation: tile-pop .4s var(--ease-out) both; } .slide__arte[data-tipo="landing2"] .arte-web__wa, .slide__arte[data-tipo="landing2"] .arte-web__gb { display: inline-flex; } .slide__arte[data-tipo="sitio"] .arte-web__menu { display: flex; order: -1; } .slide__arte[data-tipo="sitio"] .arte-web__tienda { display: grid; } .arte-web__app { position: absolute; right: -3%; bottom: -8%; width: 24%; aspect-ratio: 9 / 17; box-sizing: border-box; display: grid; align-content: start; gap: 4px; padding: .7rem .35rem; border: 4px solid oklch(9% 0.01 60); border-radius: .9rem; background: oklch(18% 0.04 290); box-shadow: 0 14px 30px oklch(0% 0 0 / .5); } .arte-web__app.arte-si { opacity: 0; filter: none; transform: translateY(30%); } .arte-web__app.arte-si.on { opacity: 1; transform: none; } .arte-web__app i { height: 1.3rem; border-radius: 4px; background: linear-gradient(135deg, var(--oro), var(--neon-magenta)); } .arte-web__app span { height: .35rem; border-radius: 2px; background: oklch(95% 0.02 85 / .3); } .arte-web__nombre { position: absolute; left: 0; right: 0; bottom: -2rem; text-align: center; color: var(--oro); font-size: .8rem; } /* Automatizaciones: un flujo que se enciende paso a paso */ .arte-auto { position: absolute; inset: 9% 8%; } .arte-auto::before { content: ""; position: absolute; left: 50%; top: 8%; bottom: 8%; width: 2px; background: repeating-linear-gradient(to bottom, var(--oro) 0 6px, transparent 6px 12px); opacity: .35; animation: flujo 1s linear infinite; } @keyframes flujo { to { background-position: 0 12px; } } .arte-nodo { position: absolute; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; white-space: nowrap; border: 1px solid oklch(93% 0.02 85 / .2); border-radius: 12px; background: oklch(14% 0.015 60); font-size: .8rem; } .arte-nodo svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--oro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .arte-nodo--a { top: 0; left: 0; } .arte-nodo--b { top: 27%; right: 0; } .arte-nodo--c { top: 54%; left: 0; } .arte-nodo--d { top: 81%; right: 0; } .arte-nodo.on { border-color: var(--oro); box-shadow: 0 0 22px oklch(72% 0.105 80 / .35); } /* Marca: el logo toma color, aparece el manual y la caja con tu marca */ .arte-marca { position: absolute; inset: 0; display: grid; place-items: center; } .arte-marca__logo { width: clamp(5.5rem, 16vh, 8rem); aspect-ratio: 1; display: grid; place-content: center; text-align: center; border: 2px dashed oklch(93% 0.02 85 / .35); border-radius: 50%; color: var(--tinta-2); transition: background .4s, color .4s, border-color .4s, box-shadow .4s; } .arte-marca__logo span { font: 600 1.6rem/1 var(--f-titulo); letter-spacing: .05em; } .arte-marca__logo small { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; } .slide__arte[data-identidad="1"] .arte-marca__logo { border-color: transparent; background: linear-gradient(135deg, var(--oro), var(--neon-magenta)); color: var(--noche); box-shadow: 0 14px 40px oklch(60% 0.2 330 / .4); } .arte-marca__paleta { position: absolute; top: 10%; left: 50%; translate: -50% 0; display: flex; gap: .4rem; } .arte-marca__paleta i { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: oklch(93% 0.02 85 / .12); transition: background-color .4s; } .slide__arte[data-identidad="1"] .arte-marca__paleta i:nth-child(1) { background: var(--oro); } .slide__arte[data-identidad="1"] .arte-marca__paleta i:nth-child(2) { background: var(--neon-magenta); } .slide__arte[data-identidad="1"] .arte-marca__paleta i:nth-child(3) { background: var(--neon-violeta); } .slide__arte[data-identidad="1"] .arte-marca__paleta i:nth-child(4) { background: #f2ebdd; } .arte-marca__manual { position: absolute; left: 7%; bottom: 10%; width: 32%; display: grid; gap: .3rem; padding: .6rem; border-radius: 8px; background: oklch(93% 0.02 85 / .92); color: #1a1410; font-size: .7rem; rotate: -6deg; } .arte-marca__manual span { height: .3rem; border-radius: 2px; background: oklch(20% 0.01 60 / .25); } .arte-marca__caja { position: absolute; right: 8%; bottom: 10%; width: 27%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(135deg, oklch(45% 0.08 60), oklch(30% 0.05 60)); box-shadow: 0 10px 24px oklch(0% 0 0 / .4); rotate: 5deg; } .arte-marca__caja span { padding: .2rem .35rem; border: 1px solid var(--oro); color: var(--oro); font-size: .58rem; letter-spacing: .18em; } /* Números: barras que se encienden y lo que cubre cada nivel */ .arte-num { position: absolute; inset: 12% 8%; } .arte-num__barras { position: absolute; left: 0; right: 0; bottom: 18%; height: 52%; display: flex; align-items: flex-end; gap: 6%; } .arte-num__barras i { flex: 1; height: calc(var(--h) * 100%); border-radius: 4px 4px 0 0; background: oklch(93% 0.02 85 / .12); transition: background-color .4s; } .slide__arte:not([data-financiero="no"]) .arte-num__barras i { background: linear-gradient(to top, oklch(50% 0.09 60), var(--oro)); } .arte-num__chip { position: absolute; padding: .3rem .65rem; border: 1px solid oklch(93% 0.02 85 / .2); border-radius: 99px; background: oklch(12% 0.012 55 / .85); font-size: .74rem; opacity: .25; transition: opacity .3s, border-color .3s; } .arte-num__chip--1 { top: 0; left: 0; } .arte-num__chip--2 { top: 0; right: 0; } .arte-num__chip--3 { top: 17%; left: 50%; translate: -50% 0; } .slide__arte:is([data-financiero="fundamentos"], [data-financiero="numeros"], [data-financiero="control"]) .arte-num__chip--1, .slide__arte:is([data-financiero="numeros"], [data-financiero="control"]) .arte-num__chip--2, .slide__arte[data-financiero="control"] .arte-num__chip--3 { opacity: 1; border-color: var(--oro); } .arte-num__nombre, .arte-cat__nota { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; color: var(--oro); font-size: .8rem; } /* Acompañamiento: reloj 24/7 y el informe del mes */ .arte-sop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8%; } .arte-sop__reloj { position: relative; width: clamp(6rem, 18vh, 8.5rem); aspect-ratio: 1; display: grid; place-items: center; border: 2px solid oklch(93% 0.02 85 / .25); border-radius: 50%; transition: border-color .4s, box-shadow .4s; } .arte-sop__reloj i { position: absolute; inset: 12%; border-top: 2px solid var(--oro); border-radius: 50%; animation: girar 4s linear infinite; } .arte-sop__reloj b { font: 400 1.5rem var(--f-titulo); color: var(--tinta-2); transition: color .3s; } .slide__arte[data-soporte="1"] .arte-sop__reloj { border-color: var(--oro); box-shadow: 0 0 34px oklch(72% 0.105 80 / .35); } .slide__arte[data-soporte="1"] .arte-sop__reloj b { color: var(--oro); } .arte-sop__informe { width: 34%; display: grid; gap: .35rem; padding: .7rem; border-radius: 8px; background: oklch(93% 0.02 85 / .92); color: #1a1410; font-size: .72rem; rotate: 4deg; } .arte-sop__informe span { height: .3rem; border-radius: 2px; background: oklch(20% 0.01 60 / .25); } /* Catálogo: un cuadro cada 10 fotos */ .arte-cat { position: absolute; inset: 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } .arte-cat__grilla { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 100%; } .arte-cat__grilla i { width: clamp(1.4rem, 3.4vh, 2.1rem); aspect-ratio: 1; border-radius: 4px; background: linear-gradient(135deg, oklch(72% 0.1 80), oklch(48% 0.13 330)); animation: tile-pop .3s var(--ease-out) both; animation-delay: calc(var(--k) * 12ms); } .arte-cat__nota { position: static; } .arte-cat__no { display: none; } .slide__arte[data-quiere="no"] .arte-cat__grilla, .slide__arte[data-quiere="no"] .arte-cat__nota { display: none; } .slide__arte[data-quiere="no"] .arte-cat__no { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tinta-2); font-size: .9rem; } @media (min-width: 961px) { .pagina-planes .arma .generador__secciones { display: flex; overflow: visible; padding-right: 0; } .pagina-planes .armador { flex: 1; min-height: 0; } .pagina-planes .armador__slides { flex: 1; min-height: 0; display: flex; } .pagina-planes .slide { flex: 1; min-height: 0; } .pagina-planes .slide__arte { min-height: 0; } .pagina-planes .slide .campo-plan { padding: clamp(.3rem, .9vh, .6rem) 0; } .pagina-planes .slide .campo-plan__detalle { font-size: .8rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .pagina-planes .slide .campo-plan:hover .campo-plan__detalle, .pagina-planes .slide .campo-plan:focus-within .campo-plan__detalle { -webkit-line-clamp: unset; line-clamp: none; } .pagina-planes .slide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .pagina-planes .slide .chips { gap: .4rem; } .pagina-planes .slide .chip span { padding: .4rem .7rem; font-size: .84rem; } .pagina-planes .slide textarea { min-height: 3.2rem; } .pagina-planes .slide__cabeza { padding-bottom: .4rem; } } @media (max-width: 960px) { .slide { grid-template-columns: 1fr; } .slide__arte { min-height: 15rem; } .slide__campos { overflow: visible; padding-right: 0; } } @media (prefers-reduced-motion: reduce) { .slide.adelante, .slide.atras, .arte-red, .arte-pauta__barrido, .arte-auto::before, .arte-sop__reloj i, .arte-mk__feed i, .arte-web__tienda i, .arte-web__wa, .arte-web__gb, .arte-cat__grilla i { animation: none; } .arte-web__hero { animation: none !important; } } /* ========================================================= PLANES — tarjetas vivas: se inclinan y brillan con el mouse, las barras de nivel crecen y los números cuentan al aparecer ========================================================= */ .pagina-planes .plan .nivel i { transform-origin: bottom; transition: transform .6s var(--ease-out), background-color .25s; } .pagina-planes .plan .nivel i:nth-child(2) { transition-delay: .08s; } .pagina-planes .plan .nivel i:nth-child(3) { transition-delay: .16s; } .pagina-planes .plan .nivel i:nth-child(4) { transition-delay: .24s; } .pagina-planes .plan[data-revela]:not(.visible) .nivel i { transform: scaleY(0); } @media (hover: hover) and (pointer: fine) { .pagina-planes .plan { position: relative; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease-out), border-color .25s, box-shadow .3s; } .pagina-planes .plan.mirando { transition: transform .08s linear, border-color .25s, box-shadow .3s; box-shadow: 0 26px 60px oklch(0% 0 0 / .45); } .pagina-planes .plan::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 50%), oklch(72% 0.105 80 / .16), transparent 60%); } .pagina-planes .plan.mirando::before { opacity: 1; } .pagina-planes .plan > * { position: relative; z-index: 1; } .pagina-planes .dato { transition: transform .2s var(--ease-out), border-color .2s, background-color .2s; } .pagina-planes .dato:hover { transform: translateY(-3px); border-color: oklch(72% 0.105 80 / .6); background: oklch(72% 0.105 80 / .1); } .pagina-planes .dato:hover svg { stroke: var(--neon-violeta); } .pagina-planes .extras li { transition: transform .2s var(--ease-out); } .pagina-planes .extras li:hover { transform: translateX(3px); } } @media (prefers-reduced-motion: reduce) { .pagina-planes .plan .nivel i { transition: none; } .pagina-planes .plan[data-revela]:not(.visible) .nivel i { transform: none; } .pagina-planes .plan { transform: none !important; } } @media (max-width: 960px) { .tema .resumen { background: oklch(10% 0.012 60 / .97); box-shadow: 0 -12px 30px oklch(0% 0 0 / .45); } } /* ---------- Logo de Real iarte (imagen) ---------- Cabecera y pie usan la versión para fondo oscuro: la R brillante, «Real» en blanco e «iarte» en su degradado. El alto manda; el ancho sale solo. */ .logo picture { display: block; line-height: 0; } .logo img { display: block; height: 2.6rem; width: auto; } .pie .logo img { height: 3.2rem; } @media (max-width: 480px) { .logo img { height: 2.15rem; } } .asesor__avatar { background: var(--noche); border: 1px solid oklch(72% 0.105 80 / .35); overflow: hidden; } .asesor__avatar img { width: 72%; height: 72%; object-fit: contain; } /* ---------- Marketing: de lo real a lo imposible (vitrina) ---------- Texto + selector de tres estilos a la izquierda; tres celulares con reels a la derecha. El estilo elegido sube y se ilumina; los otros quedan atrás y se pueden tocar. */ .mkp { padding-top: clamp(1.6rem, 3.5vw, 3rem); padding-bottom: clamp(2.4rem, 5vw, 4rem); } .mkp__fila { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; } .mkp__texto { min-width: 0; } .mkp .vitrina__titulo { max-width: 14ch; font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.2rem); line-height: 1.02; } .mkp .vitrina__guia { margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); } .espectro { --e-oro: var(--oro); --e-vio: oklch(68% 0.19 300); --e-mag: oklch(70% 0.21 350); position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; padding: .4rem .4rem 1rem; border: 1px solid oklch(93% 0.02 85 / .16); border-radius: 18px; background: oklch(12% 0.012 55 / .55); } .espectro__op { position: relative; z-index: 1; display: grid; gap: .15rem; align-content: center; min-height: 4.1rem; padding: .6rem .5rem; border: 0; border-radius: 13px; background: none; color: var(--noche-txt-2, oklch(80% 0.03 75)); text-align: center; cursor: pointer; transition: background-color .2s ease, color .2s ease; } .espectro__op b { font: 400 clamp(1.05rem, .9rem + .5vw, 1.3rem)/1.1 var(--f-titulo); color: var(--noche-txt); } .espectro__op span { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; } .espectro__op[aria-selected="true"] { background: oklch(93% 0.02 85 / .1); color: var(--noche-txt); } .espectro__op:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .espectro__op:not([aria-selected="true"]):hover { background: oklch(93% 0.02 85 / .05); } } .espectro__pista { position: absolute; left: .9rem; right: .9rem; bottom: .45rem; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--e-oro), var(--e-vio) 55%, var(--e-mag)); } .espectro__pista i { position: absolute; top: 50%; left: 0; width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; border-radius: 50%; background: var(--noche-txt); border: 3px solid var(--noche); box-shadow: 0 0 0 2px var(--oro); transition: left .35s var(--ease-out); } .espectro[data-pos="0"] .espectro__pista i { left: 0; } .espectro[data-pos="1"] .espectro__pista i { left: 50%; } .espectro[data-pos="2"] .espectro__pista i { left: 100%; } .espectro__detalle { margin-top: 1.2rem; display: grid; gap: .75rem; min-height: 11.5rem; align-content: start; } .espectro__titulo { font: 400 clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem)/1.1 var(--f-titulo); } .espectro__texto { color: var(--noche-txt-2, oklch(80% 0.03 75)); max-width: 46ch; } .espectro__nota { font-size: .9rem; color: var(--oro); max-width: 46ch; } .espectro__sub { display: flex; flex-wrap: wrap; gap: .4rem; } .espectro__sub button { min-height: 2.4rem; padding: .35rem .9rem; border: 1px solid oklch(93% 0.02 85 / .28); border-radius: 99px; background: none; color: var(--noche-txt); font-size: .88rem; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .espectro__sub button[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--noche); font-weight: 500; } .espectro__sub button:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; } .espectro__detalle .mezcla { margin-top: .3rem; padding-top: 0; max-width: 28rem; } .mkp__acciones { margin-top: clamp(1.2rem, 2.5vw, 1.8rem); } .mkp__escena { --pw: clamp(78px, calc((100vw - 3rem) / 4.1), 188px); /* ancho de la pantalla de cada celular */ position: relative; display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--pw) * .1); padding: 2.4rem 0 1rem; background: radial-gradient(closest-side, oklch(55% 0.2 300 / .32), transparent 88%); } .mkp__cel { display: grid; justify-items: center; gap: .7rem; min-width: 0; transition: transform .45s var(--ease-out), opacity .35s ease, filter .35s ease; transform: translateY(0) scale(.9); opacity: .55; filter: saturate(.6); transform-origin: bottom center; cursor: pointer; } .mkp__cel--activo { transform: translateY(-.9rem) scale(1.04); opacity: 1; filter: none; cursor: default; z-index: 1; } .mkp__cel .celular { margin-top: 0; border-color: oklch(93% 0.02 85 / .22); transition: border-color .3s ease, box-shadow .3s ease; } .mkp__cel--activo .celular { border-color: oklch(72% 0.105 80 / .75); box-shadow: 0 34px 80px oklch(0% 0 0 / .6), 0 0 0 1px oklch(72% 0.105 80 / .4); } .mkp__pie { display: grid; gap: .1rem; text-align: center; line-height: 1.25; } .mkp__pie b { font-size: .9rem; font-weight: 600; } .mkp__pie span { font-size: .78rem; color: var(--noche-txt-2, oklch(80% 0.03 75)); } .mkp__cel:not(.mkp__cel--activo) .mkp__pie { opacity: .8; } @media (hover: hover) and (pointer: fine) { .mkp__cel:not(.mkp__cel--activo):hover { opacity: .85; filter: saturate(.9); } } @media (max-width: 960px) { .mkp__fila { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } /* En pantallas angostas los reels van justo después del título; el selector y el detalle, debajo. */ .mkp__texto { display: contents; } .mkp__texto > * { order: 3; } .mkp__texto > .sobretitulo, .mkp__texto > .vitrina__titulo, .mkp__texto > .vitrina__guia { order: 1; } .mkp__texto > .sobretitulo { margin-bottom: 0; } .mkp__texto > .vitrina__guia { margin-bottom: 0; } .mkp__escena { order: 2; } .mkp .vitrina__titulo { max-width: 16ch; } .mkp__escena { --pw: clamp(74px, calc((100vw - 3rem) / 3.7), 170px); padding-top: 1.6rem; } .espectro__detalle { min-height: 0; } } @media (max-width: 480px) { .espectro__op { min-height: 3.8rem; padding-inline: .25rem; } .espectro__op b { font-size: .98rem; } .espectro__op span { font-size: .64rem; letter-spacing: .03em; } .mkp__pie span { display: none; } } @media (prefers-reduced-motion: reduce) { .mkp__cel, .espectro__pista i, .espectro__op { transition: none; } } /* ========================================================= Prueba gratis (marketweb) Botón dorado de la cabecera, sección index.html#prueba-gratis y botón en el cierre de cada página. ========================================================= */ /* Botón dorado de la cabecera, en todas las páginas y siempre a la vista (también en el teléfono, fuera del menú). margin-left:auto lo deja pegado al menú. */ .prueba-pill { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .35rem 1rem .35rem .4rem; border-radius: 999px; text-decoration: none; white-space: nowrap; font-size: .92rem; font-weight: 600; color: var(--noche, #14110d); background: linear-gradient(135deg, var(--oro-claro, #e9c983), var(--oro, #c9a24d)); box-shadow: 0 0 0 0 oklch(72% 0.105 80 / .55); animation: prueba-latido 2.6s ease-out infinite; transition: transform .2s var(--ease-out), filter .2s; } .prueba-pill:hover { transform: translateY(-1px); filter: brightness(1.06); } .prueba-pill:focus-visible { outline: 2px solid var(--oro-hondo); outline-offset: 3px; } .prueba-pill__sello { display: inline-flex; align-items: center; min-height: 1.7rem; padding: 0 .55rem; border-radius: 999px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; background: var(--noche, #14110d); color: var(--oro-claro, #e9c983); } @keyframes prueba-latido { 0% { box-shadow: 0 0 0 0 oklch(72% 0.105 80 / .55); } 70%, 100% { box-shadow: 0 0 0 12px oklch(72% 0.105 80 / 0); } } @media (prefers-reduced-motion: reduce) { .prueba-pill { animation: none; } } @media (min-width: 961px) { .prueba-pill { margin-right: -.2rem; } } @media (max-width: 960px) { .prueba-pill { margin-right: .2rem; } } @media (max-width: 420px) { .prueba-pill { padding-inline: .9rem; font-size: .86rem; } .prueba-pill__sello { display: none; } /* Con el botón dorado no cabe la palabra «Menú»: queda para lectores de pantalla y se ven las rayas. */ .menu-boton__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* El texto largo del botón con sesión se parte en dos líneas en el teléfono: centrado. */ #prueba-gratis .boton { text-align: center; } .prueba-gratis-enlace { max-width: 60ch; } /* Rea señala el botón de la prueba gratis («Llévame al botón») */ .prueba-senal { animation: prueba-senal .9s ease-in-out 5 !important; outline: 3px solid var(--oro); outline-offset: 4px; } @keyframes prueba-senal { 50% { transform: scale(1.08); box-shadow: 0 0 0 10px oklch(72% 0.105 80 / .35); } } @media (prefers-reduced-motion: reduce) { .prueba-senal { animation: none !important; } } .asesor__msg a.asesor__ir-prueba, .asesor__ir-prueba { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .4rem; padding: .3rem 1rem; border-radius: 999px; font-weight: 600; text-decoration: none; color: var(--noche); background: var(--oro); } /* Inicio › 05 · Prueba gratis: texto y botón a la izquierda, lo que incluye a la derecha */ .prueba-gratis__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem clamp(2rem, 6vw, 5rem); align-items: center; } .prueba-gratis__texto .acciones { margin-top: 1.6rem; } .prueba-gratis .escalones dt { color: var(--oro-hondo); } @media (max-width: 960px) { .prueba-gratis__grid { grid-template-columns: minmax(0, 1fr); } .prueba-gratis .escalones div { grid-template-columns: minmax(0, 1fr); gap: .3rem; } } /* «Haz tu prueba gratis» manda en los cierres: dorado con sello y pulso; «Hablemos» queda de borde al lado. */ .boton--prueba { gap: .55rem; padding-inline: .5rem 1.3rem; border-radius: 999px; border: 0; font-weight: 600; color: var(--noche); background: linear-gradient(135deg, oklch(84% 0.09 85), var(--oro)); animation: prueba-latido 2.6s ease-out infinite; } .boton--prueba:hover { filter: brightness(1.06); } .boton--prueba .prueba-pill__sello { display: inline-flex; } @media (prefers-reduced-motion: reduce) { .boton--prueba { animation: none; } }