/* Alexander Yurevich Baat — tarjeta de visita profesional (one-pager estática).
   Hoja de estilo única: sin frameworks, sin CDN, todo local.
   Paleta: grafito (--ink) + azul apagado (--accent) sobre fondo claro. */

:root {
  --ink: #23272e;
  --body: #4b5560;
  --muted: #8b949e;
  --line: #e3e7ec;
  --bg: #f6f7f9;
  --white: #ffffff;
  --accent: #3f6f9c;
  --accent-dark: #2f5578;
  --accent-soft: #eef3f8;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(35, 39, 46, .07);
  --wrap: 1100px;
  --telegram: #229ED9;
  --whatsapp: #25D366;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, strong { color: var(--ink); }
h1 { font-size: clamp(1.85rem, 5.4vw, 2.55rem); line-height: 1.15; margin: 0 0 .4em; }
h2 { font-size: clamp(1.3rem, 4vw, 1.7rem); line-height: 1.25; margin: 0 0 .7em; }
h3 { font-size: 1.02rem; margin: 0 0 .45em; }
p { margin: 0 0 1em; }

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

section { padding: 44px 0; scroll-margin-top: 80px; }
.section-white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-note { color: var(--muted); font-size: .92rem; }

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; flex-wrap: nowrap; gap: 8px 16px;
  align-items: center; justify-content: space-between;
  padding-top: 10px; padding-bottom: 10px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.monogram {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 700; letter-spacing: .04em;
}
.brand-text { display: block; min-width: 0; }
.brand-name { display: block; font-size: .95rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.brand-role { display: block; font-size: .78rem; color: var(--muted); line-height: 1.3; }
/* Selector de idioma: botón de globo (<details>) + menú desplegable de enlaces.
   Funciona sin JavaScript; el script solo lo cierra al pulsar fuera o con Escape. */
.lang-switcher { position: relative; flex: none; margin: 0 0 0 auto; }
.lang-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; list-style: none;
  background: var(--white); color: var(--accent);
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.lang-button::-webkit-details-marker { display: none; }
.lang-button:hover { border-color: var(--accent); }
.lang-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-switcher[open] .lang-button { border-color: var(--accent); background: var(--accent-soft); }
.lang-globe { display: block; }
.lang-menu {
  position: absolute; z-index: 40; right: 0; top: calc(100% + 6px);
  min-width: 190px; margin: 0; padding: 6px; list-style: none;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
}
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 8px;
  font-size: .9rem; color: var(--ink); text-decoration: none;
}
.lang-menu a:hover { background: var(--accent-soft); color: var(--accent-dark); }
.lang-menu a[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.lang-code { font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.lang-menu a[aria-current="true"] .lang-code { color: var(--accent); }

/* ---------- Portada ---------- */
.hero { background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg) 100%); padding-top: 36px; }
.hero-grid { display: grid; gap: 28px; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; color: var(--accent); font-weight: 600; margin-bottom: .9em; }
.lede { font-size: 1.08rem; max-width: 42em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.4em 0 0; padding: 0; list-style: none; }

/* Retrato del titular en la cabecera (assets/photo-alex.jpg, foto propia 885 × 885):
   máscara redondeada y proporción natural de la imagen, sin recorte ni firma. */
.portrait { max-width: none; }
.portrait img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  box-shadow: 0 10px 26px rgba(35, 39, 46, .14);
}
/* Firma de autoría obligatoria por licencia (hoy, solo la panorámica de `#reserva`). */
.photo-credit { margin: .5em 0 0; font-size: .78rem; line-height: 1.35; color: var(--muted); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: .95rem;
  background: var(--accent); color: #fff; text-decoration: none;
  box-shadow: var(--shadow); cursor: pointer;
}
.btn:hover { background: var(--accent-dark); color: #fff; }
.btn-plain { background: var(--white); color: var(--accent); border: 1px solid var(--line); }
.btn-plain:hover { background: var(--white); color: var(--accent-dark); border-color: var(--accent); }

/* ---------- Tarjetas de servicios ---------- */
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card h3 { margin-bottom: .35em; }
.card p { margin: 0; font-size: .95rem; }

/* ---------- Sobre mí ---------- */
.about { max-width: 46em; }
.about p:last-child { margin-bottom: 0; }

/* ---------- Reserva de consulta (30 minutos) ---------- */
.booking { background: var(--accent-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.booking-panel {
  max-width: 46em; padding: 22px 20px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.booking-panel > :last-child { margin-bottom: 0; }
.booking-list { margin: 0 0 1em; padding: 0; list-style: none; }
.booking-list li { margin-bottom: .45em; }
.booking-list strong { color: var(--ink); }
/* Condiciones de la cita: párrafo corto en letra algo menor. */
.booking-terms { font-size: .92rem; }
.booking .section-note { max-width: 46em; margin-top: 1.1em; }
/* Banda panorámica del puerto de Barcelona (assets/foto-barcelona-puerto.jpg):
   decorativa, a todo el ancho del contenedor. */
.booking-photo { margin: 1.2em 0 1.6em; }
.booking-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 2400 / 678;
  object-fit: cover; border-radius: 22px;
  box-shadow: 0 10px 26px rgba(35, 39, 46, .14);
}

/* ---------- Precios (14 posiciones) y selector de divisa ----------
   La lista la construye assets/site.js desde assets/prices.js; sin JavaScript se ve
   la misma lista en euros escrita en el HTML. El selector de divisa no se muestra
   sin JavaScript (no tendría sentido) y solo aparece en los idiomas con más de una. */
.price-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 1.1em; }
.price-toolbar[hidden] { display: none; }
.currency-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.currency-pill {
  padding: 6px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--accent);
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.5; cursor: pointer;
}
.currency-pill:hover { border-color: var(--accent); color: var(--accent-dark); }
.currency-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.currency-pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.price-list { max-width: 46em; margin: 0; padding: 0; list-style: none; }
.price-item {
  display: flex; flex-wrap: wrap; gap: 2px 16px;
  justify-content: space-between; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.price-name { color: var(--ink); }
.price-value { font-weight: 700; color: var(--accent); white-space: nowrap; }
.price-unit { font-weight: 400; font-size: .86em; color: var(--muted); }
.price-note { max-width: 46em; margin: .9em 0 0; font-size: .82rem; color: var(--muted); }
.price-list + .section-note { max-width: 46em; margin-top: 1.1em; }

/* ---------- Contacto ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { margin-bottom: .9em; }
.contact-list strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.contact-list a { font-size: 1.05rem; font-weight: 600; text-decoration: none; }
.contact-list span { font-size: 1.02rem; color: var(--ink); }
.contact-list .directions-link { margin-left: .45em; font-size: .9rem; white-space: nowrap; }
.contact-list .contact-note { display: block; margin-top: .2em; font-size: .92rem; color: var(--muted); }

/* ---------- Botones flotantes de contacto (Telegram / WhatsApp) ----------
   Fijos y siempre visibles en la esquina inferior derecha, tanto en móvil como en
   escritorio. Iconos SVG en línea (nunca emoji) y etiqueta que se despliega al
   pasar el ratón solo en escritorio, con CSS. */
.contact-fabs {
  position: fixed; z-index: 20;
  right: 14px; bottom: 14px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.fab {
  display: inline-flex; align-items: center;
  height: 44px; min-width: 44px; border-radius: 999px;
  color: #fff; text-decoration: none;
  box-shadow: 0 6px 18px rgba(35, 39, 46, .25);
}
.fab:hover, .fab:focus-visible { color: #fff; }
.fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fab-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; }
.fab-icon svg { display: block; }
.fab-label { display: none; }
.fab-telegram { background: var(--telegram); }
.fab-telegram:hover { background: #1d8bbe; }
.fab-whatsapp { background: var(--whatsapp); }
.fab-whatsapp:hover { background: #1fb959; }

/* ---------- Pie ---------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .72); padding: 30px 0 92px; font-size: .9rem; }
.site-footer a { color: #fff; }
.site-footer .foot-row { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }
.site-footer p { margin: 0; }
.site-footer .foot-note { flex-basis: 100%; margin-top: 6px; font-size: .82rem; color: rgba(255, 255, 255, .55); }

/* Pie, bloque de confianza: adscripción profesional y formas de pago.
   Va encima de la fila de copyright y enlaces legales, separado por una línea. */
.foot-extra {
  display: grid; gap: 26px;
  margin-bottom: 26px; padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.foot-title { margin: 0 0 .7em; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .55); }
.foot-block p { margin: 0 0 .4em; }
.foot-block p:last-child { margin-bottom: 0; }
/* Logotipo oficial de la corporación (assets/coacb-logo.png): el original es
   gris sobre transparente, así que va sobre una placa blanca para que se lea
   sobre el pie oscuro. El archivo es local: nunca se enlaza a su servidor. */
.org-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .75em; padding: 10px 14px;
  background: var(--white); border-radius: 10px;
}
.org-badge:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.org-logo { display: block; height: 56px; width: auto; }
/* Formas de pago: cada pastilla lleva el logotipo oficial de la marca (SVG
   local en assets/pay/, nunca enlazado al servidor de nadie). Sobre el pie
   oscuro los logotipos en color no se leerían, así que la pastilla es la misma
   placa blanca que ya usa el logotipo del COACB. Se envuelven si no caben. */
.pay-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 .8em; padding: 0; list-style: none; }
.pay-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 5px 12px;
  background: var(--white); border-radius: 999px;
}
.pay-logo { display: block; height: 24px; width: auto; }
/* El pago por transferencia no tiene logotipo: icono neutro de banco (Lucide
   "landmark") en el color de acento, con la etiqueta al lado del lenguaje. */
.pay-pill-transfer { gap: 7px; font-size: .82rem; font-weight: 600; color: var(--ink); }
.pay-icon { display: block; width: 18px; height: 18px; flex: none; color: var(--accent); }

/* ---------- Páginas legales y 404 ---------- */
.page { max-width: 46em; }
.page h2 { margin-top: 1.5em; }
.page ul { padding-left: 1.2em; }
.page li { margin-bottom: .4em; }
.page ul.contact-list, .page ul.cta-row { padding-left: 0; }

/* ---------- Accesibilidad ---------- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 99; background: #fff; padding: 8px 14px; border-radius: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Escritorio ---------- */
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  section { padding: 56px 0; }
  .foot-extra { grid-template-columns: 1fr 1fr; gap: 24px 40px; }
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1fr 420px; align-items: center; gap: 40px; }
}
@media (min-width: 980px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Botones flotantes: escritorio y móvil ---------- */
@media (min-width: 640px) {
  .fab-label {
    display: inline-block; max-width: 0; padding-left: 0;
    overflow: hidden; white-space: nowrap;
    font-size: .9rem; font-weight: 600;
    transition: max-width .25s ease, padding-left .25s ease;
  }
  .fab:hover .fab-label, .fab:focus-visible .fab-label { max-width: 7rem; padding-left: 4px; }
}
@media (max-width: 639px) {
  /* Hueco a la derecha del pie: los botones flotantes (abajo a la derecha) no
     llegan a tapar el copyright, los enlaces legales, la nota de idioma ni los
     bloques de adscripción y formas de pago (en la página 404 todo el pie cabe
     en pantalla, así que el hueco se aplica a todo el pie). */
  .site-footer .wrap { padding-right: 76px; }
  /* Precios en móvil: el nombre y el importe van en dos líneas, así el importe
     nunca queda debajo de los botones flotantes. */
  .price-item { display: block; }
  .price-value { display: block; margin-top: 2px; }
}