/** * Sección pública /piscina/ — calcada al handoff de diseño de APADIS Piscina. * * Página autónoma servida por el plugin (no usa el tema): trae su propio * y esta hoja. Marca APADIS Piscina: Serotiva + azul #1B7FC4 / navy #10142F * sobre fondo blanco, con tarjetas navy en secciones concretas. Todos los * valores (color, tamaño, radio, tracking) salen 1:1 de los prototipos. * * Prefijo .pw-* para no chocar con nada. Accesible (WCAG AA). */ @font-face { font-family: "Serotiva"; src: url( "fonts/Serotiva-Regular.ttf" ) format( "truetype" ); font-weight: 100 400; font-style: normal; font-display: swap; } @font-face { font-family: "Serotiva"; src: url( "fonts/Serotiva-Medium.ttf" ) format( "truetype" ); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Serotiva"; src: url( "fonts/Serotiva-SemiBold.ttf" ) format( "truetype" ); font-weight: 600 900; font-style: normal; font-display: swap; } :root { --pw-navy: #10142F; --pw-navy-2: #0B0F26; --pw-azul: #1B7FC4; --pw-azul-2: #35AEE2; --pw-ink: #0E1330; --pw-ink-2: #515A6E; --pw-ink-3: #6E7789; --pw-meta: #8891A2; --pw-nav: #4A5266; --pw-tab: #4E576B; --pw-line: #E7EDF3; --pw-line-2: #E1E8EF; --pw-sep: #EEF2F6; --pw-sep-2: #E4EAF1; --pw-soft: #F4F7FA; --pw-badge: #EEF3F8; --pw-ok: #1B7A56; --pw-ok-bg: #E6F7EF; --pw-wait: #8A6410; --pw-wait-bg: #FDF3DF; --pw-bad: #A03024; --pw-bad-bg: #FBEAE7; --pw-info: #155E8C; --pw-info-bg: #E8F2FA; --pw-libre: #3DBE8B; --pw-ajust: #E0A33C; --pw-lleno: #C0392B; --pw-mono: ui-monospace, SFMono-Regular, Menlo, monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.apw { background: #fff; color: var(--pw-ink); font-family: "Serotiva", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .apw h1, .apw h2, .apw h3, .apw h4, .apw p { margin: 0; } .apw a { color: inherit; text-decoration: none; } .apw a:hover { color: var(--pw-azul); } .apw ::selection { background: var(--pw-azul); color: #fff; } .apw :focus-visible { outline: 2px solid var(--pw-azul); outline-offset: 2px; border-radius: 4px; } .apw button { font-family: inherit; } .pw-main:focus { outline: none; } /* Enlace de salto: oculto hasta recibir foco por teclado (accesibilidad) */ .pw-skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--pw-navy); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: top .15s ease; } .pw-skip:focus { top: 12px; color: #fff; outline: 2px solid #fff; outline-offset: 2px; } body.admin-bar .pw-skip:focus { top: 44px; } .pw-page { background: #fff; padding: 0 14px 60px; } /* El footer de Elementor va a ancho completo: contrarresta el padding de .pw-page. */ .pw-ele-footer { margin: 40px -14px -60px; } /* ---- Header (una marca, dos niveles integradas en un solo bloque) ------ */ .pw-header { position: sticky; top: 0; z-index: 80; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--pw-line); } /* Fila 1: marca APADIS (asociación) + menú global + área privada */ .pw-header-top { display: flex; align-items: center; gap: 20px; padding: 7px 20px; border-bottom: 1px solid var(--pw-line); } .apw .pw-brand-apadis { flex: none; display: inline-flex; align-items: center; } .pw-brand-apadis-img { height: 22px; width: auto; display: block; } .apw .pw-brand-apadis--txt { font-weight: 800; font-size: 15px; letter-spacing: .04em; color: var(--pw-ink); } .apw .pw-brand-apadis--txt:hover { color: var(--pw-azul); } .pw-gnav { flex: 1 1 auto; min-width: 0; } .pw-gnav-ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .apw .pw-gnav-ul a { color: var(--pw-ink-2); font-size: 13px; font-weight: 500; } .apw .pw-gnav-ul a:hover { color: var(--pw-azul); } .apw .pw-gnav-ul .current-menu-item > a, .apw .pw-gnav-ul a[aria-current="page"] { color: var(--pw-ink); font-weight: 600; } /* Fila 2: piscina (marca de sección + navegación + CTA) */ .pw-header-main { display: flex; align-items: center; gap: 26px; padding: 12px 20px; } @media (max-width: 900px) { /* Por debajo de 900px (tablet y móvil) la barra de escritorio no cabe en una línea: se apila (logo + acción arriba, navegación debajo) y se deja estática, para no ocupar demasiado alto al hacer scroll. */ .pw-header { position: static; } /* Fila global: logo APADIS + área privada en una línea; menú global debajo */ .pw-header-top { flex-wrap: wrap; gap: 8px 16px; padding: 8px 16px; } .pw-header-area { margin-left: auto; font-size: 13px; } .pw-gnav { order: 3; flex-basis: 100%; } .pw-gnav-ul { gap: 6px 16px; } /* Fila piscina: logo + CTA en una línea; navegación de sección debajo */ .pw-header-main { flex-wrap: wrap; gap: 10px 12px; padding: 10px 16px; } .pw-header-cta { margin-left: auto; } .pw-nav { order: 3; flex-basis: 100%; margin: 0; gap: 4px 22px; justify-content: flex-start; } .pw-navbtn { padding: 4px 0; } /* Subnav compacta */ .pw-subnav { gap: 2px 18px; padding: 2px 16px; } .pw-subbtn { padding: 12px 0 10px; } /* Menos aire lateral en cabecera de página, secciones y pie */ .pw-head { padding: 44px 20px 0; } .pw-head-row { padding-bottom: 30px; gap: 18px; } .pw-sec { padding: 52px 20px 0; } .pw-foot { padding: 64px 20px 0; } } /* Reserva el alto de la barra de WordPress (fixed) al estar logueado. */ body.apw.admin-bar { padding-top: 32px; } body.admin-bar .pw-header { top: 32px; } @media screen and (max-width: 782px) { body.apw.admin-bar { padding-top: 46px; } body.admin-bar .pw-header { top: 46px; } } .pw-logo { flex: none; display: flex; align-items: center; } .pw-logo img { height: 22px; width: auto; display: block; } .pw-logo-txt { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--pw-ink); } .pw-logo-txt span { color: var(--pw-azul); font-weight: 500; } .pw-nav { margin: 0 auto; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .pw-navbtn { display: inline-block; font-size: 15px; color: var(--pw-nav); padding: 8px 0; transition: color .18s; } .pw-navbtn:hover { color: var(--pw-azul); } .pw-navbtn.on { color: var(--pw-ink); font-weight: 600; } .pw-header-area { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--pw-ink); white-space: nowrap; border: 1px solid var(--pw-line-2); border-radius: 999px; padding: 6px 14px; } .pw-header-area svg { flex: none; } .pw-header-cta { flex: none; background: var(--pw-navy); color: #fff; border-radius: 999px; padding: 10px 17px; font-size: 13px; font-weight: 600; white-space: nowrap; } .pw-header-cta:hover { color: #fff; background: #080b22; } /* ---- Subnav de sección ------------------------------------------------- */ .pw-subnav { display: flex; align-items: center; gap: 32px; padding: 0 28px; border-bottom: 1px solid var(--pw-sep); flex-wrap: wrap; } .pw-subbtn { display: inline-block; font-size: 14.5px; color: var(--pw-ink-2); padding: 18px 0 16px; border-bottom: 2px solid transparent; transition: color .18s, border-color .18s; } .pw-subbtn:hover { color: var(--pw-azul); } .pw-subbtn.on { color: var(--pw-ink); font-weight: 600; border-bottom-color: var(--pw-azul); } /* ---- Cabecera de página (migas + título + lead) ----------------------- */ .pw-head { padding: 60px 28px 0; } .pw-crumb { font-family: var(--pw-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-meta); margin-bottom: 22px; } .pw-crumb b { color: var(--pw-azul); font-weight: 400; } .pw-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 46px; border-bottom: 1px solid var(--pw-sep); } .pw-eyebrow { display: inline-flex; align-items: center; gap: 9px; background: var(--pw-badge); border-radius: 999px; padding: 6px 15px 6px 6px; margin-bottom: 22px; } .pw-eyebrow .sq { width: 20px; height: 20px; border-radius: 6px; background: var(--pw-azul); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; flex: none; } .pw-eyebrow .tx { font-family: var(--pw-mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--pw-ink); } .pw-h1 { font-size: 50px; line-height: 1.04; letter-spacing: -.04em; font-weight: 500; max-width: 22ch; } .pw-lead { font-size: 16px; color: var(--pw-ink-2); max-width: 40ch; } /* ---- Pie de navegación ------------------------------------------------- */ .pw-foot { padding: 88px 28px 0; } .pw-foot-row { border-top: 1px solid var(--pw-sep); padding-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .pw-foot-crumb { font-family: var(--pw-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-meta); } .pw-foot-btns { display: flex; gap: 12px; flex-wrap: wrap; } /* ---- Sección de contenido --------------------------------------------- */ .pw-sec { padding: 76px 28px 0; } /* ---- Botones ----------------------------------------------------------- */ .pw-btn { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; border-radius: 999px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .18s, color .18s, border-color .18s; } .pw-btn-navy { background: var(--pw-navy); color: #fff; font-size: 13.5px; padding: 12px 20px; } .pw-btn-navy:hover { background: #080b22; color: #fff; } .pw-btn-azul { background: var(--pw-azul); color: #fff; font-size: 13.5px; padding: 12px 20px; } .pw-btn-azul:hover { background: #15669e; color: #fff; } .pw-btn-line { border: 1px solid var(--pw-line-2); background: #fff; color: var(--pw-ink); font-size: 13.5px; padding: 12px 20px; } .pw-btn-line:hover { border-color: var(--pw-azul); color: var(--pw-azul); } .pw-btn-mono { font-family: var(--pw-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; } .pw-btn-block { width: 100%; justify-content: center; } /* Botón secundario translúcido sobre tarjeta oscura (confirmaciones). */ .pw-btn-ghost { background: rgba(255,255,255,.1); color: #fff; font-size: 13.5px; padding: 12px 20px; } .pw-btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; } .apw .pw-btn-ghost { color: #fff; } /* ---- Chips y tabs ------------------------------------------------------ */ .pw-chip { border: 1px solid var(--pw-line-2); background: #fff; color: var(--pw-tab); cursor: pointer; font-size: 13.5px; font-weight: 600; padding: 11px 18px; border-radius: 999px; white-space: nowrap; transition: background .18s, color .18s, border-color .18s; } .pw-chip:hover { border-color: var(--pw-azul); color: var(--pw-azul); } .pw-chip.on { background: var(--pw-azul); color: #fff; border-color: var(--pw-azul); } .pw-tab { border: 1px solid var(--pw-line-2); background: #fff; color: var(--pw-tab); cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 9px 14px; border-radius: 999px; white-space: nowrap; transition: background .18s, color .18s, border-color .18s; } .pw-tab:hover { border-color: var(--pw-azul); color: var(--pw-azul); } .pw-tab.on { background: var(--pw-navy); color: #fff; border-color: var(--pw-navy); } /* ---- Tarjetas ---------------------------------------------------------- */ .pw-card { border: 1px solid var(--pw-line); border-radius: 22px; background: #fff; } .pw-card-soft { background: var(--pw-soft); border-radius: 22px; } .pw-card-dark { background: var(--pw-navy); color: #fff; border-radius: 22px; } /* ---- Filas de datos ---------------------------------------------------- */ .pw-fila { display: flex; justify-content: space-between; gap: 14px; padding: 16px 0; border-top: 1px solid var(--pw-sep-2); font-size: 14.5px; } .pw-fila .k { color: var(--pw-ink-2); } .pw-fila .v { font-weight: 600; } /* ---- Formularios ------------------------------------------------------- */ .pw-label { display: block; } .pw-label > span { font-size: 12.5px; font-weight: 600; color: var(--pw-ink-2); display: block; margin-bottom: 7px; } .pw-input, .pw-select { width: 100%; max-width: 100%; border: 1px solid var(--pw-line-2); border-radius: 11px; padding: 12px 14px; font-family: inherit; font-size: 14.5px; color: var(--pw-ink); outline: none; background: #fff; } .pw-input:focus, .pw-select:focus { border-color: var(--pw-azul); box-shadow: 0 0 0 3px rgba(27,127,196,.13); } .pw-input-mono { font-family: var(--pw-mono); font-size: 14px; } .pw-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--pw-tab); cursor: pointer; } .pw-check input { margin-top: 3px; accent-color: var(--pw-azul); width: 15px; height: 15px; flex: none; } .pw-msg { border-radius: 12px; padding: 12px 16px; font-weight: 500; font-size: 14px; margin: 0 0 18px; } .pw-msg-ok { background: var(--pw-ok-bg); color: var(--pw-ok); } .pw-msg-bad { background: var(--pw-bad-bg); color: var(--pw-bad); } /* ---- Página Cursos (C1) ----------------------------------------------- */ .pw-cursos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; margin-bottom: 20px; } .pw-course { text-align: left; display: flex; flex-direction: column; border: 1px solid var(--pw-line); border-radius: 22px; overflow: hidden; background: #fff; cursor: pointer; transition: border-color .2s; } .pw-course:hover { border-color: var(--pw-azul); } .pw-course .foto { display: block; height: 170px; background: var(--pw-soft) center / cover no-repeat; } .pw-course .body { padding: 30px 32px 26px; flex: 1; display: flex; flex-direction: column; } .pw-course .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .pw-course .edad { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-ink-3); } .pw-course .num { font-size: 11px; font-weight: 600; color: var(--pw-azul); } .pw-course h3 { font-size: 22px; font-weight: 600; letter-spacing: -.025em; margin-bottom: 8px; color: var(--pw-ink); } .pw-course .claim { font-size: 14px; color: var(--pw-ink-2); margin-bottom: 16px; } .pw-course .foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--pw-sep); flex-wrap: wrap; } .pw-course .desde { font-size: 15px; font-weight: 600; color: var(--pw-ink); white-space: nowrap; } .pw-course .ver { font-size: 13.5px; font-weight: 600; color: var(--pw-azul); white-space: nowrap; } .pw-info { background: var(--pw-soft); border-radius: 22px; padding: 30px 34px; } .pw-info h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 16px; } .pw-info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 26px; font-size: 14.5px; color: var(--pw-tab); } /* ---- Página Tarifas (B1) ---------------------------------------------- */ .pw-tar-head { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 26px; } .pw-tar-head h2 { font-size: 26px; font-weight: 500; letter-spacing: -.03em; } .pw-seg { display: flex; background: var(--pw-navy); border-radius: 999px; padding: 4px; } .pw-seg button { border: none; cursor: pointer; font-size: 14px; font-weight: 600; padding: 10px 22px; border-radius: 999px; background: transparent; color: #fff; transition: background .18s, color .18s; } .pw-seg button.on { background: #fff; color: var(--pw-navy); } .pw-tar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-bottom: 20px; } .pw-tar-card { border: 1px solid var(--pw-line); border-radius: 20px; padding: 26px 24px; } .pw-tar-card.pop { border: 1.5px solid var(--pw-azul); } .pw-tar-card .lab { font-family: var(--pw-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-ink-3); margin-bottom: 16px; } .pw-tar-card .lab-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; } .pw-tar-card .lab-row .lab { margin-bottom: 0; } .pw-tar-card .pop-badge { background: var(--pw-azul); color: #fff; font-family: var(--pw-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; } .pw-tar-card .cifra { font-size: 36px; line-height: 1; letter-spacing: -.035em; font-weight: 500; margin-bottom: 6px; } .pw-tar-card .sub { font-size: 14px; color: var(--pw-ink-2); } .pw-tar-bottom { display: grid; grid-template-columns: 1.2fr .8fr; gap: 26px; } .pw-mat { background: var(--pw-navy); color: #fff; border-radius: 20px; padding: 40px 42px; } .pw-mat .lab { font-family: var(--pw-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8FA0C4; margin-bottom: 14px; } .pw-mat .cifra { font-size: 28px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 10px; } .pw-mat p { font-size: 15px; color: #B9C4DA; max-width: 48ch; } .pw-mat p strong { color: #fff; } .pw-cta-card { border: 1px solid var(--pw-line); border-radius: 20px; padding: 40px 42px; display: flex; flex-direction: column; } .pw-cta-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 12px; } .pw-cta-card p { font-size: 14.5px; color: var(--pw-ink-2); margin-bottom: 20px; } .pw-cta-card .pw-btn { margin-top: auto; align-self: flex-start; } /* ---- Página Ficha de curso (C2) --------------------------------------- */ .pw-card-pad { padding: 40px 42px; } .pw-ficha-chips { display: flex; gap: 10px; padding-bottom: 30px; flex-wrap: wrap; } .pw-ficha { display: grid; grid-template-columns: 1.25fr .75fr; gap: 36px; align-items: start; } .pw-ficha-main > .pw-card { margin-bottom: 18px; } .pw-ficha-main > .pw-card:last-child { margin-bottom: 0; } .pw-fc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 22px; flex-wrap: wrap; } .pw-fc-head h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .pw-fc-badge { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; background: var(--pw-badge); color: var(--pw-azul); padding: 6px 11px; border-radius: 7px; white-space: nowrap; } .pw-hor { display: flex; justify-content: space-between; gap: 26px; font-size: 15.5px; padding: 17px 0; border-top: 1px solid var(--pw-sep); } .pw-hor .d { font-weight: 600; } .pw-hor .h { color: var(--pw-ink-2); text-align: right; } .pw-fc-nota { font-size: 13.5px; color: var(--pw-ink-3); margin-top: 18px; } .pw-lead-card { font-size: 16px; line-height: 1.6; color: var(--pw-ink-2); margin-bottom: 22px; max-width: 68ch; } .pw-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .pw-spec { background: var(--pw-wash, #F4F7FB); border: 1px solid var(--pw-line); border-radius: 16px; padding: 18px 18px; display: flex; flex-direction: column; gap: 6px; } .pw-spec .v { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--pw-ink); } .pw-spec .l { font-size: 13px; line-height: 1.4; color: var(--pw-ink-3); } @media (max-width: 760px) { .pw-specs { grid-template-columns: 1fr 1fr; } } .pw-precios h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 20px; } .pw-precios-head, .pw-precio { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; } .pw-precios-head { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-ink-3); padding-bottom: 12px; border-bottom: 1px solid var(--pw-sep); } .pw-precio { font-size: 15.5px; padding: 18px 0; border-bottom: 1px solid var(--pw-sep); } .pw-precio .v { font-weight: 600; } .pw-fc-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 26px; } body.admin-bar .pw-fc-aside { top: 122px; } .pw-fc-dark { background: var(--pw-navy); color: #fff; border-radius: 22px; padding: 36px 38px; } .pw-fc-dark .foto-h { display: block; height: 180px; border-radius: 14px; background: #1B2145 center / cover no-repeat; margin: -4px 0 20px; } .pw-fc-dark .edad { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8FA0C4; margin-bottom: 14px; } .pw-fc-dark h3 { font-size: 26px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 12px; } .pw-fc-dark .claim { font-size: 14.5px; color: #B9C4DA; margin-bottom: 22px; } .pw-fc-drow { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; padding: 16px 0; border-top: 1px solid #232847; } .pw-fc-drow.last { border-bottom: 1px solid #232847; } .pw-fc-drow .k { color: #8FA0C4; } .pw-fc-drow .v { font-weight: 600; } .pw-fc-dark .pw-btn { width: 100%; justify-content: center; margin-top: 22px; } .pw-fc-note { border: 1px solid var(--pw-line); border-radius: 22px; padding: 32px 34px; } .pw-fc-note .lab { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-ink-3); margin-bottom: 16px; } .pw-fc-note .list { display: flex; flex-direction: column; gap: 11px; font-size: 14px; color: var(--pw-tab); } /* ---- Página Reservar cita (D1) ---------------------------------------- */ .pw-cita { display: grid; grid-template-columns: 1.3fr .7fr; gap: 36px; align-items: start; } .pw-cita-cal { background: var(--pw-navy); border-radius: 22px; padding: 40px 42px; } .pw-cita-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; margin-bottom: 24px; } .pw-days { display: flex; gap: 8px; flex-wrap: wrap; } .pw-day { font-size: 13.5px; font-weight: 600; padding: 11px 16px; border-radius: 12px; background: var(--pw-navy-2); color: #9FAAC4; text-decoration: none; } .pw-day:hover { color: #fff; } .pw-day.on { background: var(--pw-azul); color: #fff; } .pw-band { display: flex; background: var(--pw-navy-2); border-radius: 999px; padding: 4px; } .pw-band a { font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 999px; color: #9FAAC4; text-decoration: none; } .pw-band a:hover { color: #fff; } .pw-band a.on { background: var(--pw-azul); color: #fff; } .pw-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .pw-slot { position: relative; margin: 0; } .pw-slot input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .pw-slot .box { display: block; border: 1px solid; border-radius: 13px; padding: 14px 12px; text-align: center; cursor: pointer; } .pw-slot .box .hora { color: #fff; font-size: 15px; font-weight: 600; display: block; } .pw-slot .box .lbl { font-size: 12px; margin-top: 4px; display: block; } .pw-slot.libre .box { background: #1B2145; border-color: #243A34; } .pw-slot.libre .lbl { color: var(--pw-libre); } .pw-slot.ajust .box { background: #1B2145; border-color: #3A3320; } .pw-slot.ajust .lbl { color: var(--pw-ajust); } .pw-slot.lleno .box { background: #12162F; border-color: #232847; opacity: .55; cursor: default; } .pw-slot.lleno .lbl { color: #6B7386; } .pw-slot input:checked + .box { border-color: var(--pw-azul-2); box-shadow: 0 0 0 2px var(--pw-azul-2); } .pw-slot input:focus-visible + .box { box-shadow: 0 0 0 2px var(--pw-azul-2); } .pw-cita-empty { color: #8FA0C4; font-size: 14.5px; padding: 20px 0; } .pw-cita-legend { display: flex; gap: 20px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #232847; font-size: 12.5px; color: #8FA0C4; flex-wrap: wrap; } .pw-cita-legend span { display: inline-flex; align-items: center; gap: 7px; } .pw-cita-legend .dot { width: 8px; height: 8px; border-radius: 50%; } .pw-cita-form { border: 1px solid var(--pw-line); border-radius: 22px; padding: 36px 38px; position: sticky; top: 90px; } body.admin-bar .pw-cita-form { top: 122px; } .pw-cita-form h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 18px; } .pw-cita-form .pw-label { margin-bottom: 14px; } .pw-cita-note { font-size: 12.5px; color: var(--pw-ink-3); margin-top: 14px; } .pw-confirm { background: var(--pw-navy); color: #fff; border-radius: 24px; padding: 40px 42px; max-width: 500px; } .pw-confirm .tag { font-family: var(--pw-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-libre); margin-bottom: 14px; } .pw-confirm h2 { font-size: 30px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 8px; } .pw-confirm .sub { color: #B9C4DA; margin-bottom: 22px; } .pw-confirm .loc { font-family: var(--pw-mono); font-size: 22px; letter-spacing: .04em; background: #1B2145; border: 1px solid #2A3157; border-radius: 12px; padding: 14px 18px; display: inline-block; margin-bottom: 22px; } .pw-confirm .crow { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; padding: 14px 0; border-top: 1px solid #232847; } .pw-confirm .crow .k { color: #8FA0C4; } .pw-confirm .crow .v { font-weight: 600; } /* ---- Página Gestionar cita (D2) --------------------------------------- */ .pw-gest { display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; align-items: start; } .pw-gest-col { display: flex; flex-direction: column; gap: 18px; } .pw-gest h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; } .pw-gest .sub { font-size: 14px; color: var(--pw-ink-3); margin: 8px 0 20px; } .pw-badge-estado { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 11px; border-radius: 7px; white-space: nowrap; } .pw-badge-estado.ok { background: var(--pw-ok-bg); color: var(--pw-ok); } .pw-badge-estado.bad { background: var(--pw-bad-bg); color: var(--pw-bad); } .pw-gest-fhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .pw-gest-fhead .lab { font-family: var(--pw-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-ink-3); } .pw-drow { display: flex; justify-content: space-between; gap: 16px; font-size: 15.5px; padding: 17px 0; border-top: 1px solid var(--pw-sep); } .pw-drow.last { border-bottom: 1px solid var(--pw-sep); } .pw-drow .k { color: var(--pw-ink-2); } .pw-drow .v { font-weight: 600; } .pw-drow .v.mono { font-family: var(--pw-mono); } .pw-gest-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } .pw-btn-red { border: 1px solid var(--pw-line-2); background: #fff; color: var(--pw-lleno); font-size: 11.5px; } .pw-btn-red:hover { border-color: var(--pw-lleno); } .pw-avisos { background: var(--pw-soft); border-radius: 22px; padding: 28px 32px; } .pw-avisos h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 14px; } .pw-avisos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font-size: 14.5px; color: var(--pw-tab); } .pw-hslots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .pw-hslot { position: relative; } .pw-hslot input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .pw-hslot span { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 1.5px solid var(--pw-line-2); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14px; line-height: 1.15; cursor: pointer; } .pw-hslot span small { color: var(--pw-ink-3); font-weight: 500; font-size: 11.5px; } .pw-hslot input:checked + span { border-color: var(--pw-azul); background: var(--pw-badge); color: var(--pw-azul); } .pw-hslot input:checked + span small { color: var(--pw-azul); } .pw-hslot input:focus-visible + span { outline: 2px solid var(--pw-azul); outline-offset: 2px; } .pw-cambiar { margin-top: 24px; border-top: 1px solid var(--pw-sep); padding-top: 22px; } .pw-cambiar h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 12px; } /* ---- Página Alta (B2) ------------------------------------------------- */ .pw-alta { display: grid; grid-template-columns: 1.35fr .65fr; gap: 36px; align-items: start; } .pw-alta-card { padding: 44px 46px; } .pw-alta-card h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .pw-alta-card .sub { font-size: 14px; color: var(--pw-ink-3); margin: 6px 0 18px; } .pw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } .pw-block { border-top: 1px solid var(--pw-sep); margin-top: 26px; padding-top: 26px; } .pw-block-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; } .pw-add-benef { border: 1px solid var(--pw-line-2); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; color: var(--pw-azul); } .pw-add-benef:hover { border-color: var(--pw-azul); } .pw-benef-empty { border: 1px dashed #D6DEE8; border-radius: 14px; padding: 18px; font-size: 14px; color: var(--pw-ink-3); margin-bottom: 10px; } .pw-benef-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; align-items: end; background: #F8FAFC; border-radius: 14px; padding: 16px; margin-bottom: 10px; } .pw-benef-row .pw-input { padding: 11px 13px; font-size: 14px; } .pw-benef-quitar { border: 1px solid var(--pw-line-2); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; padding: 11px 15px; border-radius: 11px; color: var(--pw-lleno); } .pw-chips-row { display: flex; gap: 10px; flex-wrap: wrap; } .pw-chips-row + .pw-chips-row { margin-top: 14px; } .pw-checks { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--pw-sep); margin-top: 26px; padding-top: 24px; margin-bottom: 26px; } .pw-alta-aside { background: var(--pw-soft); border-radius: 22px; padding: 30px; position: sticky; top: 90px; } body.admin-bar .pw-alta-aside { top: 122px; } .pw-alta-aside .lab { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-ink-3); margin-bottom: 18px; } .pw-ares { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; padding: 16px 0; border-top: 1px solid var(--pw-sep-2); } .pw-ares.last { border-bottom: 1px solid var(--pw-sep-2); } .pw-ares .k { color: var(--pw-ink-2); } .pw-ares .v { font-weight: 600; } .pw-ares .v.azul { color: var(--pw-azul); } .pw-ares-total { display: flex; justify-content: space-between; gap: 14px; font-size: 18px; font-weight: 600; padding: 18px 0 0; } .pw-ares-nota { font-size: 12.5px; color: var(--pw-ink-3); margin-top: 16px; } /* ---- Página Preinscripción (C3) --------------------------------------- */ .pw-pre { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 36px; align-items: start; } .pw-pre-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 26px; min-width: 0; } body.admin-bar .pw-pre-aside { top: 122px; } .pw-selects2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .pw-sel-card { background: var(--pw-soft); border-radius: 22px; padding: 34px 36px; } .pw-sel-card .lab { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-ink-3); margin-bottom: 18px; } .pw-sel-card .nota { font-size: 12.5px; color: var(--pw-ink-3); margin-top: 16px; } .pw-aforo-card { border: 1px dashed #C9D4E0; border-radius: 20px; padding: 28px 30px; } .pw-aforo-card .lab { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-azul); display: block; margin-bottom: 10px; } .pw-aforo-card p { font-size: 13.5px; color: var(--pw-ink-2); } /* ---- Estáticas: instalaciones y artículos ----------------------------- */ .pw-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pw-drow.top0 { border-top: 0; } .pw-pendiente { border: 1px dashed #C9D4E0; border-radius: 20px; padding: 30px 34px; margin-top: 20px; } .pw-pendiente .lab { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-azul); display: block; margin-bottom: 12px; } .pw-pendiente-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; font-size: 14.5px; color: var(--pw-ink-2); } .pw-art-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .pw-art { border: 1px solid var(--pw-line); border-radius: 18px; padding: 24px 26px; } .pw-art h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; } .pw-art .d { font-size: 13.5px; color: var(--pw-ink-2); margin-bottom: 14px; } .pw-art .p { font-size: 12.5px; font-weight: 600; color: var(--pw-ink-3); background: var(--pw-badge); padding: 4px 11px; border-radius: 999px; display: inline-block; } /* ---- Normativa: acordeón ---------------------------------------------- */ .pw-acc { border: 1px solid var(--pw-line); border-radius: 18px; overflow: hidden; } .pw-acc details + details { border-top: 1px solid var(--pw-line); } .pw-acc summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .pw-acc summary::-webkit-details-marker { display: none; } .pw-acc summary .plus { font-size: 22px; color: var(--pw-azul); transition: transform .2s ease; line-height: 1; flex: none; } .pw-acc details[open] summary .plus { transform: rotate(45deg); } .pw-acc .body { padding: 0 24px 20px; color: var(--pw-ink-2); font-size: 15px; max-width: 72ch; } .pw-acc .body strong { color: var(--pw-ink); } .pw-docs { border: 1px dashed #C9D4E0; border-radius: 18px; padding: 24px 26px; margin-top: 20px; font-size: 14px; color: var(--pw-ink-2); } .pw-docs .lab { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-azul); display: block; margin-bottom: 8px; } .pw-norm { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: start; } .pw-norm-docs { background: var(--pw-soft); border-radius: 22px; padding: 36px 38px; margin-bottom: 20px; } .pw-norm-docs h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 16px; } .pw-docbtn { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: #fff; border-radius: 13px; padding: 15px 18px; font-size: 14.5px; font-weight: 600; color: var(--pw-ink); } .pw-docbtn + .pw-docbtn { margin-top: 10px; } .pw-docbtn .st { color: var(--pw-ink-3); font-weight: 600; font-size: 13px; } .pw-norm-acc h2 { font-size: 26px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 20px; } .pw-acc .body ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; } /* ---- Hub (portada de piscina) ----------------------------------------- */ .pw-hero { position: relative; border-radius: 30px; overflow: hidden; background: radial-gradient(900px 480px at 85% 0%, rgba(27,127,196,.4), transparent 60%), var(--pw-navy); min-height: min(76vh, 560px); display: flex; flex-direction: column; margin-top: 12px; } .pw-hero-top { position: relative; z-index: 2; padding: clamp(28px,5vh,56px) 34px 0; max-width: 1100px; } .pw-hero-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.12); border-radius: 999px; padding: 7px 15px 7px 7px; margin-bottom: 22px; } .pw-hero-badge .sq { width: 20px; height: 20px; border-radius: 6px; background: var(--pw-azul); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; flex: none; } .pw-hero-badge .tx { font-family: var(--pw-mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: #fff; } .pw-hero-wm { display: block; height: clamp(30px,5.4vh,54px); width: auto; max-width: 100%; margin-bottom: 22px; } .pw-hero h1 { color: #fff; font-size: clamp(30px,6.2vh,60px); line-height: 1.02; letter-spacing: -.04em; font-weight: 500; max-width: 16ch; margin-bottom: 16px; } .pw-hero-lead { color: rgba(255,255,255,.85); font-size: clamp(14px,1.8vh,16.5px); max-width: 58ch; } .pw-hero-bottom { position: relative; z-index: 2; margin-top: auto; padding: clamp(24px,4vh,44px) 34px clamp(20px,3vh,32px); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .pw-hero-facts { display: flex; gap: clamp(20px,4vw,56px); font-family: var(--pw-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); padding-bottom: 6px; flex-wrap: wrap; } .pw-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } .pw-hero-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; padding: 14px 26px; border-radius: 999px; white-space: nowrap; } .pw-hero-btn.azul { background: var(--pw-azul); color: #fff; } .pw-hero-btn.azul:hover { background: #fff; color: var(--pw-navy); } .pw-hero-btn.blanco { background: #fff; color: var(--pw-navy); } .pw-hero-btn.blanco:hover { background: var(--pw-azul); color: #fff; } .pw-facts-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--pw-line); margin-top: 14px; } .pw-fact { padding: 24px 26px; border-top: 1px solid var(--pw-line); border-right: 1px solid var(--pw-line); min-width: 0; } .pw-fact:last-child { border-right: 0; } .pw-fact .l { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--pw-ink-3); margin-bottom: 10px; } .pw-fact .v { font-size: 19px; font-weight: 600; letter-spacing: -.02em; } .pw-fact .s { font-size: 14px; color: #7C859A; } .pw-hubsec { padding: clamp(56px,9vw,100px) 34px 40px; } .pw-hubsec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; flex-wrap: wrap; margin-bottom: 44px; } .pw-hubsec-head h2 { font-size: clamp(32px,5vw,56px); line-height: 1.05; letter-spacing: -.04em; font-weight: 500; max-width: 17ch; } .pw-hubsec-head p { font-size: 16px; color: var(--pw-ink-2); max-width: 38ch; } .pw-seccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; } .pw-seccard { border: 1px solid var(--pw-line); border-radius: 22px; padding: 30px 32px; display: flex; flex-direction: column; } .pw-seccard.destacada { border-color: var(--pw-azul); } .pw-seccard-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .pw-seccard .code { font-family: var(--pw-mono); font-size: 11px; letter-spacing: .12em; color: var(--pw-azul); } .pw-seccard .mas { background: var(--pw-azul); color: #fff; font-family: var(--pw-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; } .pw-seccard h3 { font-size: 26px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 10px; } .pw-seccard .lead { font-size: 15px; color: var(--pw-ink-2); margin-bottom: 18px; } .pw-seclinks { display: flex; flex-direction: column; margin-top: auto; } .pw-seclink { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--pw-tab); padding: 11px 0; border-top: 1px solid var(--pw-sep); } .pw-seclink:hover { color: var(--pw-azul); } .pw-seclink .arr { color: #C3CAD6; font-size: 12px; } .pw-hubcursos { padding: 70px 34px 40px; } .pw-hubcursos-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 32px; } .pw-hubcursos-head h2 { font-size: clamp(28px,4vw,40px); line-height: 1.06; letter-spacing: -.035em; font-weight: 500; } .pw-hubcursos-head a { font-size: 15px; font-weight: 600; color: var(--pw-azul); } .pw-hubcursos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .pw-hubcurso { border: 1px solid var(--pw-line); border-radius: 18px; padding: 24px 26px; display: flex; flex-direction: column; gap: 6px; } .pw-hubcurso:hover { border-color: var(--pw-azul); } .pw-hubcurso .edad { font-family: var(--pw-mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--pw-ink-3); } .pw-hubcurso .nom { font-size: 21px; font-weight: 500; letter-spacing: -.025em; color: var(--pw-ink); } .pw-hubcurso .precio { font-size: 14.5px; font-weight: 600; color: var(--pw-azul); margin-top: 4px; } .pw-cta { border-radius: 30px; background: radial-gradient(700px 300px at 80% 0%, rgba(53,174,226,.25), transparent 60%), var(--pw-navy); padding: clamp(40px,6vw,64px) 44px; margin: 40px 34px 0; display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap; } .pw-cta h2 { color: #fff; font-size: clamp(30px,4vw,44px); line-height: 1.06; letter-spacing: -.04em; font-weight: 500; max-width: 17ch; margin-bottom: 12px; } .pw-cta p { color: #9FAAC4; font-size: 16px; max-width: 44ch; } @media (max-width: 760px) { .pw-facts-strip { grid-template-columns: 1fr 1fr; } .pw-fact:nth-child(2) { border-right: 0; } } /* ---- Página Contacto (E) ---------------------------------------------- */ .pw-contacto { display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; align-items: start; } .pw-contacto-col { display: flex; flex-direction: column; gap: 18px; } .pw-contactcard { background: var(--pw-navy); color: #fff; border-radius: 22px; padding: 40px 42px; } .pw-cc-logo { display: block; height: 26px; width: auto; max-width: 100%; margin-bottom: 24px; } .pw-contactcard .tel { display: block; font-size: 28px; font-weight: 500; letter-spacing: -.03em; color: #fff; margin-bottom: 8px; } .pw-contactcard .mail { display: block; font-size: 15.5px; color: #B9C4DA; } .pw-contactcard .row { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; padding: 17px 0; border-top: 1px solid #232847; } .pw-contactcard .row:first-of-type { margin-top: 24px; } .pw-contactcard .row .k { color: #8FA0C4; } .pw-contactcard .row .v { font-weight: 600; } .pw-mapcard { border: 1px solid var(--pw-line); border-radius: 22px; overflow: hidden; } .pw-mapcard .canvas { height: 200px; background: var(--pw-soft); display: flex; align-items: flex-end; padding: 16px; } .pw-mapcard .canvas span { font-family: var(--pw-mono); font-size: 10.5px; color: #9BA5B5; background: #fff; padding: 6px 10px; border-radius: 6px; } .pw-mapcard .body { padding: 28px 30px; } .pw-mapcard .body h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; } .pw-mapcard .body p { font-size: 14px; color: var(--pw-ink-2); } .pw-cform { border: 1px solid var(--pw-line); border-radius: 22px; padding: 44px 46px; } .pw-cform h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; } .pw-cform .sub { font-size: 14px; color: var(--pw-ink-3); margin-bottom: 22px; } .pw-chipr { position: relative; } .pw-chipr input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .pw-chipr span { display: inline-block; border: 1px solid var(--pw-line-2); background: #fff; color: var(--pw-tab); font-size: 13.5px; font-weight: 600; padding: 11px 18px; border-radius: 999px; cursor: pointer; } .pw-chipr input:checked + span { background: var(--pw-azul); color: #fff; border-color: var(--pw-azul); } .pw-chipr input:focus-visible + span { outline: 2px solid var(--pw-azul); outline-offset: 2px; } .pw-textarea { width: 100%; border: 1px solid var(--pw-line-2); border-radius: 11px; padding: 12px 14px; font-family: inherit; font-size: 14.5px; color: var(--pw-ink); outline: none; resize: vertical; } .pw-textarea:focus { border-color: var(--pw-azul); box-shadow: 0 0 0 3px rgba(27,127,196,.13); } /* ---- Documento (condiciones generales) -------------------------------- */ .pw-doc { max-width: 760px; } .pw-doc h2 { font-size: 30px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 6px; } .pw-doc .meta { font-family: var(--pw-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-ink-3); margin-bottom: 24px; } .pw-doc h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 26px 0 8px; } .pw-doc p { color: var(--pw-ink-2); margin-bottom: 10px; } .pw-doc ul { margin: 0 0 12px; padding-left: 1.2em; color: var(--pw-ink-2); } .pw-doc li { margin-bottom: 6px; } .pw-doc .precios { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 12px; } .pw-doc .precios .pcard { border: 1px solid var(--pw-line); border-radius: 12px; padding: 14px 16px; } .pw-doc-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } @media (max-width: 560px) { .pw-doc .precios { grid-template-columns: 1fr; } } @media print { .pw-header, .pw-subnav, .pw-head, .pw-foot, .pw-doc-actions { display: none !important; } .pw-sec { padding: 0 !important; } } /* ---- Bloque "en preparación" ------------------------------------------ */ .pw-prep { border: 1px dashed #C9D4E0; border-radius: 20px; padding: 40px 42px; text-align: center; color: var(--pw-ink-2); } .pw-prep h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; color: var(--pw-ink); } /* ---- Contraste de enlaces-botón --------------------------------------- `.apw a { color: inherit }` (especificidad 0,1,1) gana a `.pw-btn-navy` (0,1,0), así que los botones que son heredaban texto oscuro sobre fondo oscuro. Estas reglas prefijadas con .apw recuperan su color. */ .apw .pw-header-cta, .apw .pw-btn-navy, .apw .pw-btn-azul { color: #fff; } .apw .pw-btn-navy:hover, .apw .pw-btn-azul:hover { color: #fff; } .apw .pw-btn-line { color: var(--pw-ink); } .apw .pw-btn-line:hover { color: var(--pw-azul); } .apw .pw-day { color: #9FAAC4; } .apw .pw-day:hover { color: #fff; } .apw .pw-day.on { color: #fff; } .apw .pw-band a { color: #9FAAC4; } .apw .pw-band a.on { color: #fff; } .apw .pw-navbtn { color: var(--pw-nav); } .apw .pw-navbtn.on { color: var(--pw-ink); } .apw .pw-subbtn { color: var(--pw-ink-2); } .apw .pw-subbtn.on { color: var(--pw-ink); } .apw .pw-header-area { color: var(--pw-ink); } .apw .pw-header-area:hover { color: var(--pw-azul); border-color: var(--pw-azul); } .apw .pw-course .ver { color: var(--pw-azul); } .apw .pw-chip.on { color: #fff; } .apw .pw-check a { color: var(--pw-azul); text-decoration: underline; } /* ---- Responsive -------------------------------------------------------- */ @media (max-width: 900px) { .pw-h1 { font-size: 38px; } .pw-tar-grid { grid-template-columns: 1fr 1fr; } .pw-tar-bottom { grid-template-columns: 1fr; } .pw-info-grid { grid-template-columns: 1fr 1fr; } .pw-ficha { grid-template-columns: 1fr; } .pw-fc-aside { position: static; } .pw-cita { grid-template-columns: 1fr; } .pw-cita-form { position: static; } .pw-gest { grid-template-columns: 1fr; } .pw-avisos-grid { grid-template-columns: 1fr; } .pw-alta { grid-template-columns: 1fr; } .pw-alta-aside { position: static; } .pw-pre { grid-template-columns: 1fr; } .pw-pre-aside { position: static; } .pw-2col { grid-template-columns: 1fr; } .pw-pendiente-grid { grid-template-columns: 1fr; } .pw-contacto { grid-template-columns: 1fr; } .pw-norm { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 620px) { .pw-grid2 { grid-template-columns: 1fr; } .pw-benef-row { grid-template-columns: 1fr; } } @media (max-width: 560px) { .pw-slots { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .pw-tar-grid, .pw-info-grid { grid-template-columns: 1fr; } .pw-selects2 { grid-template-columns: 1fr; } .pw-head { padding: 40px 20px 0; } .pw-sec { padding: 48px 20px 0; } .pw-h1 { font-size: 32px; } } @media (prefers-reduced-motion: reduce) { .apw * { transition: none !important; } } /* ---- Correcciones responsive de cabecera y menús ----------------------- */ /* Las reglas base de .pw-nav / .pw-subnav estaban DESPUÉS del media query de 900px y le ganaban por orden de fuente (mismo peso), dejando un hueco grande entre las filas del menú al partirse. Se reaplican aquí, al final, para que los espacios compactos ganen en tablet y móvil. */ @media (max-width: 900px) { /* Menú en una sola línea con scroll horizontal: los que no caben se ven deslizando a la derecha. El degradado del borde derecho insinúa que hay más. */ .pw-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 24px; padding: 2px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); } .pw-nav::-webkit-scrollbar { display: none; } .pw-navbtn { flex: none; white-space: nowrap; padding: 4px 0; } .pw-subnav { gap: 2px 18px; padding: 2px 16px; } .pw-subbtn { padding: 12px 0 10px; } .pw-header-area { margin-left: auto; } } /* ---- Móvil: gutter único de ~20px y cajas con menos padding ------------- */ /* En móvil se acumulaban los márgenes (página 14 + sección 20 + caja 42 = 76px por lado), dejando el contenido en una columna estrecha centrada. Se deja un único gutter de 20px en la página, las secciones sin padding lateral, y se reduce el padding interior de las cajas. Solo afecta a móvil. */ @media (max-width: 560px) { .pw-page { padding-left: 20px; padding-right: 20px; } .pw-ele-footer { margin-left: -20px; margin-right: -20px; } .pw-head, .pw-sec, .pw-foot { padding-left: 0; padding-right: 0; } .pw-card-pad { padding: 24px 20px; } .pw-confirm { padding: 28px 22px; } .pw-alta-card { padding: 24px 20px; } .pw-sel-card { padding: 22px 20px; } .pw-aforo-card { padding: 20px 18px; } .pw-norm-docs { padding: 24px 20px; } .pw-prep { padding: 26px 20px; } .pw-hero-top { padding-left: 22px; padding-right: 22px; } .pw-hubsec, .pw-hubcursos { padding-left: 22px; padding-right: 22px; } .pw-cta { padding-left: 24px; padding-right: 24px; margin-left: 0; margin-right: 0; } }