/* ========================================================================== AR Centro de Belleza — hoja de estilos común Web pública · panel de gestión · propuesta El tema se fija con data-tema="claro|oscuro" en . Sin atributo, manda la preferencia del sistema. ========================================================================== */ :root { --tinta: #221C19; --tinta-2: #5A4E47; --tinta-3: #8D8078; --crema: #FAF6F1; --papel: #FFFFFF; --arena: #F2EAE1; --arena-2: #E6DACC; --linea: #E2D6C8; --linea-2: #EFE6DB; --vino: #7C3346; --vino-os: #5F2436; --vino-cl: #F8EFF1; --vino-txt: #FFFFFF; --oro: #A8834C; --oro-cl: #F5EDE0; /* Estados: validados para daltonismo, siempre con etiqueta de texto */ --est-pend: #C07A12; --est-conf: #8E3C55; --est-hecha: #2E9C8A; --est-nula: #8A8177; --est-pend-f: #FCF3E4; --est-conf-f: #F9EFF2; --est-hecha-f:#E8F7F4; --peligro: #B4544A; --grano-op: .038; --grano-mez: multiply; --mapa-filtro: none; --lienzo-oro: 38%; --lienzo-vino: 44%; --r-s: 6px; --r-m: 12px; --r-l: 20px; --r-full: 999px; --sombra-s: 0 1px 2px rgba(34,28,25,.05), 0 2px 8px rgba(34,28,25,.04); --sombra-m: 0 2px 6px rgba(34,28,25,.05), 0 14px 34px rgba(34,28,25,.07); --sombra-l: 0 10px 26px rgba(34,28,25,.08), 0 34px 70px rgba(34,28,25,.11); --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; --nav-h: 70px; --ancho: 1220px; } /* --- Tema oscuro -------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --tinta: #F1E9E2; --tinta-2: #BCAFA5; --tinta-3: #8B7F76; --crema: #17120F; --papel: #1F1915; --arena: #241D18; --arena-2: #302720; --linea: #382E26; --linea-2: #29211B; --vino: #C4657F; --vino-os: #D9819A; --vino-cl: #2B1A20; --vino-txt: #1A1210; --oro: #C6A26B; --oro-cl: #2A2116; --est-pend: #C2861F; --est-conf: #B85C7E; --est-hecha: #3FBFA6; --est-nula: #948880; --est-pend-f: #2A2015; --est-conf-f: #2B1A20; --est-hecha-f: #15302C; --peligro: #E08A80; --grano-op: .05; --grano-mez: screen; --mapa-filtro: invert(1) hue-rotate(180deg) saturate(.75) brightness(.9); --lienzo-oro: 62%; --lienzo-vino: 66%; --sombra-s: 0 1px 2px rgba(0,0,0,.35); --sombra-m: 0 2px 6px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.4); --sombra-l: 0 10px 26px rgba(0,0,0,.4), 0 34px 70px rgba(0,0,0,.5); } } :root[data-tema="oscuro"] { --tinta: #F1E9E2; --tinta-2: #BCAFA5; --tinta-3: #8B7F76; --crema: #17120F; --papel: #1F1915; --arena: #241D18; --arena-2: #302720; --linea: #382E26; --linea-2: #29211B; --vino: #C4657F; --vino-os: #D9819A; --vino-cl: #2B1A20; --vino-txt: #1A1210; --oro: #C6A26B; --oro-cl: #2A2116; --est-pend: #C2861F; --est-conf: #B85C7E; --est-hecha: #3FBFA6; --est-nula: #948880; --est-pend-f: #2A2015; --est-conf-f: #2B1A20; --est-hecha-f: #15302C; --peligro: #E08A80; --grano-op: .05; --grano-mez: screen; --mapa-filtro: invert(1) hue-rotate(180deg) saturate(.75) brightness(.9); --lienzo-oro: 62%; --lienzo-vino: 66%; --sombra-s: 0 1px 2px rgba(0,0,0,.35); --sombra-m: 0 2px 6px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.4); --sombra-l: 0 10px 26px rgba(0,0,0,.4), 0 34px 70px rgba(0,0,0,.5); } /* ========================================================================== BASE ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.62; color: var(--tinta); background: var(--crema); -webkit-font-smoothing: antialiased; } /* Grano: lo que separa un plano de color de algo con intención */ body::before { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: var(--grano-op); mix-blend-mode: var(--grano-mez); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.06; letter-spacing: -.022em; } h1 { font-size: clamp(2.7rem, 7.4vw, 5rem); } h2 { font-size: clamp(2rem, 4.6vw, 3.05rem); } h3 { font-size: 1.2rem; line-height: 1.26; letter-spacing: -.012em; } p { margin: 0 0 1em; } a { color: var(--vino); text-underline-offset: 3px; } ::selection { background: var(--vino); color: var(--vino-txt); } :where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--vino); outline-offset: 3px; border-radius: 3px; } .contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); } .estrecho { max-width: 800px; } .seccion { padding: clamp(60px, 8.5vw, 120px) 0; } .seccion--arena { background: var(--arena); } .seccion--papel { background: var(--papel); } .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .entradilla { font-size: 1.05rem; color: var(--tinta-2); max-width: 60ch; } .apunte { font-size: .84rem; color: var(--tinta-3); line-height: 1.5; } /* --- Cabecera de sección: índice y palabra. Sin florituras -------------- */ .cab { display: grid; grid-template-columns: 76px 1fr; align-items: start; gap: 0 4px; padding-top: 22px; border-top: 1px solid var(--linea); margin-bottom: clamp(32px, 5vw, 54px); } .cab__idx { font-family: var(--mono); font-size: .76rem; color: var(--tinta-3); letter-spacing: .1em; padding-top: .6em; } .cab__nota { grid-column: 2; margin: 14px 0 0; color: var(--tinta-2); max-width: 54ch; font-size: .97rem; } @media (max-width: 620px) { .cab { grid-template-columns: 1fr; gap: 8px; } .cab__idx { padding-top: 0; } .cab__nota { grid-column: 1; } } /* ========================================================================== BOTONES ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--sans); font-size: .92rem; font-weight: 600; line-height: 1; padding: 16px 28px; border-radius: var(--r-full); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .btn--principal { background: var(--vino); color: var(--vino-txt); } .btn--principal:hover { background: var(--vino-os); transform: translateY(-1px); } .btn--linea { background: transparent; color: var(--tinta); border-color: var(--linea); } .btn--linea:hover { border-color: var(--vino); color: var(--vino); } .btn--claro { background: var(--papel); color: var(--vino); } .btn--wa { background: #1FA855; color: #fff; } .btn--wa:hover { background: #17843F; } .btn--pequeno { padding: 11px 18px; font-size: .84rem; } .btn--bloque { width: 100%; } .btn[disabled] { opacity: .35; cursor: not-allowed; transform: none; } .enlace-flecha { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; transition: gap .18s ease; } .enlace-flecha:hover { gap: 13px; } .cambia-tema { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--tinta-2); cursor: pointer; display: grid; place-items: center; transition: .18s ease; } .cambia-tema:hover { border-color: var(--vino); color: var(--vino); } .cambia-tema .sol { display: none; } :root[data-tema="oscuro"] .cambia-tema .sol { display: block; } :root[data-tema="oscuro"] .cambia-tema .luna { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .cambia-tema .sol { display: block; } :root:not([data-tema="claro"]) .cambia-tema .luna { display: none; } } /* ========================================================================== CINTA DE DEMOSTRACIÓN ========================================================================== */ .cinta-demo { background: var(--tinta); color: var(--crema); font-size: .79rem; padding: 10px 22px; text-align: center; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; } .cinta-demo strong { color: var(--oro); letter-spacing: .14em; text-transform: uppercase; font-size: .69rem; } .cinta-demo a { color: inherit; } /* ========================================================================== CABECERA ========================================================================== */ .cabecera { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--crema) 88%, transparent); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--linea-2); } .cabecera__interior { display: flex; align-items: center; gap: 18px; height: var(--nav-h); } .marca { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--tinta); margin-right: auto; } .marca__sigla { width: 40px; height: 40px; border-radius: 50%; background: var(--vino); color: var(--vino-txt); display: grid; place-items: center; font-family: var(--serif); font-size: 1rem; letter-spacing: .05em; } .marca__texto { display: flex; flex-direction: column; line-height: 1.18; } .marca__nombre { font-family: var(--serif); font-size: 1.06rem; letter-spacing: -.01em; } .marca__lugar { font-size: .65rem; letter-spacing: .17em; text-transform: uppercase; color: var(--tinta-3); } .menu { display: flex; align-items: center; gap: 30px; } .menu a { color: var(--tinta-2); text-decoration: none; font-size: .89rem; font-weight: 500; position: relative; padding: 4px 0; } .menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--vino); transition: right .22s ease; } .menu a:hover { color: var(--vino); } .menu a:hover::after { right: 0; } .menu > .btn { display: none; } .menu > .btn::after { display: none; } .hamburguesa { display: none; width: 42px; height: 42px; border: 1px solid var(--linea); background: transparent; border-radius: 50%; cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center; } .hamburguesa span { width: 16px; height: 1.5px; background: var(--tinta); display: block; } @media (max-width: 980px) { .menu { position: fixed; inset: var(--nav-h) 0 auto 0; background: var(--papel); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 24px; border-bottom: 1px solid var(--linea); box-shadow: var(--sombra-m); display: none; } .menu.abierto { display: flex; } .menu a { padding: 16px 0; border-bottom: 1px solid var(--linea-2); font-size: 1rem; } .menu a::after { display: none; } .menu > .btn { display: inline-flex; margin-top: 18px; } .hamburguesa { display: flex; } .cabecera__interior > .btn { display: none; } } .barra-movil { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; background: var(--papel); border-top: 1px solid var(--linea); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: none; gap: 10px; } .barra-movil .btn { flex: 1; padding: 15px 10px; } @media (max-width: 720px) { .barra-movil { display: flex; } body { padding-bottom: 80px; } } /* ========================================================================== PORTADA ========================================================================== */ .portada { padding: clamp(44px, 6vw, 84px) 0 clamp(50px, 7vw, 92px); } .portada__rejilla { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .portada__sitio { font-size: .71rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 24px; display: flex; align-items: center; gap: 12px; } .portada__sitio::before { content: ""; width: 40px; height: 1px; background: var(--oro); } .portada h1 { margin-bottom: 24px; } .portada h1 em { font-style: italic; color: var(--vino); } .portada__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 22px; } .abierto-ahora { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .86rem; color: var(--tinta-2); } .punto-vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--est-hecha); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--est-hecha) 20%, transparent); } .punto-vivo.cerrado { background: var(--tinta-3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tinta-3) 18%, transparent); } .sellos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linea); } .sello__cifra { font-family: var(--serif); font-size: 1.38rem; line-height: 1; } .sello__pie { font-size: .77rem; color: var(--tinta-3); margin-top: 7px; line-height: 1.45; } @media (max-width: 520px) { .sellos { grid-template-columns: 1fr 1fr; } } .portada__panel { position: relative; } .lienzo { aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; position: relative; background: radial-gradient(120% 90% at 20% 12%, color-mix(in srgb, var(--oro) var(--lienzo-oro), transparent), transparent 64%), radial-gradient(110% 100% at 88% 82%, color-mix(in srgb, var(--vino) var(--lienzo-vino), transparent), transparent 62%), linear-gradient(160deg, var(--arena-2), var(--arena)); } .lienzo::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"); } .lienzo__marca { position: absolute; left: 28px; bottom: 24px; z-index: 2; font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: color-mix(in srgb, var(--tinta) 24%, transparent); } .huecos-hoy { position: absolute; right: 0; bottom: 26px; z-index: 3; width: min(290px, 86%); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 18px 20px; box-shadow: var(--sombra-l); } .huecos-hoy h4 { font-family: var(--sans); font-size: .67rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; } .huecos-hoy__lista { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; } .huecos-hoy__lista a { font-size: .83rem; font-weight: 600; text-decoration: none; color: var(--tinta); border: 1px solid var(--linea); border-radius: var(--r-s); padding: 8px 12px; font-variant-numeric: tabular-nums; transition: .16s ease; } .huecos-hoy__lista a:hover { background: var(--vino); border-color: var(--vino); color: var(--vino-txt); } .huecos-hoy__pie { margin: 13px 0 0; font-size: .75rem; color: var(--tinta-3); } @media (max-width: 900px) { .portada__rejilla { grid-template-columns: 1fr; } .lienzo { aspect-ratio: 16 / 9; } .huecos-hoy { position: static; width: 100%; margin-top: -30px; } } .ticker { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); overflow: hidden; padding: 15px 0; background: var(--papel); } .ticker__pista { display: flex; width: max-content; animation: rodar 52s linear infinite; } .ticker span { font-family: var(--serif); font-size: 1.1rem; color: var(--tinta-2); display: flex; align-items: center; gap: 40px; white-space: nowrap; padding-right: 40px; } .ticker span::after { content: "·"; color: var(--oro); } @keyframes rodar { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker__pista { animation: none; } } /* ========================================================================== ÍNDICE DE SERVICIOS ========================================================================== */ .indice { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linea); } .indice li { border-bottom: 1px solid var(--linea); } .indice a { display: grid; grid-template-columns: 66px minmax(150px, .95fr) 1.7fr auto 24px; gap: 20px; align-items: center; padding: 26px 12px 26px 0; text-decoration: none; color: var(--tinta); position: relative; isolation: isolate; transition: padding .22s ease; } .indice a::before { content: ""; position: absolute; inset: 0 -14px; border-radius: var(--r-s); background: var(--arena); opacity: 0; transition: opacity .22s ease; z-index: -1; } .indice a:hover { padding-left: 14px; } .indice a:hover::before { opacity: 1; } .indice__n { font-family: var(--mono); font-size: .75rem; color: var(--tinta-3); letter-spacing: .08em; } .indice__nombre { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -.015em; } .indice__desc { color: var(--tinta-2); font-size: .91rem; line-height: 1.5; } .indice__precio { font-family: var(--serif); font-size: 1rem; color: var(--tinta-2); white-space: nowrap; } .indice__flecha { color: var(--vino); transition: transform .22s ease; } .indice a:hover .indice__flecha { transform: translateX(5px); } @media (max-width: 900px) { .indice a { grid-template-columns: 44px 1fr auto; gap: 4px 16px; padding: 22px 0; } .indice a:hover { padding-left: 0; } .indice__desc { grid-column: 2 / -1; margin-top: 7px; } .indice__flecha { display: none; } } /* ========================================================================== TARIFAS ========================================================================== */ .pestanas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; } .pestana { border: 1px solid var(--linea); background: transparent; color: var(--tinta-2); padding: 10px 18px; border-radius: var(--r-full); font-size: .85rem; font-weight: 500; cursor: pointer; font-family: var(--sans); transition: .16s ease; } .pestana:hover { border-color: var(--vino); color: var(--vino); } .pestana[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--crema); } .lista-tarifas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(30px, 5vw, 64px); } @media (max-width: 760px) { .lista-tarifas { grid-template-columns: 1fr; } } .fila-tarifa { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--linea-2); } .fila-tarifa__nombre { font-weight: 500; } .fila-tarifa__min { display: block; font-size: .78rem; color: var(--tinta-3); font-weight: 400; margin-top: 3px; } .fila-tarifa__precio { font-family: var(--serif); font-size: 1.12rem; white-space: nowrap; } .etiqueta-bono { display: inline-block; font-size: .63rem; letter-spacing: .11em; text-transform: uppercase; border: 1px solid var(--oro); color: var(--oro); padding: 2px 8px; border-radius: var(--r-full); margin-left: 8px; vertical-align: middle; font-weight: 700; } /* ========================================================================== RESERVA ========================================================================== */ .reserva { max-width: 940px; margin: 0 auto; } .reserva__caja { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sombra-m); } .pasos { display: flex; background: var(--arena); border-bottom: 1px solid var(--linea); overflow-x: auto; } .paso { flex: 1; min-width: 116px; padding: 16px 10px; text-align: center; font-size: .8rem; color: var(--tinta-3); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 9px; border-bottom: 2px solid transparent; } .paso__n { width: 21px; height: 21px; border-radius: 50%; background: var(--arena-2); color: var(--tinta-2); display: grid; place-items: center; font-size: .71rem; flex: none; } .paso[data-estado="activo"] { color: var(--tinta); border-bottom-color: var(--vino); background: var(--papel); } .paso[data-estado="activo"] .paso__n { background: var(--vino); color: var(--vino-txt); } .paso[data-estado="hecho"] { color: var(--tinta-2); } .paso[data-estado="hecho"] .paso__n { background: var(--est-hecha); color: var(--papel); } @media (max-width: 560px) { .paso__texto { display: none; } .paso { min-width: 0; } } .panel-paso { padding: clamp(22px, 3.6vw, 38px); } .panel-paso[hidden] { display: none; } .panel-paso h3 { margin-bottom: 5px; } .panel-paso > .apunte { margin-bottom: 24px; display: block; } .filtro-cats { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; } .lista-elegir { display: grid; gap: 8px; max-height: 390px; overflow-y: auto; padding-right: 4px; } .opcion-servicio { display: grid; grid-template-columns: 21px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--r-m); background: transparent; cursor: pointer; text-align: left; width: 100%; font-family: var(--sans); font-size: .93rem; color: var(--tinta); transition: .15s ease; } .opcion-servicio:hover { border-color: var(--vino); } .opcion-servicio[aria-pressed="true"] { border-color: var(--vino); background: var(--vino-cl); } .marca-check { width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid var(--linea); display: grid; place-items: center; color: transparent; flex: none; } .opcion-servicio[aria-pressed="true"] .marca-check { background: var(--vino); border-color: var(--vino); color: var(--vino-txt); } .opcion-servicio__dur { font-size: .76rem; color: var(--tinta-3); display: block; margin-top: 2px; } .opcion-servicio__precio { font-family: var(--serif); font-size: 1.01rem; } .rejilla-pro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 620px) { .rejilla-pro { grid-template-columns: 1fr; } } .tarjeta-pro { border: 1px solid var(--linea); border-radius: var(--r-m); padding: 22px 16px; background: transparent; cursor: pointer; text-align: center; font-family: var(--sans); color: var(--tinta); transition: .15s ease; } .tarjeta-pro:hover { border-color: var(--vino); } .tarjeta-pro[aria-pressed="true"] { border-color: var(--vino); background: var(--vino-cl); } .avatar-pro { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; font-family: var(--serif); font-size: 1.08rem; background: var(--arena); color: var(--vino); } .tarjeta-pro b { display: block; font-weight: 600; font-size: .94rem; } .tarjeta-pro span { font-size: .78rem; color: var(--tinta-3); } .reserva__dosco { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; } @media (max-width: 780px) { .reserva__dosco { grid-template-columns: 1fr; gap: 28px; } } .calendario__cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .calendario__mes { font-family: var(--serif); font-size: 1.08rem; text-transform: capitalize; } .flecha-mes { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--tinta-2); } .flecha-mes:hover:not([disabled]) { border-color: var(--vino); color: var(--vino); } .flecha-mes[disabled] { opacity: .28; cursor: not-allowed; } .calendario__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .calendario__dia-sem { text-align: center; font-size: .69rem; color: var(--tinta-3); padding: 6px 0; font-weight: 600; letter-spacing: .06em; } .dia { aspect-ratio: 1; border: 1px solid transparent; border-radius: var(--r-s); background: transparent; cursor: pointer; font-family: var(--sans); font-size: .87rem; color: var(--tinta); display: grid; place-items: center; position: relative; transition: .12s ease; } .dia:hover:not([disabled]) { background: var(--arena); } .dia[disabled] { color: var(--linea); cursor: not-allowed; } .dia[aria-pressed="true"] { background: var(--vino); color: var(--vino-txt); font-weight: 600; } .dia.hoy::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--oro); } .dia[aria-pressed="true"].hoy::after { background: var(--vino-txt); } .horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; } .hora { padding: 12px 4px; border: 1px solid var(--linea); border-radius: var(--r-s); background: transparent; cursor: pointer; font-family: var(--sans); font-size: .87rem; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; transition: .12s ease; } .hora:hover { border-color: var(--vino); color: var(--vino); } .hora[aria-pressed="true"] { background: var(--vino); border-color: var(--vino); color: var(--vino-txt); } .franja-titulo { font-size: .71rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin: 22px 0 11px; font-weight: 700; } .franja-titulo:first-child { margin-top: 0; } .aviso-vacio { border: 1px dashed var(--linea); border-radius: var(--r-m); padding: 26px; text-align: center; color: var(--tinta-2); font-size: .9rem; } .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .campos { grid-template-columns: 1fr; } } .campo--ancho { grid-column: 1 / -1; } .campo label { display: block; font-size: .81rem; font-weight: 600; margin-bottom: 7px; color: var(--tinta-2); } .campo input, .campo textarea, .campo select { width: 100%; padding: 14px 15px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--crema); font-family: var(--sans); font-size: .93rem; color: var(--tinta); } .campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-3); } .campo textarea { min-height: 90px; resize: vertical; } .consentimiento { display: flex; gap: 12px; align-items: flex-start; font-size: .82rem; color: var(--tinta-2); border: 1px solid var(--linea-2); border-radius: var(--r-s); padding: 15px; } .consentimiento input { margin-top: 2px; accent-color: var(--vino); width: 17px; height: 17px; flex: none; } .resumen { border: 1px solid var(--linea); border-radius: var(--r-m); padding: 22px; position: sticky; top: calc(var(--nav-h) + 16px); background: var(--crema); } .resumen h4 { font-family: var(--serif); font-size: 1.01rem; margin-bottom: 15px; } .resumen__linea { display: flex; justify-content: space-between; gap: 12px; font-size: .87rem; padding: 7px 0; color: var(--tinta-2); } .resumen__linea span:last-child { color: var(--tinta); font-weight: 500; text-align: right; } .resumen__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 15px; border-top: 1px solid var(--linea); } .resumen__total b { font-family: var(--serif); font-size: 1.5rem; } .pie-paso { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linea-2); } .confirmacion { text-align: center; padding: clamp(26px, 4vw, 46px) 22px; } .sello-ok { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 22px; background: var(--est-hecha-f); color: var(--est-hecha); display: grid; place-items: center; } .ticket { text-align: left; max-width: 430px; margin: 26px auto; border: 1px solid var(--linea); border-radius: var(--r-m); padding: 22px; background: var(--crema); } .ticket__fila { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; font-size: .88rem; border-bottom: 1px solid var(--linea-2); } .ticket__fila:last-child { border-bottom: 0; } .ticket__fila span:first-child { color: var(--tinta-3); } .ticket__fila span:last-child { font-weight: 600; text-align: right; } .wa-maqueta { max-width: 340px; margin: 8px auto 0; background: var(--arena-2); border-radius: var(--r-m); padding: 14px; border: 1px solid var(--linea); text-align: left; } .wa-burbuja { background: var(--papel); border-radius: 12px 12px 12px 3px; padding: 13px 15px; font-size: .83rem; line-height: 1.5; color: var(--tinta); } .wa-burbuja .wa-hora { display: block; text-align: right; font-size: .67rem; color: var(--tinta-3); margin-top: 6px; } .wa-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .78rem; color: var(--tinta-2); } .wa-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--vino); color: var(--vino-txt); display: grid; place-items: center; font-size: .67rem; font-family: var(--serif); } /* ========================================================================== CENTRO · OPINIONES · DÓNDE ========================================================================== */ .rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .rejilla-3 { grid-template-columns: 1fr; } } .opinion { border-top: 1px solid var(--linea); padding-top: 24px; } .estrellas { color: var(--oro); letter-spacing: 3px; font-size: .9rem; margin-bottom: 14px; } .opinion p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.52; color: var(--tinta); letter-spacing: -.01em; } .opinion__firma { font-size: .79rem; color: var(--tinta-3); margin: 0; font-family: var(--sans); } .opinion__firma b { color: var(--tinta-2); } .bloque-google { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border: 1px solid var(--linea); border-radius: var(--r-m); padding: 24px 28px; margin-top: 40px; } .nota-google { font-family: var(--serif); font-size: 2.5rem; line-height: 1; } .centro__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } @media (max-width: 880px) { .centro__rejilla { grid-template-columns: 1fr; } } .lista-puntos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; } .lista-puntos li { display: flex; gap: 13px; align-items: flex-start; font-size: .93rem; color: var(--tinta-2); } .lista-puntos svg { color: var(--vino); flex: none; margin-top: 3px; } .collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 156px 208px; gap: 12px; } .collage > div { border-radius: var(--r-m); position: relative; overflow: hidden; } .collage > div:first-child { grid-row: span 2; } .collage > div::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g2)'/%3E%3C/svg%3E"); } .textura-1 { background: linear-gradient(155deg, color-mix(in srgb, var(--oro) 45%, var(--arena)), color-mix(in srgb, var(--oro) 15%, var(--arena))); } .textura-2 { background: linear-gradient(155deg, color-mix(in srgb, var(--vino) 34%, var(--arena)), color-mix(in srgb, var(--vino) 9%, var(--arena))); } .textura-3 { background: linear-gradient(155deg, var(--arena-2), var(--arena)); } .collage span { position: absolute; bottom: 14px; left: 16px; z-index: 2; font-size: .69rem; letter-spacing: .15em; text-transform: uppercase; color: var(--tinta-2); font-weight: 700; } .horario-tabla { width: 100%; border-collapse: collapse; } .horario-tabla td { padding: 13px 0; border-bottom: 1px solid var(--linea-2); font-size: .91rem; } .horario-tabla td:last-child { text-align: right; color: var(--tinta-2); font-variant-numeric: tabular-nums; } .horario-tabla tr.hoy td { color: var(--vino); font-weight: 600; } .horario-tabla tr.hoy td:last-child { color: var(--vino); } .centro__rejilla--mapa { grid-template-columns: .82fr 1.18fr; align-items: stretch; } @media (max-width: 880px) { .centro__rejilla--mapa { grid-template-columns: 1fr; } } .mapa { position: relative; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--linea); box-shadow: var(--sombra-m); min-height: 460px; display: flex; } .mapa__lienzo { position: absolute; inset: 0; background: var(--arena); } .mapa__lienzo iframe { width: 100%; height: 100%; border: 0; display: block; position: relative; z-index: 1; filter: var(--mapa-filtro); } .mapa__respaldo { position: absolute; inset: 0; z-index: 0; margin: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--tinta-3); font-size: .88rem; line-height: 1.6; } .mapa__ficha { position: relative; z-index: 2; align-self: flex-end; margin: 22px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 22px 24px; box-shadow: var(--sombra-l); max-width: 270px; } .mapa__ficha b { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; display: block; } .mapa__ficha p { font-size: .87rem; color: var(--tinta-2); margin: 8px 0 16px; line-height: 1.55; } @media (max-width: 560px) { .mapa { min-height: 400px; } .mapa__ficha { margin: 14px; max-width: none; padding: 18px; } } /* ========================================================================== PIE ========================================================================== */ .pie { background: var(--tinta); color: color-mix(in srgb, var(--crema) 72%, transparent); padding: clamp(52px, 7vw, 80px) 0 28px; } .pie h4 { color: var(--crema); font-size: .95rem; margin-bottom: 16px; font-family: var(--sans); font-weight: 600; } .pie a { color: inherit; text-decoration: none; font-size: .88rem; } .pie a:hover { color: var(--crema); } .pie .marca { color: var(--crema); } .pie__rejilla { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; } @media (max-width: 840px) { .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 30px; } } @media (max-width: 520px) { .pie__rejilla { grid-template-columns: 1fr; } } .pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .pie__legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--crema) 14%, transparent); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .79rem; color: color-mix(in srgb, var(--crema) 52%, transparent); } /* ========================================================================== PANEL DE GESTIÓN ========================================================================== */ .app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; } @media (max-width: 940px) { .app { grid-template-columns: 1fr; } } .lateral { background: var(--papel); border-right: 1px solid var(--linea); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; } @media (max-width: 940px) { .lateral { position: static; height: auto; flex-direction: row; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--linea); } .lateral__marca, .lateral__pie { display: none; } } .lateral__marca { display: flex; align-items: center; gap: 12px; padding: 6px 10px 24px; } .lateral__marca > div { display: flex; flex-direction: column; line-height: 1.2; } .lateral__marca b { font-family: var(--serif); font-size: 1rem; font-weight: 600; } .lateral__marca small { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); } .nav-lateral { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--r-s); color: var(--tinta-2); text-decoration: none; font-size: .88rem; font-weight: 500; background: transparent; border: 0; cursor: pointer; font-family: var(--sans); width: 100%; text-align: left; white-space: nowrap; transition: .15s ease; } .nav-lateral:hover { background: var(--arena); color: var(--tinta); } .nav-lateral[aria-current="page"] { background: var(--vino); color: var(--vino-txt); } .nav-lateral svg { flex: none; } .nav-lateral .globo { margin-left: auto; background: var(--arena-2); color: var(--tinta-2); font-size: .69rem; padding: 1px 8px; border-radius: var(--r-full); font-weight: 700; } .nav-lateral[aria-current="page"] .globo { background: color-mix(in srgb, var(--vino-txt) 24%, transparent); color: inherit; } .lateral__pie { margin-top: auto; font-size: .75rem; color: var(--tinta-3); padding: 14px 12px 0; border-top: 1px solid var(--linea-2); } .principal { padding: 26px clamp(16px, 3vw, 40px) 64px; min-width: 0; background: var(--crema); } .barra-app { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--linea); } .barra-app h1 { font-size: 1.68rem; margin-right: auto; letter-spacing: -.02em; } .barra-app .fecha-nav { display: flex; align-items: center; gap: 6px; border: 1px solid var(--linea); border-radius: var(--r-full); padding: 4px; } .barra-app .fecha-nav b { font-size: .86rem; padding: 0 12px; min-width: 178px; text-align: center; font-weight: 600; } .kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 26px; } @media (max-width: 1120px) { .kpis { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, 1fr); } } .kpi { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 17px 19px; } .kpi__rotulo { font-size: .67rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .13em; font-weight: 700; } .kpi__cifra { font-family: var(--serif); font-size: 1.98rem; line-height: 1.05; margin-top: 9px; letter-spacing: -.02em; } .kpi__pie { font-size: .76rem; color: var(--tinta-3); margin-top: 4px; } .kpi__pie.sube { color: var(--est-hecha); font-weight: 600; } .agenda { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-m); overflow: hidden; } .agenda__cabeza { display: grid; grid-template-columns: 64px repeat(var(--cols, 2), 1fr); border-bottom: 1px solid var(--linea); background: var(--arena); } .agenda__cabeza div { padding: 13px 10px; font-size: .83rem; font-weight: 600; text-align: center; } .agenda__cabeza div + div { border-left: 1px solid var(--linea); } .agenda__cuerpo { display: grid; grid-template-columns: 64px repeat(var(--cols, 2), 1fr); position: relative; max-height: 720px; overflow-y: auto; } .agenda__horas { border-right: 1px solid var(--linea); } .agenda__hora { height: 56px; font-size: .71rem; color: var(--tinta-3); text-align: right; padding: 3px 10px 0 0; border-bottom: 1px solid var(--linea-2); font-variant-numeric: tabular-nums; } .agenda__col { position: relative; border-left: 1px solid var(--linea-2); } .agenda__celda { height: 56px; border-bottom: 1px solid var(--linea-2); } .agenda__cerrado { position: absolute; left: 0; right: 0; display: grid; place-items: center; font-size: .69rem; color: var(--tinta-3); letter-spacing: .12em; text-transform: uppercase; background: repeating-linear-gradient(135deg, var(--arena), var(--arena) 7px, var(--arena-2) 7px, var(--arena-2) 14px); } .agenda__celda:nth-child(odd) { background: color-mix(in srgb, var(--arena) 45%, transparent); } .cita { position: absolute; left: 5px; right: 5px; border-radius: var(--r-s); padding-block: max(3px, min(8px, 4%)); padding-inline: 10px; font-size: .77rem; line-height: 1.32; cursor: pointer; overflow: hidden; text-align: left; font-family: var(--sans); color: var(--tinta); border: 1px solid transparent; border-left: 3px solid var(--est-conf); background: var(--est-conf-f); transition: box-shadow .15s ease, transform .15s ease; } .cita:hover { box-shadow: var(--sombra-m); transform: translateY(-1px); z-index: 5; } .cita b { display: block; font-weight: 600; font-size: .81rem; } .cita > span { display: block; color: var(--tinta-2); } .cita--pend { border-left-color: var(--est-pend); background: var(--est-pend-f); } .cita--hecha { border-left-color: var(--est-hecha); background: var(--est-hecha-f); } .cita--nula { border-left-color: var(--est-nula); background: var(--arena); opacity: .7; } .cita--nula b { text-decoration: line-through; } .cita__estado { display: flex; align-items: center; gap: 4px; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-top: 4px; color: var(--tinta-3); } .leyenda { display: flex; gap: 20px; flex-wrap: wrap; margin: 18px 0 0; font-size: .78rem; color: var(--tinta-2); } .leyenda span { display: inline-flex; align-items: center; gap: 8px; } .leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--papel); border-left: 1px solid var(--linea); box-shadow: var(--sombra-l); z-index: 90; padding: 26px; overflow-y: auto; transform: translateX(100%); transition: transform .24s ease; } .cajon.abierto { transform: none; } .cajon__velo { position: fixed; inset: 0; background: rgba(20,15,12,.42); z-index: 85; opacity: 0; pointer-events: none; transition: opacity .24s ease; } .cajon__velo.abierto { opacity: 1; pointer-events: auto; } .cajon__cerrar { position: absolute; top: 20px; right: 20px; border: 1px solid var(--linea); background: transparent; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1.05rem; color: var(--tinta-2); } .cajon__acciones { display: grid; gap: 9px; margin-top: 24px; } .tabla-envoltura { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-m); overflow-x: auto; } .tabla { width: 100%; border-collapse: collapse; min-width: 680px; } .tabla th { text-align: left; font-size: .67rem; text-transform: uppercase; letter-spacing: .13em; color: var(--tinta-3); padding: 14px 16px; border-bottom: 1px solid var(--linea); background: var(--arena); font-weight: 700; white-space: nowrap; } .tabla td { padding: 14px 16px; border-bottom: 1px solid var(--linea-2); font-size: .88rem; vertical-align: middle; } .tabla tr:last-child td { border-bottom: 0; } .tabla tbody tr:hover { background: var(--crema); } .tabla td.num { text-align: right; font-variant-numeric: tabular-nums; } .persona { display: flex; align-items: center; gap: 12px; } .persona__ini { width: 34px; height: 34px; border-radius: 50%; background: var(--arena); color: var(--vino); display: grid; place-items: center; font-size: .77rem; font-weight: 700; flex: none; } .persona small { display: block; color: var(--tinta-3); font-size: .76rem; } .pildora { display: inline-flex; align-items: center; gap: 5px; font-size: .71rem; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); white-space: nowrap; } .pildora--conf { background: var(--est-conf-f); color: var(--est-conf); } .pildora--pend { background: var(--est-pend-f); color: var(--est-pend); } .pildora--hecha { background: var(--est-hecha-f); color: var(--est-hecha); } .pildora--nula { background: var(--arena); color: var(--tinta-3); } .pildora--vip { background: var(--oro-cl); color: var(--oro); } .panel-caja { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 22px 24px; } .panel-caja h3 { font-size: 1.03rem; margin-bottom: 4px; } .grafica { display: flex; align-items: flex-end; gap: clamp(6px, 1.6vw, 14px); height: 200px; margin-top: 24px; } .grafica__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; } .grafica__valor { font-size: .74rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; font-weight: 600; } .grafica__barra { width: 100%; max-width: 44px; background: var(--vino); border-radius: 4px 4px 0 0; min-height: 3px; } .grafica__barra.tenue { background: var(--arena-2); } .grafica__pie { font-size: .72rem; color: var(--tinta-3); text-align: center; } .grafica__pie b { display: block; color: var(--tinta-2); font-weight: 600; } .barras-h { display: grid; gap: 14px; margin-top: 22px; } .barra-h__fila { display: grid; grid-template-columns: 1fr 48px; gap: 12px; align-items: center; font-size: .86rem; } .barra-h__pista { height: 9px; background: var(--arena); border-radius: var(--r-full); overflow: hidden; margin-top: 7px; } .barra-h__relleno { height: 100%; background: var(--vino); border-radius: var(--r-full); } .barra-h__num { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-2); font-weight: 600; } .dos-columnas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; } @media (max-width: 960px) { .dos-columnas { grid-template-columns: 1fr; } } .vista[hidden] { display: none; } .lista-avisos { display: grid; gap: 11px; margin-top: 18px; } .aviso { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 15px 17px; } .aviso__icono { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--est-hecha-f); color: var(--est-hecha); } .aviso__icono.espera { background: var(--est-pend-f); color: var(--est-pend); } .aviso b { font-size: .9rem; } .aviso small { color: var(--tinta-3); font-size: .78rem; } .nota-rgpd { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--linea); border-left: 3px solid var(--oro); border-radius: var(--r-s); padding: 14px 16px; font-size: .83rem; color: var(--tinta-2); background: var(--oro-cl); margin-top: 16px; } .nota-rgpd svg { color: var(--oro); flex: none; margin-top: 2px; } .nota-rgpd b { color: var(--tinta); } /* ========================================================================== PROPUESTA ========================================================================== */ .tabla-comparativa { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 800px; } .tabla-comparativa th, .tabla-comparativa td { padding: 16px; text-align: left; border-bottom: 1px solid var(--linea-2); font-size: .87rem; vertical-align: top; } .tabla-comparativa thead th { background: var(--arena); font-size: .69rem; text-transform: uppercase; letter-spacing: .13em; color: var(--tinta-2); border-bottom: 1px solid var(--linea); } .tabla-comparativa tbody th { font-weight: 600; font-size: .9rem; } .tabla-comparativa .col-nuestra { background: var(--vino-cl); } .tabla-comparativa thead .col-nuestra { background: var(--vino); color: var(--vino-txt); } .tabla-comparativa tr:last-child td, .tabla-comparativa tr:last-child th { border-bottom: 0; } .si { color: var(--est-hecha); font-weight: 700; } .no { color: var(--peligro); font-weight: 700; } .tal { color: var(--tinta-3); } .planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } @media (max-width: 940px) { .planes { grid-template-columns: 1fr; } } .plan { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 30px 26px; position: relative; } .plan--destacado { border-color: var(--vino); box-shadow: var(--sombra-m); } .plan__cinta { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--vino); color: var(--vino-txt); font-size: .67rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: 5px 15px; border-radius: var(--r-full); white-space: nowrap; } .plan__precio { font-family: var(--serif); font-size: 2.75rem; line-height: 1; margin: 16px 0 4px; letter-spacing: -.03em; } .plan__precio small { font-family: var(--sans); font-size: .85rem; color: var(--tinta-3); font-weight: 500; letter-spacing: 0; } .plan ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 11px; } .plan li { display: flex; gap: 10px; font-size: .87rem; color: var(--tinta-2); align-items: flex-start; } .plan li svg { color: var(--est-hecha); flex: none; margin-top: 3px; } .plan li.no-incluye { color: var(--tinta-3); } .plan li.no-incluye svg { color: var(--linea); } .caja-calculo { background: var(--tinta); color: color-mix(in srgb, var(--crema) 80%, transparent); border-radius: var(--r-l); padding: clamp(28px, 4vw, 52px); } .caja-calculo h3 { color: var(--crema); font-size: 1.42rem; margin-bottom: 10px; } .calculo-rejilla { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; margin-top: 30px; } @media (max-width: 780px) { .calculo-rejilla { grid-template-columns: 1fr; } } .calculo-caja { background: color-mix(in srgb, var(--crema) 7%, transparent); border: 1px solid color-mix(in srgb, var(--crema) 13%, transparent); border-radius: var(--r-m); padding: 24px; } .calculo-caja.gana { background: color-mix(in srgb, var(--oro) 16%, transparent); border-color: color-mix(in srgb, var(--oro) 42%, transparent); } .calculo-caja h4 { color: var(--crema); font-size: .92rem; margin-bottom: 16px; font-family: var(--sans); } .calculo-caja .cifra { font-family: var(--serif); font-size: 2.2rem; color: var(--crema); line-height: 1; letter-spacing: -.02em; } .calculo-caja .cifra.oro { color: var(--oro); } .calculo-linea { display: flex; justify-content: space-between; gap: 14px; font-size: .83rem; padding: 5px 0; color: color-mix(in srgb, var(--crema) 64%, transparent); } .vs { font-family: var(--serif); font-size: 1.22rem; color: var(--oro); text-align: center; } .regalo { border: 1px dashed var(--oro); background: var(--oro-cl); border-radius: var(--r-m); padding: clamp(26px, 3.6vw, 40px); display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; } @media (max-width: 680px) { .regalo { grid-template-columns: 1fr; } } .regalo__lazo { width: 54px; height: 54px; border-radius: 50%; background: var(--oro); color: var(--papel); display: grid; place-items: center; } .pasos-numerados { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; counter-reset: paso; } .pasos-numerados li { display: grid; grid-template-columns: 42px 1fr; gap: 18px; counter-increment: paso; } .pasos-numerados li::before { content: counter(paso, decimal-leading-zero); width: 42px; font-family: var(--mono); font-size: .79rem; color: var(--tinta-3); padding-top: .4em; letter-spacing: .08em; } .pasos-numerados b { display: block; margin-bottom: 5px; font-size: 1.01rem; } .pasos-numerados p { font-size: .9rem; color: var(--tinta-2); margin: 0; } .faq { border-top: 1px solid var(--linea); } .faq details { border-bottom: 1px solid var(--linea); } .faq summary { padding: 22px 0; cursor: pointer; font-weight: 600; font-size: 1.01rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.4rem; color: var(--vino); font-weight: 400; line-height: 1; } .faq details[open] summary::after { content: "−"; } .faq details p { color: var(--tinta-2); font-size: .92rem; padding-bottom: 22px; margin: 0; max-width: 72ch; } @media print { .cabecera, .barra-movil, .cinta-demo, .btn, body::before { display: none !important; } body { background: #fff; color: #000; } .seccion { padding: 24px 0; break-inside: avoid; } } /* ========================================================================== PIEZAS COMPARTIDAS (propuesta y panel) ========================================================================== */ .rotulo { font-size: .71rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 16px; font-weight: 600; } .rotulo--centro { text-align: center; } .rotulo--oro { color: var(--oro); } .cab-simple { margin-bottom: clamp(32px, 5vw, 54px); padding-top: 22px; border-top: 1px solid var(--linea); } .cab-centro { margin-bottom: clamp(32px, 5vw, 54px); text-align: center; } .cab-centro .entradilla { margin-inline: auto; } .tarjeta-servicio { border-top: 1px solid var(--linea); padding-top: 22px; } .tarjeta-servicio h3 { margin-bottom: 10px; } .tarjeta-servicio p { font-size: .92rem; color: var(--tinta-2); margin: 0; } /* El interruptor de tema, cuando vive dentro del menú lateral del panel */ .nav-lateral.cambia-tema { width: 100%; height: auto; border-radius: var(--r-s); border: 0; justify-content: flex-start; padding: 11px 13px; color: var(--tinta-2); } .nav-lateral.cambia-tema:hover { background: var(--arena); color: var(--tinta); border: 0; }