/* Red de presencia · estilos comunes a todas las webs.
   Cada web pone sus colores en sitios/<id>/estilos.css (variables de :root). */

@font-face {
  font-family: "Inter";
  src: url("/assets/fuentes/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/assets/fuentes/sora.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* Base de la marca (los mismos que la central) */
  --noche: #101426;
  --tinta: #1e2233;
  --tinta-2: #4a5164;
  --crema: #faf7f2;
  --linea-clara: #e6dfd3;
  --blanco: #ffffff;
  /* Cada web los cambia en su estilos.css */
  --acento: #c4046a;
  --acento-fondo: #fdeef6;
  --cabecera: var(--noche);
  --cabecera-texto: #edeff7;
  --radio: 12px;
  --ancho: 46rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--crema);
  color: var(--tinta);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Sora", "Inter", system-ui, sans-serif;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tinta);
  margin: 2em 0 0.6em;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin-top: 0.4em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); }
h3 { font-size: 1.2rem; }

p, ul, ol { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: 0.3em; }

a { color: var(--acento); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; border-radius: var(--radio); }

blockquote {
  margin: 1.5em 0;
  padding: 0.9em 1.2em;
  border-left: 4px solid var(--acento);
  background: var(--blanco);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-style: italic;
}

code { font-size: 0.92em; background: var(--blanco); padding: 0.1em 0.35em; border-radius: 6px; border: 1px solid var(--linea-clara); }
pre { overflow-x: auto; background: var(--noche); color: #edeff7; padding: 1em; border-radius: var(--radio); }
pre code { background: none; border: 0; padding: 0; color: inherit; }

table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.95em; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 0.55em 0.7em; border-bottom: 1px solid var(--linea-clara); }
th { font-family: "Sora", sans-serif; font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--linea-clara); margin: 2.5em 0; }

.ancho { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--blanco); padding: 0.5em 1em; z-index: 10; }
.saltar:focus { left: 1rem; }

/* Cabecera */
.cabecera { background: var(--cabecera); color: var(--cabecera-texto); }
.cabecera-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.marca { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--cabecera-texto); text-decoration: none; }
.marca-sub { display: block; font-family: "Inter", sans-serif; font-weight: 400; font-size: 0.82rem; opacity: 0.8; margin-top: 0.1rem; }
.menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; font-size: 0.95rem; }
.menu a { color: var(--cabecera-texto); text-decoration: none; opacity: 0.85; }
.menu a:hover { opacity: 1; text-decoration: underline; }

main { flex: 1; padding-top: 2rem; padding-bottom: 3rem; }

/* Piezas */
.miga { font-size: 0.9rem; margin-bottom: 0; }
.miga a { color: var(--tinta-2); }
.meta { color: var(--tinta-2); font-size: 0.95rem; }
.meta a { color: var(--tinta-2); }
.cuerpo > :first-child { margin-top: 0; }

.preguntas { margin-top: 3rem; }
.preguntas details { background: var(--blanco); border: 1px solid var(--linea-clara); border-radius: var(--radio); padding: 0.8em 1.1em; margin-bottom: 0.7em; }
.preguntas summary { cursor: pointer; font-weight: 600; }
.preguntas details[open] summary { margin-bottom: 0.5em; }
.preguntas details div > :last-child { margin-bottom: 0; }

.llamada { margin: 3rem 0 1rem; padding: 1.4rem 1.5rem; background: var(--acento-fondo); border-radius: var(--radio); border: 1px solid var(--linea-clara); }
.llamada p { margin-bottom: 0.9em; }
.boton { display: inline-block; background: var(--acento); color: var(--blanco); font-weight: 600; text-decoration: none; padding: 0.65em 1.2em; border-radius: 999px; }
.boton:hover { filter: brightness(1.08); text-decoration: none; }

/* Portada */
.lista ul { list-style: none; padding: 0; }
.lista li { padding: 1.1em 0; border-bottom: 1px solid var(--linea-clara); margin: 0; }
.lista li a { font-family: "Sora", sans-serif; font-weight: 600; font-size: 1.15rem; text-decoration: none; }
.lista li a:hover { text-decoration: underline; }
.lista li p { margin: 0.3em 0; color: var(--tinta-2); }
.lista time { font-size: 0.85rem; color: var(--tinta-2); }
.pronto { margin-top: 2rem; padding: 1rem 1.2rem; background: var(--blanco); border: 1px dashed var(--linea-clara); border-radius: var(--radio); color: var(--tinta-2); }

/* Pie */
.pie { background: var(--noche); color: #cdd3e8; font-size: 0.92rem; padding: 2rem 0; }
.pie p { margin: 0 0 0.5em; }
.pie a { color: #edeff7; }
.firma { font-family: "Sora", sans-serif; font-weight: 600; color: #edeff7; }

@media (max-width: 34rem) {
  body { font-size: 1rem; }
  main { padding-top: 1.4rem; }
}


/* Consultorio (conempatiadigital.com): verde azulado sobre crema. */
:root {
  --acento: #0e6e78;
  --acento-fondo: #e6f3f3;
  --cabecera: #0b2f35;
  --cabecera-texto: #eef6f5;
}