/* CAPE — sólo lo que las utilidades de Tailwind no dan. OJO: con el CDN de Tailwind `@apply` NO funciona (la maqueta original lo usaba y por eso el botón de "Agendar" salía sin estilos). Aquí va CSS plano. */ :root { color-scheme: light; } body { font-family: Inter, system-ui, -apple-system, sans-serif; } h1, h2, h3, h4 { font-family: 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; } /* Etiquetas monoespaciadas (kickers, tags) */ .mono-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } /* Botones */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; padding: .8rem 1.6rem; font-weight: 600; font-size: .95rem; line-height: 1.2; min-height: 44px; /* área táctil mínima */ cursor: pointer; text-align: center; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .btn-primary { background: linear-gradient(135deg, #6c38f0 0%, #5306d8 100%); color: #fff; border: none; box-shadow: 0 10px 24px -12px rgba(83, 6, 216, .7); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(83, 6, 216, .8); } .btn-ghost { border: 1.5px solid #5306d8; color: #5306d8; background: transparent; } .btn-ghost:hover { background: #f1ebff; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } /* Foco visible en todo lo interactivo (la maqueta no tenía) */ /* Sin border-radius aquí: el contorno ya sigue el radio propio de cada elemento. Forzar 6px convertía en rectángulo cualquier botón redondo al enfocarlo. */ :focus-visible { outline: 3px solid #6c38f0; outline-offset: 2px; } /* Tarjetas */ .card { background: #fff; border: 1px solid #e5e2ee; border-radius: 18px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(18, 16, 26, .35); border-color: #cfc4f3; } /* Aparición al hacer scroll */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; } [data-reveal].in { opacity: 1; transform: none; } /* ── Rejilla de integraciones: apagadas hasta que pasás por encima ──── */ .logo-cell { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.25rem .5rem; border-radius: 14px; color: #8c86a3; font-weight: 600; text-align: center; opacity: .62; filter: grayscale(1); transition: opacity .35s ease, filter .35s ease, transform .35s ease, background-color .35s ease; } .logo-cell:hover, .logo-cell:focus-within { opacity: 1; filter: none; transform: scale(1.06); background: #fff; color: #12101a; } .logo-cell__ico { color: #5306d8; font-size: 30px; } /* Aro circular del ícono en las tarjetas */ .ring { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #f1ebff, #e0d3ff); } /* Inputs */ .field { width: 100%; background: #fff; border: 1px solid #d9d5e6; border-radius: 10px; padding: .75rem 1rem; font-size: 1rem; /* 16px: evita el auto-zoom de iOS */ min-height: 44px; color: #12101a; transition: border-color .2s ease, box-shadow .2s ease; } .field:focus { outline: none; border-color: #5306d8; box-shadow: 0 0 0 3px rgba(83, 6, 216, .15); } .field[aria-invalid="true"] { border-color: #ba1a1a; box-shadow: 0 0 0 3px rgba(186, 26, 26, .12); } .field-error { color: #93000a; font-size: .8rem; margin-top: .35rem; display: block; } /* Calendario */ .day { aspect-ratio: 1; min-height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: .95rem; font-variant-numeric: tabular-nums; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .day:hover:not(:disabled) { background: #f1ebff; border-color: #cfc4f3; } .day[aria-pressed="true"] { background: #5306d8; color: #fff; font-weight: 600; } .day:disabled { opacity: .3; cursor: not-allowed; } .slot { border: 1px solid #d9d5e6; border-radius: 10px; padding: .7rem .5rem; min-height: 44px; font-family: 'JetBrains Mono', monospace; font-size: .85rem; color: #5306d8; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .slot:hover:not(:disabled) { border-color: #5306d8; background: #f1ebff; } .slot[aria-pressed="true"] { background: #5306d8; border-color: #5306d8; color: #fff; font-weight: 600; } /* Hora ya reservada. Mismo criterio que .day:disabled, y con línea encima para que se note sin depender solo del color. */ .slot:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; background: #f6f5fa; border-color: #e6e3ef; } /* ══ Nav: píldora flotante de cristal ═══════════════════════════════════ Proporciones de la referencia (Navigation 12): píldora de 60px y el botón de la derecha (44px) con el MISMO margen arriba, abajo y a la derecha (8px). Así su curva es concéntrica con la de la píldora; con 4px arriba y 12px a la derecha el botón "mordía" el giro de la esquina. Dos temas por variables: claro por defecto y oscuro (.is-oscuro, lo pone cape.js) mientras la píldora pasa por encima del hero oscuro — vidrio blanco sobre morado casi negro se veía gris sucio. La regla global de prefers-reduced-motion ya apaga estas transiciones. */ .cape-nav { --nav-bg: rgba(255, 255, 255, .8); --nav-borde: rgba(18, 16, 26, .08); --nav-texto: #4a4560; --nav-activo: #5306d8; --nav-tinta: #12101a; --nav-suave: #f1ebff; --nav-panel: #fff; --nav-linea: #e5e2ee; } .cape-nav.is-oscuro { --nav-bg: rgba(24, 16, 46, .5); --nav-borde: rgba(255, 255, 255, .12); --nav-texto: rgba(255, 255, 255, .7); --nav-activo: #fff; --nav-tinta: #fff; --nav-suave: rgba(255, 255, 255, .1); --nav-panel: #17121f; --nav-linea: rgba(255, 255, 255, .1); } .pill-nav { background: var(--nav-bg); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--nav-borde); box-shadow: 0 10px 30px -14px rgba(18, 10, 40, .3); transition: background-color .4s ease, border-color .4s ease; } /* Dentro de la píldora el botón no salta al hover (rompería el margen parejo) y su sombra es corta para no chorrear por debajo del borde. */ .pill-nav .btn-primary, .pill-nav .btn-primary:hover { transform: none; box-shadow: 0 6px 16px -8px rgba(83, 6, 216, .6); } /* El logo morado pierde contraste sobre el vidrio oscuro; se aclara sólo ahí. */ .pill-nav__logo { transition: filter .4s ease; } .cape-nav.is-oscuro .pill-nav__logo { filter: brightness(1.5) saturate(1.1); } .pill-nav__link { color: var(--nav-texto); transition: color .25s ease, background-color .4s ease; } .pill-nav__link:hover, .pill-nav__link[aria-current="page"] { color: var(--nav-activo); } /* Píldora que se desliza bajo el link activo/hovereado (JS: capePillIndicador). */ .pill-nav__indicator { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: var(--nav-suave); opacity: 0; width: 0; transition: transform .4s cubic-bezier(.22, 1, .36, 1), width .4s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, background-color .4s ease; will-change: transform, width; } .pill-nav__indicator.is-ready { opacity: 1; } /* Hamburguesa de 3 barras que se convierte en X con un leve rebote. Círculo de 44px: con border-radius propio el aro de foco también es un círculo dentro de la píldora (antes salía un cuadrado que se montaba en la curva). */ .pill-nav__burger { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; color: var(--nav-tinta); transition: background-color .25s ease, color .4s ease; } .pill-nav__burger:hover, .pill-nav__burger[aria-expanded="true"] { background: var(--nav-suave); } .pill-nav__burger-bar { position: absolute; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease, width .25s ease; } .pill-nav__burger-bar:nth-child(1) { transform: translateY(-6px); } .pill-nav__burger-bar:nth-child(3) { transform: translateY(6px); } .pill-nav__burger[aria-expanded="true"] .pill-nav__burger-bar:nth-child(1) { transform: rotate(45deg); } .pill-nav__burger[aria-expanded="true"] .pill-nav__burger-bar:nth-child(2) { opacity: 0; width: 0; } .pill-nav__burger[aria-expanded="true"] .pill-nav__burger-bar:nth-child(3) { transform: rotate(-45deg); } /* Panel móvil: tarjeta redondeada (24px) del mismo ancho que la píldora. La tarjeta ES la caja que crece (max-height, medido en JS), así sus esquinas de abajo van redondeadas durante toda la animación en vez de recortarse. grid-template-rows:0fr/1fr se probó primero pero en WebKit el track no termina de colapsar (~42px en vez de 0). content-box: max-height no cuenta el borde, así el alto medido del contenido cabe exacto. SÓLIDA, sin vidrio: con blur el botón "Agendar" del hero se transparentaba debajo del del menú — parecían dos botones fantasma superpuestos. */ .pill-nav__mobile { box-sizing: content-box; overflow: hidden; max-height: 0; opacity: 0; border-radius: 24px; background: var(--nav-panel); border: 1px solid var(--nav-borde); box-shadow: 0 18px 40px -18px rgba(18, 10, 40, .45); transition: max-height .5s cubic-bezier(.34, 1.15, .64, 1), opacity .25s ease, background-color .4s ease; } .pill-nav__mobile.is-open { opacity: 1; } .pill-nav__sep { border-bottom: 1px solid var(--nav-linea); } /* Filas con radio 16px = 24px de la tarjeta − 8px de su relleno (concéntricas). */ .pill-nav__mobile-link[aria-current="page"] { background: var(--nav-suave); } .pill-nav__mobile-link[aria-current="page"]::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill-nav__mobile-link { opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.15, .64, 1), color .25s ease; } .pill-nav__mobile.is-open .pill-nav__mobile-link { opacity: 1; transform: none; } /* Acotado a los links DENTRO del