/* Cauce · la web. Colores y letras de marca/claude/cauce-marca/assets/colores.css: ningún otro. */

@font-face { font-family: "EB Garamond"; font-weight: 500; font-display: swap;
  src: url("fuentes/EBGaramond-Medium.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-weight: 400; font-display: swap;
  src: url("fuentes/LibreFranklin-Regular.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-weight: 600; font-display: swap;
  src: url("fuentes/LibreFranklin-SemiBold.woff2") format("woff2"); }

:root {
  --azul: #1F2A44;
  --papel: #F1ECE2;
  --oro: #C9AD6E;
  --oro-viejo: #7A5F27;
  --pizarra: #5B6170;
  --niebla: #9AA3B5;
  --titulo: "EB Garamond", Garamond, Georgia, serif;
  --texto: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  --margen: clamp(16px, 5vw, 64px);
  --max: 1180px;
  --aire: clamp(64px, 10vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--azul);
  font: 400 17px/1.6 var(--texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 500; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(44px, 7vw, 88px); line-height: 1.02; }
h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; max-width: 22ch; }
h3 { font-size: 24px; line-height: 1.2; }
p { margin: 0; }

.ancho { max-width: var(--max); margin: 0 auto; padding: 0 var(--margen); }

/* Rótulo: mayúsculas chicas con interletrado, oro viejo sobre papel y oro sobre azul */
.rotulo {
  font: 600 12px/1 var(--texto);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro-viejo);
  margin-bottom: 20px;
}
.rotulo--oro { color: var(--oro); }

/* Invitación: verbo, flecha y filete oro. Una por bloque. */
.invitacion {
  display: inline-block;
  font: 600 17px/1.4 var(--texto);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--oro);
  transition: gap .2s, color .2s;
}
.invitacion span { display: inline-block; transition: transform .2s; }
.invitacion:hover span, .invitacion:focus-visible span { transform: translateX(4px); }
.invitacion--papel { color: var(--papel); overflow-wrap: anywhere; }

/* Las aguas, intensidad línea */
.aguas-linea { width: 96px; height: 40px; display: block; margin: 28px 0; overflow: visible; }
.agua-arriba { stroke: #8b93a6; stroke-opacity: .75; }
.agua-oro { stroke: var(--oro); }

.nota { color: var(--pizarra); margin-top: 40px; max-width: 60ch; }

/* Cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--papel) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--azul) 12%, transparent);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.cabecera__logo img { height: 44px; width: auto; }
.cabecera__nav { display: flex; gap: 32px; align-items: center; font-size: 15px; }
.cabecera__nav a { text-decoration: none; color: var(--pizarra); }
.cabecera__nav a:hover { color: var(--azul); }
.cabecera__nav .cabecera__contacto { color: var(--azul); font-weight: 600; border-bottom: 2px solid var(--oro); padding-bottom: 2px; }

/* Portada */
.portada {
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 48px;
  max-width: var(--max); margin: 0 auto; padding: var(--aire) var(--margen);
  min-height: min(calc(100svh - 76px), 820px);
}
.portada__texto { display: flex; flex-direction: column; }
.bajada { font-size: 19px; color: var(--pizarra); max-width: 44ch; margin: 32px 0 36px; }
.portada .invitacion { align-self: flex-start; }
.portada__sello { justify-self: end; width: min(100%, 400px); }

/* La frase, en bloque azul con textura abajo */
.frase { background: var(--azul); color: var(--papel); padding: var(--aire) 0 0; position: relative; }
.frase__texto {
  font: 500 clamp(30px, 4.4vw, 56px)/1.15 var(--titulo);
  max-width: 24ch;
}
.frase__texto em { font-style: normal; color: var(--oro); }
.textura {
  height: clamp(96px, 14vw, 160px);
  margin-top: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16.443 36 67.114 28' width='134' height='56'%3E%3Cg fill='none' stroke='%23C9AD6E' stroke-opacity='.22'%3E%3Cpath d='M16.443 43.289 Q27.629 33.624 38.814 43.289 Q50 52.953 61.186 43.289 Q72.371 33.624 83.557 43.289' stroke-width='3.356'/%3E%3Cpath d='M16.443 56.711 Q27.629 47.047 38.814 56.711 Q50 66.376 61.186 56.711 Q72.371 47.047 83.557 56.711' stroke-width='4.474'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 134px 56px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 85%);
  mask-image: linear-gradient(to bottom, transparent, #000 85%);
}

/* Secciones */
.seccion { padding: var(--aire) 0; }
.seccion--clara { background: #fff8; background: color-mix(in srgb, #fff 45%, var(--papel)); }
.seccion--corta { padding: clamp(56px, 8vw, 96px) 0; }
.seccion h2 { margin-bottom: clamp(40px, 5vw, 64px); }

/* Columnas con filete */
.columnas { display: grid; gap: clamp(32px, 4vw, 56px); }
.columnas--3 { grid-template-columns: repeat(3, 1fr); }
.columna { border-top: 2px solid var(--azul); padding-top: 24px; }
.columna h3 { margin-bottom: 14px; }
.columna p { color: var(--pizarra); }
.flecha { color: var(--oro); }

/* Énfasis */
.enfasis { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid color-mix(in srgb, var(--azul) 18%, transparent); }
.enfasis__item { padding: 36px 40px 40px 0; border-bottom: 1px solid color-mix(in srgb, var(--azul) 18%, transparent); }
.enfasis__item:nth-child(even) { padding-left: 40px; padding-right: 0; border-left: 1px solid color-mix(in srgb, var(--azul) 18%, transparent); }
.enfasis__num { font: 500 20px/1 var(--titulo); color: var(--oro-viejo); margin-bottom: 18px; font-variant-numeric: lining-nums; }
.enfasis__item h3 { margin-bottom: 10px; }
.enfasis__item p:last-child { color: var(--pizarra); max-width: 46ch; }

/* Método */
.metodo { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.ciclo { list-style: none; padding: 0; margin: 0; counter-reset: paso; }
.ciclo li {
  counter-increment: paso;
  display: grid; grid-template-columns: 44px 1fr; column-gap: 12px;
  padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--azul) 14%, transparent);
  color: var(--pizarra);
}
.ciclo li::before { content: counter(paso); grid-row: span 2; font: 500 28px/1 var(--titulo); color: var(--oro-viejo); }
.ciclo li span { display: block; font-weight: 600; color: var(--azul); }
.metodo__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 50%; }

/* Por dónde empezar */
.empezar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.empezar h2 { margin-bottom: 0; }
.empezar p { color: var(--pizarra); font-size: 18px; }
.tipos { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tipos li { font: 600 15px/1 var(--texto); border: 1px solid var(--azul); padding: 12px 16px; }

/* Socias */
.socias { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 5vw, 72px); }
.socia { border-top: 2px solid var(--azul); padding-top: 28px; }
.socia h3 { font-size: 30px; }
.socia__rol { font: 600 13px/1.4 var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--oro-viejo); margin: 8px 0 14px; }
.socia p:last-child { color: var(--pizarra); }

/* Contacto */
.contacto { background: var(--azul); color: var(--papel); padding: var(--aire) 0; }
.contacto h2 { margin-bottom: 36px; }

/* Pie */
.pie { background: var(--azul); color: var(--niebla); border-top: 1px solid color-mix(in srgb, var(--papel) 14%, transparent); padding: 32px 0; font-size: 14px; }
.pie__fila { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.pie img { height: 40px; width: auto; }

/* Teléfono y tablet */
@media (max-width: 900px) {
  .portada { grid-template-columns: 1fr; min-height: 0; padding-top: 48px; padding-bottom: 72px; gap: 32px; }
  .portada__sello { order: -1; justify-self: start; width: 150px; }
  .columnas--3, .metodo, .empezar { grid-template-columns: 1fr; }
  .metodo__foto { order: -1; }
  .metodo__foto img { aspect-ratio: 3 / 2; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .cabecera__fila { height: 64px; }
  .cabecera__logo img { height: 36px; }
  .cabecera__nav a:not(.cabecera__contacto) { display: none; }
  html { scroll-padding-top: 68px; }
  .bajada { font-size: 17px; }
  .enfasis { grid-template-columns: 1fr; }
  .enfasis__item, .enfasis__item:nth-child(even) { padding: 28px 0; border-left: 0; }
  .socias { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .invitacion span { transition: none; }
}