/* Propuesta local: condiciones junto al inicio y pasos fáciles de leer. El celular conserva su animación original, a pedido de Ignacio. */ .propuesta-portada h1 { max-width: 17ch; } .propuesta-portada .sub { max-width: 42ch; margin-bottom: 1rem; } .propuesta-portada .hero { padding-block: 4rem; } .propuesta-portada .hero .wrap { gap: 3rem; } .propuesta-portada .btn { background: #2F6E42; color: white; } .propuesta-portada .top .btn.sm { padding: .6rem 1rem; font-size: .9rem; } .sin-app { color: var(--soft); margin: 0 0 1.6rem; } .precio-inicio { margin: 1.1rem 0 .35rem; } .condicion-inicio { font-size: .9rem; line-height: 1.6; color: var(--soft); max-width: 45ch; } .enlace-suave { color: var(--leaf); text-underline-offset: 4px; } .usos-nuevos { background: var(--surface-2); } .usos-grid, .pasos-nuevos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.4rem; } .usos-grid article { padding: 1.5rem; border-radius: 1rem; background: var(--ground); } .usos-grid article > span { font-size: 1.8rem; } .usos-grid h3, .pasos-nuevos h3 { font-size: 1.2rem; margin: .6rem 0; } .usos-grid p, .pasos-nuevos p { margin: 0; color: var(--soft); } .extra-calendario { margin: 1.5rem 0 0; color: var(--soft); } .pasos-nuevos { list-style: none; padding: 0; counter-reset: pasos; } .pasos-nuevos li { border-top: 1px solid var(--line); padding: 1.5rem 0; counter-increment: pasos; } .pasos-nuevos li::before { content: counter(pasos); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--leaf); color: white; font-weight: 700; } .ayuda-inicio { padding: 1rem; background: var(--surface-2); border-radius: .7rem; } .ayuda-inicio a, .contacto-nuevo a:not(.btn) { overflow-wrap: anywhere; } .demo-nueva { background: var(--surface-2); } .demo-nueva .wrap, .contacto-nuevo .wrap { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: 3rem; } .lectura { max-width: 48rem; } .propuesta-portada summary { font-size: 1.1rem; padding-block: 1.2rem; } .contacto-nuevo { background: var(--surface-2); } .cierre-nuevo { background: var(--ground); border-radius: 1rem; padding: 2rem; } .cierre-nuevo h3 { font-size: 1.5rem; line-height: 1.3; margin-top: 0; } .propuesta-portada section[id] { scroll-margin-top: 5rem; } @media (max-width: 58rem) { .propuesta-portada .hero { padding-block: 2.5rem; } .usos-grid, .pasos-nuevos, .demo-nueva .wrap, .contacto-nuevo .wrap { grid-template-columns: 1fr; } .pasos-nuevos { gap: 0; } .propuesta-portada h1 { max-width: none; font-size: clamp(2rem,7vw,3rem); } .propuesta-portada .hero .wrap { gap: 2rem; } } /* ── la paleta ────────────────────────────────────── Gris claro cálido de fondo, no blanco puro: el blanco puro en un teléfono al sol deslumbra, y en interiores se ve barato. Este gris tiene una pizca de amarillo, que es lo que hace que se lea como papel y no como pantalla apagada. Una sola versión, sin modo oscuro automático. Es una página de venta y la mitad de la gente anda con el teléfono en oscuro: si la dejáramos cambiar sola, la mayoría nunca vería los colores que elegimos. */ :root { --ground: #F0F0EC; /* el fondo de todo */ --surface: #FFFFFF; /* tarjetas */ --surface-2: #E6E6E0; /* fondos secundarios */ --line: #D8D8D0; --art: #16293F; /* el recuadro oscuro donde viven los iconos */ --text: #191917; --soft: #55554E; --faint: #63635D; --brass: #8A6712; /* el dorado, oscurecido para leerse sobre claro */ --on-brass: #FFFFFF; --steel: #2C5F92; --leaf: #2F6E42; --on-leaf: #FFFFFF; /* Inter: la tipografia de producto por defecto de la ultima decada. La de sistema en Windows es Segoe UI, que tiene las terminaciones redondeadas y en titulares grandes se lee blanda. Si Inter no carga, cae a la de sistema y la pagina se ve igual de ordenada. */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; } * { box-sizing: border-box; } body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--font); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } .wrap { width: min(68rem, 100% - 2.5rem); margin-inline: auto; } canvas { display: block; } .top { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--ground); z-index: 30; } .top .wrap { display: flex; align-items: center; gap: .9rem; padding-block: .8rem; flex-wrap: wrap; } .logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; } .logo canvas { width: 28px; height: 28px; } .beta { background: var(--surface); color: var(--leaf); border: 1.5px solid var(--leaf); font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; margin-left: .35rem; line-height: 1; /* Los centros de las cajas SI coinciden; el problema es optico: "Parrot" no tiene letras con cola, asi que su masa visual queda sobre el centro de su caja y el distintivo se ve caido. Se sube a ojo, que es como se resuelve esto. */ transform: translateY(-2px); } .top nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; } .top nav a { color: var(--soft); text-decoration: none; font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } .top nav a:hover { color: var(--text); } .top nav a:focus-visible, .btn:focus-visible, summary:focus-visible, .menu:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } /* El botón de las tres rayitas: solo existe en el teléfono. */ .menu { display: none; margin-left: auto; background: none; border: 0; padding: .55rem .4rem; cursor: pointer; } .menu span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .18s ease, opacity .18s ease; } .menu span + span { margin-top: 5px; } .menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 62rem) { .menu { display: block; } /* El menú se despliega debajo, ocupando el ancho completo: en el teléfono un menú flotante tapa justo lo que la persona vino a mirar. */ .top nav { display: none; order: 4; width: 100%; margin-left: 0; flex-direction: column; align-items: flex-start; gap: 0; border-top: 1px solid var(--line); } .top nav.abierto { display: flex; } .top nav a { width: 100%; padding: .85rem .1rem; font-size: .78rem; border-bottom: 1px solid var(--line); } .top nav a:last-child { border-bottom: 0; } .logo { font-size: 1.15rem; } } .btn { display: inline-flex; align-items: center; gap: .6rem; /* Sobre un fondo liso, un color al 90% se ve igual de solido que al 100%: no hay nada detras que asome. Para que se NOTE traslucido hay que bajar de verdad la opacidad, y ahi el texto blanco pierde contraste. Se compensa agrandando la letra: sobre 18,66 px en negrita el minimo baja de 4,5 a 3, que es como se mide el texto grande. */ background: rgba(31, 82, 48, .68); color: var(--on-leaf); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); font-weight: 700; font-size: 1.2rem; text-decoration: none; padding: .72rem 1.5rem .72rem .7rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(34, 88, 53, .14); } .btn { white-space: nowrap; } .btn:hover { filter: brightness(1.1); } .btn .wa { flex: none; width: 2.05rem; height: 2.05rem; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; } .btn .wa svg { width: 1.25rem; height: 1.25rem; } .btn.sm { padding: .38rem .95rem .38rem .38rem; font-size: .82rem; box-shadow: none; background: rgba(31, 82, 48, .88); } .btn.sm .wa { width: 1.5rem; height: 1.5rem; } .btn.sm .wa svg { width: .95rem; height: .95rem; } /* ── portada ───────────────────────────────────────── */ .hero { padding-block: clamp(2.4rem, 6vw, 4rem) clamp(2rem, 5vw, 3.2rem); } /* minmax(0, …) y no 1fr a secas: con 1fr, la columna la mide el CONTENIDO, y como los mensajes del chat entran y salen solos, el telefono cambiaba de ancho a cada rato mientras la conversacion avanzaba. Con minmax(0, …) la columna manda sobre el contenido y el marco queda quieto. */ .hero .wrap { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; grid-template-columns: minmax(0, 1fr); } @media (min-width: 58rem) { .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } } .kicker { font-family: var(--mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin: 0 0 1.1rem; } .titular { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 1.75rem); } .titular canvas { flex: none; width: clamp(66px, 9vw, 100px); height: auto; } .titular > div { min-width: 0; } @media (max-width: 52rem) { .titular { flex-direction: column; align-items: flex-start; gap: .9rem; } .titular canvas { width: 74px; } } h1 { font-size: clamp(2.15rem, 5.6vw, 3.5rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 800; margin: 0 0 1rem; max-width: 13ch; text-wrap: balance; } h1 .hl { color: var(--brass); } /* En un teléfono, el tope de 13ch parte el titular donde no corresponde —"Tu agenda / personal, en / tu WhatsApp"— y deja las líneas chuecas. Ese tope existe para que en pantalla ancha el titular no se estire de lado a lado; en pantalla angosta el ancho ya lo pone el teléfono, así que sobra. */ @media (max-width: 34rem) { h1, h1 .segunda, .sub { max-width: none; } } h1 .segunda { display: block; font-size: .6em; font-weight: 600; letter-spacing: -.025em; color: var(--soft); margin-top: .45rem; max-width: 20ch; } /* `balance` reparte las líneas parejas: sin él, en un teléfono la bajada dejaba un "mes." solo en la última línea. */ .sub { font-size: clamp(1.02rem, 1.9vw, 1.18rem); color: var(--soft); max-width: 31ch; margin: 0 0 2rem; text-wrap: balance; } .under { font-family: var(--mono); font-size: .74rem; color: var(--faint); margin: .95rem 0 0; } /* ── el teléfono ──────────────────────────────────── La conversación va dentro de un marco de celular. No es adorno: Parrot vive en el teléfono, y verlo ahí adentro explica en un segundo lo que el texto tarda un párrafo en decir. */ .telefono { position: relative; background: #1B1B1F; border-radius: 2.6rem; padding: .7rem; width: 100%; max-width: 23rem; margin-inline: auto; box-shadow: 0 20px 45px rgba(25, 25, 23, .22), inset 0 0 0 1px rgba(255, 255, 255, .12); } .isla { position: absolute; top: 1.25rem; left: 50%; transform: translateX(-50%); width: 5rem; height: 1.05rem; background: #1B1B1F; border-radius: 999px; z-index: 5; } .phone { background: var(--surface); border-radius: 2rem; overflow: hidden; display: flex; flex-direction: column; min-width: 0; } /* La barra de estado: hora, señal y batería. Son los detalles que hacen que el ojo lo lea como un teléfono y no como un recuadro con burbujas. */ .estado { display: flex; align-items: center; justify-content: space-between; padding: .55rem 1.35rem .15rem; font-size: .72rem; font-weight: 700; color: var(--text); background: var(--surface-2); } .estado .senales { display: flex; align-items: center; gap: .34rem; } .estado .red { font-size: .62rem; font-weight: 700; letter-spacing: .02em; } .estado .barras { width: 1.05rem; height: .72rem; fill: currentColor; } .estado .pila { width: 1.55rem; height: .72rem; fill: currentColor; } .phone-top { display: flex; align-items: center; gap: .6rem; padding: .45rem .95rem .6rem; border-bottom: 1px solid var(--line); background: var(--surface-2); } /* La barra de escribir: el signo +, el campo, sticker, cámara y micrófono. */ .barra { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem .9rem; background: var(--surface-2); border-top: 1px solid var(--line); color: var(--faint); } .barra .bi { width: 1.35rem; height: 1.35rem; flex: none; } .barra .campo { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .38rem .8rem; font-size: .82rem; color: var(--faint); min-width: 0; } .phone-top canvas { width: 28px; height: 28px; } .pname { font-weight: 700; font-size: .85rem; } .psub { font-family: var(--mono); font-size: .66rem; color: var(--faint); letter-spacing: .1em; } /* El papel del chat: gris con figuritas, como se ve una conversacion de verdad. Sobre blanco, las burbujas no se distinguian del fondo y el recuadro parecia un formulario, no un chat. */ #chat { height: 33rem; flex: none; min-width: 0; overflow: hidden; padding: .95rem .85rem; display: flex; flex-direction: column; gap: .45rem; justify-content: flex-end; background-color: #E9E9E2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='%23D9D9D0'%3E%3Ccircle cx='22' cy='18' r='6'/%3E%3Crect x='58' y='12' width='15' height='15' rx='4'/%3E%3Crect x='110' y='28' width='11' height='16' rx='3'/%3E%3Crect x='30' y='46' width='10' height='10' rx='3'/%3E%3Ccircle cx='90' cy='52' r='4.5'/%3E%3Ccircle cx='46' cy='76' r='5.5'/%3E%3Crect x='96' y='84' width='18' height='13' rx='4'/%3E%3Crect x='16' y='108' width='13' height='13' rx='4'/%3E%3Ccircle cx='126' cy='120' r='5'/%3E%3Crect x='66' y='116' width='12' height='12' rx='3'/%3E%3Ccircle cx='136' cy='68' r='4'/%3E%3Crect x='72' y='60' width='9' height='9' rx='2'/%3E%3C/g%3E%3C/svg%3E"); } .msg { max-width: 86%; overflow-wrap: anywhere; padding: .48rem .72rem; font-size: .85rem; line-height: 1.5; border-radius: 9px; white-space: pre-wrap; animation: rise .3s ease both; } .msg { box-shadow: 0 1px 1px rgba(0,0,0,.09); } .msg.bot { align-self: flex-start; background: #FFFFFF; color: #111B21; border-bottom-left-radius: 2px; } .msg.me { align-self: flex-end; background: #D9FDD3; color: #111B21; border-bottom-right-radius: 2px; } @keyframes rise { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .msg { animation: none; } } /* ── idea fuerza ───────────────────────────────────── */ .fuerza { border-block: 1px solid var(--line); background: var(--surface); padding-block: clamp(2.2rem, 4.5vw, 3.2rem); } /* Dos columnas alineadas por el centro. Antes era una fila flexible pegada al borde inferior, y con el video adentro el texto quedaba flotando a media altura respecto de la portada del video. */ .fuerza .wrap { display: grid; gap: 1.8rem; align-items: center; } @media (min-width: 62rem) { .fuerza .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4rem); } } .fuerza .rot { font-family: var(--mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin: 0 0 .5rem; } .fuerza p.linea { font-size: clamp(1.5rem, 3.6vw, 2.35rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.25; margin: 0; max-width: 22ch; } .fuerza p.linea b { color: var(--brass); font-weight: 700; } .fuerza .quien { color: var(--text); font-size: clamp(1.02rem, 1.6vw, 1.15rem); font-weight: 600; max-width: 24ch; margin: 0; border-left: 2px solid var(--brass); padding-left: 1rem; } /* ── secciones ─────────────────────────────────────── */ section { padding-block: clamp(2.2rem, 4.5vw, 3.2rem); } .head { max-width: 44ch; margin-bottom: 1.8rem; } .head h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -.04em; font-weight: 800; margin: 0 0 .5rem; text-wrap: balance; font-feature-settings: "cv11", "ss01"; } .head p { color: var(--soft); margin: 0; } /* Un titulo sin bajada no arrastra el margen que existia para separarlo de ella: si no, esa seccion queda con mas aire que las demas sin motivo. */ .head h2:last-child { margin-bottom: 0; } /* Cuatro tarjetas que se reparten solas: 4 en ancho, 2 en tablet, 1 en el telefono. Sin numeros fijos de columnas, que con cuatro elementos dejan siempre una fila coja. */ .cards { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); } /* Las cuatro llevan su velo de color, no solo la destacada: con una sola teñida y tres blancas parecía que a las otras les faltaba algo. */ .card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem 1.35rem 1.55rem; transition: transform .18s ease, box-shadow .18s ease; } .card::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(168deg, var(--tinte, transparent) 0%, var(--surface) 62%); } .card > * { position: relative; z-index: 1; } .cards .card:nth-child(1) { --tinte: #FAEFD8; } .cards .card:nth-child(2) { --tinte: #DCE9F5; } .cards .card:nth-child(3) { --tinte: #E4E2F0; } .cards .card:nth-child(4) { --tinte: #DCEBDF; } .card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(25,25,23,.08); } /* El icono va en una pastilla propia, no en una franja del ancho completo: la franja se leia como cabecera de la tarjeta y le robaba el titulo. */ .card .art { width: 68px; height: 68px; border-radius: 18px; background: var(--art); margin-bottom: 1.05rem; display: grid; place-items: center; } .card .art canvas { width: 44px; height: 44px; } .card h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .5rem; letter-spacing: -.025em; } .card p { margin: 0 0 .6rem; color: var(--soft); font-size: .92rem; } .card p:last-child { margin-bottom: 0; } /* La primera lleva el borde dorado: es la promesa, no una función más. */ .card.clave { border-color: var(--brass); } .card.clave h3 { color: #7E5C0F; } /* ── planes ───────────────────────────────────────── Tres tarjetas con su propio tono. Los degradados son suaves a propósito: la página entera es gris claro y sobria, y unas tarjetas chillonas al medio la partirían en dos sitios distintos. Cada plan tiene un color que lo identifica, y el del medio se levanta con la cinta. */ .prices { display: grid; gap: 1.15rem; padding-top: .8rem; } @media (min-width: 50rem) { .prices { grid-template-columns: repeat(3, 1fr); align-items: start; } } .plan { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 1.7rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .45rem; overflow: hidden; } /* Un velo de color arriba, que se disuelve hacia abajo. */ .plan::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(165deg, var(--tinte) 0%, var(--surface) 78%); } .plan > * { position: relative; z-index: 1; } .plan.uno { --tinte: #DCE9F5; --acento: #2C5F92; } .plan.dos { --tinte: #FAEFD8; --acento: #7E5C0F; } .plan.tres { --tinte: #DCEBDF; --acento: #2F6E42; } .plan.best { border-color: var(--acento); box-shadow: 0 10px 30px rgba(25,25,23,.09); } @media (min-width: 50rem) { .plan.best { margin-top: -.9rem; padding-bottom: 1.9rem; } } .cinta { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--acento); color: #FFFFFF; font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: .28rem .85rem; border-radius: 0 0 10px 10px; } .plan.best .kick { margin-top: 1rem; } .plan .kick { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); font-weight: 700; } .plan .nombre { font-size: 1.7rem; font-weight: 800; letter-spacing: -.035em; margin: .1rem 0 .2rem; line-height: 1.1; } .plan .note { color: var(--soft); font-size: .92rem; margin: 0 0 .3rem; } .plan .amount { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--acento); margin-top: auto; padding-top: .8rem; } .plan .amount .cada { font-size: .82rem; font-weight: 600; letter-spacing: 0; color: var(--soft); } .plan .ghost { display: block; text-decoration: none; border: 1px dashed var(--line); border-radius: 999px; padding: .62rem 1rem; margin-top: .7rem; text-align: center; font-weight: 700; font-size: .88rem; color: var(--faint); background: rgba(255,255,255,.55); } .plan .ghost:hover { border-style: solid; border-color: var(--acento); color: var(--acento); } /* Lo que incluye cada plan. Sin viñeta de lista: un ✓ dibujado con el color del propio plan, que es lo que hace que las tres columnas se lean como tres cosas distintas y no como tres listas iguales. */ .plan .incluye { list-style: none; margin: 1rem 0 1.2rem; padding: 0; text-align: left; display: grid; gap: .5rem; } .plan .incluye li { position: relative; padding-left: 1.5rem; font-size: .88rem; line-height: 1.35; color: var(--soft); } .plan .incluye li::before { content: ""; position: absolute; left: .1rem; top: .34rem; width: .62rem; height: .34rem; border-left: 2px solid var(--acento); border-bottom: 2px solid var(--acento); transform: rotate(-45deg); opacity: .85; } /* El descuento, al lado del precio y no debajo: ahi es donde el ojo ya esta cuando decide si le conviene. */ .plan .amount .rebaja { display: inline-block; vertical-align: middle; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .18rem .45rem; border-radius: 999px; margin-left: .35rem; color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent); background: color-mix(in srgb, var(--acento) 10%, transparent); } .plan .ahorro { font-size: .84rem; color: var(--soft); margin: .15rem 0 0; } /* Al pasar por encima: se levanta, se pone POR DELANTE de los otros dos y se le enciende el borde. El color no es uno nuevo — es el `--acento` que ese plan ya tenia, asi que el brillo pertenece al cuadro en vez de estar pegado encima. `z-index` es lo que hace que funcione con el del medio, que sobresale: sin el, el recomendado tapa a sus vecinos cuando son ellos los que se levantan. */ .plan { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .plan:hover, .plan:focus-within { transform: translateY(-8px); z-index: 3; border-color: var(--acento); box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--acento) 38%, transparent), 0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent); } /* El boton se rellena con el color del plan: hasta ahora habia que adivinar cual de los tres se estaba mirando. */ .plan:hover .ghost, .plan:focus-within .ghost { border-style: solid; border-color: var(--acento); background: var(--acento); color: #fff; } /* Quien pidio menos movimiento no lo recibe. El borde y la sombra si: son los que dicen cual cuadro esta activo, y eso no es decoracion. */ @media (prefers-reduced-motion: reduce) { .plan { transition: box-shadow .22s ease, border-color .22s ease; } .plan:hover, .plan:focus-within { transform: none; } } /* La pantalla del cobro. Son dos planes y no tres, asi que la reja de la portada —pensada para tres— los dejaba angostos y perdidos al centro. */ /* Las paginas internas ponen los h3 en mayuscula; en un plan se lee a gritos y ademas no calza con la portada, donde dice 'Mensual'. */ .plan .nombre { text-transform: none; } .prices.dos { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); max-width: 40rem; margin-left: auto; margin-right: auto; } /* "Hoy pagas $0", arriba y solo. Es el dato que decide, y competia con el precio cuando estaba en el mismo parrafo. */ .hoycero { text-align: center; max-width: 32rem; margin: 0 auto 1.6rem; padding: .85rem 1.1rem; border-radius: 12px; background: color-mix(in srgb, #2F6E42 8%, transparent); border: 1px solid color-mix(in srgb, #2F6E42 22%, transparent); font-size: .93rem; line-height: 1.5; } /* Quien cobra y que no pasa por aca. */ .segura { max-width: 40rem; margin: 2rem auto 0; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--line) 16%, transparent); } .segura-t { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 650; font-size: .93rem; color: #2F6E42; } .segura-t .mp { height: 26px; width: auto; } .segura p { font-size: .88rem; color: var(--soft); margin: .7rem 0 0; line-height: 1.55; } .segura .claves { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; } .segura .claves li { position: relative; padding-left: 1.4rem; font-size: .86rem; color: var(--soft); } .segura .claves li::before { content: ""; position: absolute; left: .1rem; top: .3rem; width: .58rem; height: .32rem; border-left: 2px solid #2F6E42; border-bottom: 2px solid #2F6E42; transform: rotate(-45deg); } /* El resumen antes de pagar. Una linea por dato y el dato a la derecha: lo que se mira aca no es el texto, es la columna de la derecha, y en parrafo corrido esa columna no existe. */ .resumen { max-width: 27rem; margin: 1.6rem auto; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .resumen .lin { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .93rem; } .resumen .lin:last-child { border-bottom: 0; } .resumen .lin span:first-child { color: var(--soft); } .resumen .lin b { font-variant-numeric: tabular-nums; } /* El $0 de hoy en verde: es el dato que quita el miedo, y en negro pesa lo mismo que el precio de mas abajo. */ .resumen .lin .cero { color: #2F6E42; font-size: 1.15rem; } /* El festejo. Verificar el numero es el unico momento del alta en que la persona hizo algo y le salio bien; contestarle "Tu numero quedo verificado" es hablarle como un cajero automatico. */ @keyframes voltereta { 0% { transform: rotate(0) translateY(0) scale(1); } 35% { transform: rotate(-180deg) translateY(-26px) scale(1.06); } 70% { transform: rotate(-360deg) translateY(0) scale(1); } /* El rebote del final es lo que la hace parecer una caida con gracia y no un giro mecanico: sin el, el loro aterriza como un ladrillo. */ 82% { transform: rotate(-360deg) translateY(-7px) scale(.97); } 100% { transform: rotate(-360deg) translateY(0) scale(1); } } .festejo { text-align: center; padding: 1.2rem 0 .2rem; } .festejo img { width: 84px; height: auto; transform-origin: 50% 60%; animation: voltereta 1.15s cubic-bezier(.34,.8,.4,1) .15s both; } .festejo h2 { margin: .8rem 0 .3rem; } .festejo p { color: var(--soft); margin: 0 auto; max-width: 26rem; } /* Quien pidio menos movimiento ve al loro quieto: la pagina funciona igual, solo que sin la gracia. */ @media (prefers-reduced-motion: reduce) { .festejo img { animation: none; } } /* ── los botones de las paginas internas ───────────── `.cta` se usaba en cinco sitios del alta y no estaba definida en ninguna parte: `class="cta"` no hacia nada y quedaba un enlace subrayado con el color de enlace de la pagina. Van con `a.` delante para ganarle a las reglas que pintan enlaces por seccion, que era de donde salia el rojo. */ a.cta, a.wabtn { text-decoration: none; } a.cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .82rem 1.5rem; border-radius: 999px; background: var(--brass); color: var(--on-brass) !important; font-weight: 700; font-size: .98rem; line-height: 1; transition: background .15s ease, transform .12s ease; } a.cta:hover { background: #6F520E; } a.cta:active { transform: translateY(1px); } /* El de WhatsApp. Lleva a WhatsApp y no se parecia en nada a WhatsApp, en la pagina que ademas pide un dato personal. El verde es #008069, el primario de WhatsApp para botones, y no el #25D366 del logotipo: ese con letras blancas da 1,9:1 de contraste, que no se lee con el sol de frente. El #25D366 se usa donde brilla sin tapar nada — el circulito del icono. */ a.wabtn { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.4rem; border-radius: 999px; background: #008069; color: #FFFFFF !important; font-weight: 700; font-size: 1rem; line-height: 1; box-shadow: 0 2px 10px rgba(0,128,105,.3); transition: background .15s ease, box-shadow .15s ease; } a.wabtn:hover { background: #00695A; box-shadow: 0 4px 16px rgba(0,128,105,.4); } a.wabtn .circulo { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #25D366; flex: 0 0 auto; } a.wabtn .circulo svg { display: block; color: #FFFFFF; } /* El codigo y su cuenta regresiva. */ .codigo { text-align: center; margin: 2rem 0 1.4rem; } .codigo .rot { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); margin-bottom: .5rem; } .codigo .valor { font-size: 2.4rem; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; line-height: 1.1; } .codigo .reloj { font-size: .88rem; color: var(--soft); margin-top: .6rem; } /* Los segundos con ancho fijo: sin esto el numero baila al pasar de 1:09 a 1:08 y la linea entera se mueve, que llama la atencion hacia el sitio equivocado. */ .codigo .reloj b { font-variant-numeric: tabular-nums; color: #8A3D2E; } .vencido { text-align: center; margin: 2rem 0 1.4rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 14px; } .vencido .rot { font-weight: 800; font-size: 1.1rem; margin-bottom: .3rem; } .vencido p { color: var(--soft); margin: .3rem 0 .9rem; } /* Las tres pantallas del alta van centradas. Antes heredaban la alineacion del texto corrido y quedaban a la izquierda, con el loro al centro: dos ejes distintos en la misma pantalla. */ .saluda, .festejo, .codigo, .vencido { text-align: center; } .saluda p, .festejo p { margin-left: auto; margin-right: auto; } /* Como se sale. Tiene su propio recuadro porque la letra chica es exactamente donde nadie lo lee, y es lo que mas tranquiliza en la pantalla siguiente a entregar una tarjeta. */ /* Con `.manual` delante: las paginas internas cuelgan de esa clase, y `.manual h2` vive despues en el archivo con la misma especificidad — sin el prefijo, esta regla pierde por llegar antes. Ya paso con `.plan .nombre` y con `.salida h3`. */ .manual .festejo, .manual .festejo p, .manual .festejo h2, .festejo, .festejo p, .festejo h2 { text-align: center; } /* Y el h2 vuelve a ser BLOQUE. `.manual h2` es `display: flex` —lleva la pastilla del numero al lado— y en un contenedor flex `text-align` no alinea nada: eso lo decide `justify-content`. Por eso el titulo de /gracias se iba a la izquierda con el centrado puesto dos veces encima. El festejo no lleva pastilla, asi que no necesita ser flex. */ .manual .festejo h2, .festejo h2 { display: block; } .manual .festejo p, .festejo p { max-width: 30rem; margin-left: auto; margin-right: auto; } .manual .festejo img, .festejo img { display: block; margin-left: auto; margin-right: auto; } .salida { max-width: 32rem; margin: 1.6rem auto 0; padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: 14px; } .manual .salida h3, .salida h3 { margin: 0 0 .4rem; font-size: 1.05rem; text-transform: none; letter-spacing: -.01em; font-family: var(--font); font-weight: 700; color: var(--text); } .salida p { color: var(--soft); font-size: .92rem; margin: 0; } .salida ol { margin: .6rem 0 0; padding-left: 1.2rem; color: var(--soft); font-size: .92rem; } .salida li { margin: .4rem 0; } .formcobro { max-width: 27rem; margin: 1.6rem auto 0; } .formcobro label { display: block; font-weight: 650; font-size: .9rem; margin-bottom: .4rem; } .formcobro input { width: 100%; box-sizing: border-box; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 1rem; background: #fff; color: inherit; } .formcobro input:focus { outline: 2px solid var(--acc, #7E5C0F); outline-offset: 1px; border-color: transparent; } /* 16px o mas en el telefono: por debajo de eso Safari hace zoom al tocar el campo y deja la pagina torcida, y la persona cree que se rompio algo. */ @media (max-width: 30rem) { .formcobro input { font-size: 16px; } } /* Ignacio pidio el 22/09/2026 que pagar fuera un boton neutro de Parrot: la marca de Mercado Pago en el boton y otra vez debajo lo anunciaba dos veces. Se revierte a proposito la decision de usar su logo para dar confianza antes de entregar la tarjeta. La pagina SIGUE diciendo quien cobra: arriba, en la nota del correo, y abajo, donde aclara que la tarjeta se entrega en la pagina de Mercado Pago, no en la nuestra. Ambos avisos deben mantenerse. El verde propio evita confundir pagar con abrir un chat de WhatsApp; se conserva el ancho, la forma y el tamano aprobados. */ .formcobro .btn { background: var(--leaf); color: var(--on-leaf); padding: .85rem 1.4rem; } .formcobro .cta, .formcobro .btn { display: block; width: 100%; margin-top: 1.1rem; text-align: center; border: 0; cursor: pointer; font: inherit; font-weight: 650; } .fineprint { color: var(--faint); font-size: .82rem; margin: 1.5rem 0 0; } details { border-top: 1px solid var(--line); } details:last-of-type { border-bottom: 1px solid var(--line); } summary { cursor: pointer; list-style: none; padding: 1.05rem 0; font-weight: 650; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; font-family: var(--mono); color: var(--brass); font-size: 1.15rem; } details[open] summary::after { content: "\2013"; } .panel { padding-bottom: 1.4rem; color: var(--soft); max-width: 64ch; font-size: .94rem; } .panel ul { padding-left: 1.1rem; margin: .4rem 0; } .panel li { margin: .28rem 0; } .panel a { color: var(--brass); } /* ── el trabajo que no se ve ───────────────────────── */ /* Sin recuadros: cuatro columnas separadas por una linea fina. Cuatro cajas blancas seguidas pesaban mas que los numeros que iban adentro. */ .cifras { display: grid; gap: 2rem 0; } @media (min-width: 34rem) { .cifras { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 58rem) { .cifras { grid-template-columns: repeat(4, 1fr); } } .cifra { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding-inline: 1rem; } @media (min-width: 58rem) { .cifra + .cifra { border-left: 1px solid var(--line); } } .cifra .emo { font-size: 1.35rem; line-height: 1; } .cifra .n { font-size: clamp(2.2rem, 4.6vw, 3rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--brass); font-variant-numeric: tabular-nums; } .cifra .q { color: var(--soft); font-size: .88rem; line-height: 1.45; max-width: 20ch; } .obra .cierre { color: var(--soft); margin: 1.8rem auto 0; max-width: 56ch; text-align: center; font-size: .97rem; } .obra .cierre b { color: var(--text); } /* ── confianza ────────────────────────────────────── Sin recuadros. Va como una franja aparte, con los logotipos grandes y en sus colores de verdad: eso es lo que se reconoce de un vistazo, no el titulo que va debajo. Tres cajas blancas mas, despues de las tarjetas y los planes, cansaban la pagina. */ .confianza { border-block: 1px solid var(--line); background: var(--surface-2); padding-block: clamp(2.4rem, 5vw, 3.4rem); } .confianza .head { margin-bottom: 1.7rem; } /* Columnas automaticas, no tres fijas. Con tres sellos daba lo mismo; al agregar el cuarto, las tres fijas dejaban una fila de 3 + 1 solo, que es la "fila coja" contra la que ya advierte el comentario de .cards. Asi el numero de columnas lo decide el ancho y nunca sobra uno. */ .sellos { display: grid; gap: 1.9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .sello { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; } .sello .logo { height: 58px; display: flex; align-items: center; } .sello .logo svg { height: 58px; width: auto; } .sello .t { font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em; } .sello .d { color: var(--soft); font-size: .89rem; line-height: 1.5; max-width: 34ch; } .sello .pronto { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); border-radius: 20px; padding: .05rem .45rem; margin-left: .4rem; vertical-align: .14em; } .marcas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1rem; margin-top: .6rem; } .marca { display: inline-flex; align-items: center; } .marca svg { height: 20px; width: auto; display: block; } /* Los dos son lockups de dos líneas: con la altura de un logotipo de una sola línea, su letra quedaría a la mitad del tamaño. */ .marca svg[aria-label^="Mercado"], .marca svg[aria-label^="Webpay"] { height: 44px; } footer { border-top: 1px solid var(--line); padding-block: 2rem 3rem; color: var(--faint); font-size: .82rem; } footer .row { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; } footer a { color: var(--soft); } /* El enlace del Instagram. El icono se mide en `em`, asi que crece y se achica con el texto de al lado y nunca desalinea la linea de enlaces. */ footer a.ig { display: inline-flex; align-items: center; gap: .32em; white-space: nowrap; } footer a.ig svg { width: 1.05em; height: 1.05em; display: block; flex: 0 0 auto; } footer a.ig:hover { color: var(--text); } footer .legal { margin: .9rem 0 0; font-size: .74rem; color: var(--faint); } /* ── el teléfono ──────────────────────────────────── Es el canal principal: la página se comparte por WhatsApp y se abre en el celular. Acá se corrige lo que en escritorio no se nota — las etiquetas en versalitas que quedaban bajo los 11 px, la conversación de ejemplo que se comía media pantalla antes de dejar ver nada, y los enlaces sueltos dentro del texto, que con el dedo son un blanco de 17 px de alto. */ @media (max-width: 46rem) { #chat { height: 25rem; } .beta { font-size: .7rem; padding: .2rem .5rem; } .psub { font-size: .72rem; } .kicker, .fuerza .rot, .promesa .rot { font-size: .8rem; } .plan .kick, .sello .pronto { font-size: .74rem; } .under { font-size: .8rem; } /* En la cabecera del teléfono no cabe el texto sin partirse en dos líneas: queda solo el círculo, que igual se entiende. */ .top .btn.sm { padding: .42rem; } .top .btn.sm .etq { display: none; } /* El dedo necesita 34 px; el logo y el botón se quedaban en 29. */ .top .logo, .top .btn.sm { min-height: 34px; } footer a, .panel a, .fineprint a, .nota a, .videoteca .pieza p a { display: inline-block; padding-block: .5rem; } footer .row { gap: .2rem 1.5rem; } } /* ── videos ───────────────────────────────────────── Se muestra una portada con el botón de play y el video de YouTube se carga SOLO al tocarlo. Así la página no le pide nada a YouTube mientras nadie mire —ni cookies, ni el peso del reproductor, que en el celular con datos se nota— y el dominio es el "sin cookies" de YouTube. */ .video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; display: block; padding: 0; } .video img { width: 100%; height: 100%; object-fit: cover; display: block; } .video iframe { width: 100%; height: 100%; border: 0; display: block; } .video .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(11,22,38,.05), rgba(11,22,38,.45)); } .video .play span { width: 62px; height: 44px; border-radius: 10px; background: #D6403A; display: grid; place-items: center; box-shadow: 0 3px 14px rgba(0,0,0,.45); transition: transform .15s ease; } .video:hover .play span, .video:focus-visible .play span { transform: scale(1.08); } .video .play svg { width: 20px; height: 20px; fill: #FFFFFF; } .video:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } .video .rotulo { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .85rem; font-size: .85rem; font-weight: 600; color: #FFFFFF; text-align: left; background: linear-gradient(180deg, transparent, rgba(11,22,38,.85)); } /* En la banda "Se acuerda de", el video ocupa la columna derecha que hasta ahora estaba vacía. */ .fuerza .video { width: 100%; } .videoteca { display: grid; gap: 1.4rem; } @media (min-width: 52rem) { .videoteca { grid-template-columns: repeat(2, 1fr); } } .videoteca .pieza h3 { font-size: 1.05rem; font-weight: 700; margin: .8rem 0 .3rem; letter-spacing: -.02em; } .videoteca .pieza p { color: var(--soft); font-size: .92rem; margin: 0; } .videoteca .pieza.primero { grid-column: 1 / -1; } /* ── contacto ─────────────────────────────────────── Quien recibe un mensaje de un numero desconocido quiere saber quien esta al otro lado. Un correo que se ve, una ciudad y una etapa declarada valen mas que cualquier promesa de la portada. */ .contacto { display: grid; gap: 1.15rem; } @media (min-width: 50rem) { .contacto { grid-template-columns: repeat(3, 1fr); } } .dato { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem 1.3rem; } .dato .rot { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: .55rem; font-weight: 700; } .dato .correo { display: inline-block; padding-block: .3rem; min-height: 34px; font-size: 1.05rem; font-weight: 700; color: var(--brass); text-decoration: none; word-break: break-word; letter-spacing: -.015em; } .dato .correo:hover { text-decoration: underline; } .dato .fuerte { font-size: 1.05rem; font-weight: 700; margin: 0; letter-spacing: -.015em; } .dato p { color: var(--soft); font-size: .9rem; margin: .5rem 0 0; } /* ── el manual ────────────────────────────────────── Las frases van como burbujas de mensaje enviado, no como lista: son cosas que la persona DICE, y con forma de mensaje se leen de un vistazo. En texto corrido se perdían en el teléfono. */ .manual h2 { font-size: 1.25rem; margin: 2.4rem 0 .3rem; letter-spacing: -.025em; display: flex; align-items: center; gap: .6rem; font-weight: 700; } .manual h2 .n { background: var(--brass); color: var(--on-brass); font-size: .78rem; font-weight: 800; border-radius: 999px; padding: .1rem .6rem; flex: none; font-family: var(--mono); } .manual h3 { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin: 1.5rem 0 .6rem; font-weight: 700; } .manual .f { background: #D9FDD3; color: #0B1F17; border-radius: 14px; border-top-right-radius: 4px; padding: .6rem .9rem; margin: .4rem 0 .4rem auto; max-width: 92%; width: fit-content; font-size: 1rem; font-weight: 500; box-shadow: 0 1px 2px rgba(25, 25, 23, .12); } .manual .nota { font-size: .92rem; color: var(--soft); margin: .9rem 0 0; clear: both; padding-top: .4rem; } .manual .nota b { color: var(--text); } .manual code { background: var(--surface); border: 1px solid var(--line); padding: .1rem .38rem; border-radius: 5px; font-size: .92em; } .manual a { color: var(--brass); } .manual ul { padding-left: 1.15rem; margin: .7rem 0 0; color: var(--soft); } .manual li { margin: .4rem 0; } .manual li b { color: var(--text); } .manual .head p { color: var(--soft); } /* --------------------------------------------------------------------- El aviso de propiedad intelectual. Va con otra voz que el resto del sitio a proposito: serif, justificado, clausulas numeradas y sin una sola concesion. El resto de las paginas explican; esta declara. Un texto legal escrito con la tipografia de un producto se lee como una sugerencia, y lo que dice no es una sugerencia. --------------------------------------------------------------------- */ .doc { font-family: Georgia, "Times New Roman", "Nimbus Roman", serif; max-width: 40rem; margin: 0 auto; } .doc .cab { border-bottom: 2px solid var(--text); padding-bottom: 1.1rem; margin-bottom: 2rem; } .doc .cab h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 3.4vw, 1.75rem); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 .7rem; line-height: 1.25; } /* La comparecencia: el parrafo que abre el aviso. Va un punto mas grande que el cuerpo y sin sangria, como el encabezamiento de una escritura. Reemplazo al bloque de datos del titular, que prometia identificar y no identificaba a nadie: "persona natural domiciliada en Chile" describe a diecinueve millones. */ /* La estampa: la comparecencia enmarcada entre dos filigranas. No es adorno gratuito — le da al documento forma de instrumento y separa de un vistazo lo que se declara de lo que se articula despues. */ .doc .estampa { text-align: center; margin: 0 0 2.4rem; } /* Chica a proposito: enmarca la comparecencia, no compite con ella. A 78% del ancho se comia la atencion en el telefono. */ .doc .flor { display: block; width: min(11rem, 46%); height: auto; margin: 0 auto; color: var(--brass); opacity: .85; } .doc .estampa .comparece { border: 0; padding: 1rem .2rem; margin: 0; } .doc .comparece { font-size: 1.02rem; line-height: 1.7; text-align: justify; hyphens: auto; -webkit-hyphens: auto; margin: 0 0 2.2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); } /* El recuadro "en simple". El resto de esta pagina declara en registro formal, y esta bien que asi sea: le habla a un abogado. Pero quien entra a mirar si esto esta resguardado casi nunca lo es, y una lista de leyes citadas no le dice si puede confiar. Por eso va antes de la lista de titulos y con otra voz — se lee como una explicacion, no como una clausula, y se distingue a la vista para que nadie lo confunda con el texto que si es dispositivo. */ .doc .enllano { border-left: 3px solid var(--brass); background: rgba(138, 103, 18, .045); padding: 1.15rem 1.25rem .35rem; border-radius: 0 8px 8px 0; margin: 0 0 1.9rem; } .doc .enllano p { font-size: .95rem; line-height: 1.72; text-align: left; hyphens: none; margin: 0 0 .85rem; } .doc .marca-nombre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; } .doc .meta { font-size: .82rem; line-height: 1.85; color: var(--soft); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .doc .meta b { color: var(--text); font-weight: 600; } .doc h3 { font-family: Georgia, "Times New Roman", serif; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; margin: 2.1rem 0 .75rem; } /* Alineado a la izquierda POR DEFECTO, y justificado solo cuando la columna da el ancho. Antes era al reves —justificado siempre, con una excepcion para el telefono— y eso deja el caso malo como el que se aplica si algo falla: una hoja de estilo vieja en cache, un ancho intermedio, un navegador que no entiende la consulta. El defecto tiene que ser el que nunca se ve mal. Y sin `hyphens: auto`: partia "Intelectual" en "Intelec-tual" a mitad de una clausula, que en un documento legal se lee descuidado. */ /* Justificado en todos los anchos, telefono incluido: es un documento legal y asi se ve impreso. Con `hyphens: auto` de la mano —en una columna angosta, justificar sin partir palabras abre rios de espacio entre ellas; las dos cosas van juntas o ninguna. El idioma sale del , que es lo que le dice al navegador donde puede partir. */ .doc p { font-size: .95rem; line-height: 1.72; text-align: justify; margin: 0 0 .85rem; hyphens: auto; -webkit-hyphens: auto; } .doc ol { font-size: .95rem; line-height: 1.72; text-align: justify; margin: 0 0 .85rem; padding-left: 1.5rem; hyphens: auto; -webkit-hyphens: auto; } .doc ol li { margin-bottom: .5rem; } .doc .cierre { margin-top: 2.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--soft); text-align: left; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .manual .wrap { width: min(38rem, 100% - 2.5rem); }