/* 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) */ :focus-visible { outline: 3px solid #6c38f0; outline-offset: 2px; border-radius: 6px; } /* 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 ═══════════════════════════════════ Flota sobre secciones claras Y sobre el hero oscuro (por eso es vidrio esmerilado, no un color plano: un fondo sólido se vería mal en uno de los dos). La regla global de prefers-reduced-motion (arriba) ya apaga estas transiciones con !important; no hace falta repetirla aquí. */ .pill-nav { background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 10px 30px -12px rgba(18, 10, 40, .22), 0 1px 2px rgba(18, 10, 40, .05); } /* El panel desplegable va SÓLIDO, sin vidrio: al abrirse queda flotando sobre el resto de la página (el header es fixed, no empuja el contenido). Con blur + transparencia, aunque fuera al 96%, el blur igual arrastraba la silueta del título y el botón "Agendar" de atrás — parecían dos botones fantasma superpuestos. La píldora de arriba sí puede quedarse en vidrio: el problema es propio de un panel grande con botones clicables encima. */ .pill-nav__mobile-inner.pill-nav { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Píldora que se desliza bajo el link activo/hovereado (JS: capePillIndicador). */ .pill-nav__indicator { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); border-radius: 999px; background: #f1ebff; opacity: 0; width: 0; transition: transform .4s cubic-bezier(.22, 1, .36, 1), width .4s cubic-bezier(.22, 1, .36, 1), opacity .25s 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. */ .pill-nav__burger { position: relative; width: 40px; height: 40px; display: grid; place-items: center; } .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: alto animado por max-height, medido en JS (capePillMobileAlto). grid-template-rows:0fr/1fr se probó primero pero en WebKit el track no termina de colapsar (queda en el contenido mínimo, ~42px, en vez de 0) — max-height con el valor real del contenido sí es consistente entre motores. */ /* Sin margen propio: el header YA tiene px-4, igual que la píldora de arriba. Un margen aquí ENCIMA de ese padding metía el panel 16px más adentro que la píldora por cada lado — quedaba angosto y descuadrado, no pegado a ella. */ .pill-nav__mobile { overflow: hidden; max-height: 0; transition: max-height .5s cubic-bezier(.34, 1.15, .64, 1); } .pill-nav__mobile-link { opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.15, .64, 1); } .pill-nav__mobile.is-open .pill-nav__mobile-link { opacity: 1; transform: none; } /* Acotado a los links DENTRO del