/* Oli · contacto.css — solo /contacto/ */
.contacto-hero h1 .firma { font-size: 1.3em; line-height: 1.1; }
.contacto-hero__texto { gap: var(--s-5); }
@media (min-width: 1024px) { .contacto-hero__texto { grid-column: 3 / 12; } }
.correo-grande { font-family: var(--f-texto); font-weight: 500; font-size: clamp(1.75rem, 1rem + 4.2vw, 4.5rem); line-height: 1.1; letter-spacing: -.015em; overflow-wrap: anywhere; }
.correo-grande .liga-texto { font-weight: 500; background-size: 100% 10px; padding-bottom: 8px; }
.copiar__boton .copiar__check { width: 16px; height: 16px; display: none; }
.copiar__check path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.copiar__boton.copiado .copiar__check { display: block; }
@media (prefers-reduced-motion: no-preference) { .copiar__boton.copiado .copiar__check path { animation: traza 180ms var(--ease-suave) both; } }
.copiar { justify-self: start; }

/* Los sobres: una pila de sobres sobre el escritorio. Cada uno abre tu correo con el asunto listo.
   Al pasar el cursor o con el foco, la solapa se abre (enseña su forro) y asoma la carta */
.motivos .seccion__cabeza h2 { font-size: var(--t-h3); }
.sobres { display: grid; gap: var(--s-6); padding-top: var(--s-5); }
.sobre { --giro: 0deg; --dy: 0px; position: relative; display: grid; gap: 0; align-content: start; rotate: var(--giro); translate: 0 var(--dy); }
.sobre:nth-child(odd) { --giro: -.8deg; }
.sobre:nth-child(even) { --giro: .8deg; }
.sobre__a {
  position: relative; z-index: 1; display: block; min-height: 188px; text-decoration: none; color: var(--ink);
  border-radius: 4px; background: var(--cream-deep);
  box-shadow: 0 1px 0 var(--bone), 0 14px 26px -16px rgba(58, 36, 24, .45);
  perspective: 900px;
}
/* La carta vive dentro del sobre y sube al abrirse */
.sobre__carta {
  position: absolute; z-index: 1; left: 7%; right: 7%; top: 8px; bottom: 14px; display: grid; align-content: start; gap: 9px;
  padding: 16px 18px; border-radius: 2px; background: var(--white);
  box-shadow: 0 0 0 1px var(--sand);
}
.sobre__renglon { height: 1.5px; border-radius: 2px; background: var(--sand); }
.sobre__renglon:nth-child(1) { width: 62%; background: var(--rosa); }
.sobre__renglon:nth-child(2) { width: 88%; }
.sobre__renglon:nth-child(3) { width: 74%; }
/* El frente del sobre, con el motivo y el asunto escritos como un destinatario */
.sobre__frente {
  position: relative; z-index: 2; display: grid; align-content: end; gap: 6px; min-height: 188px;
  padding: 90px var(--s-5) var(--s-5); border-radius: 4px;
  background: var(--off-white) linear-gradient(160deg, transparent 55%, rgba(58, 36, 24, .045));
}
.sobre__motivo { font-family: var(--f-texto); font-weight: 500; font-size: 1.5rem; line-height: 1.2; text-wrap: balance; }
.sobre__asunto { font-family: var(--f-italica); font-style: italic; font-size: 1.0625rem; color: var(--graphite); }
/* Timbre postal con la ola de Oli */
.sobre__timbre { position: absolute; z-index: 4; right: 16px; top: 16px; width: 30px; height: 36px; rotate: 4deg; }
.sobre__timbre-papel { fill: var(--terracota-soft); stroke: var(--terracota); stroke-width: 1.5; stroke-dasharray: 2.4 2; }
.sobre__timbre-ola { fill: none; stroke: var(--terracota-deep); stroke-width: 2.6; stroke-linecap: round; }
/* La solapa: un triángulo de papel con su doblez; por dentro, el forro estampado */
.sobre__tapa {
  position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 80px;
  transform-origin: 50% 0; transform-style: preserve-3d;
}
/* El filo de la solapa: la misma forma, un poco más grande y más oscura, detrás del papel */
.sobre__tapa::before {
  content: ""; position: absolute; inset: 0 0 -2px; backface-visibility: hidden; background: var(--bone);
  clip-path: polygon(0 0, 100% 0, 54% 92%, 50% 96%, 46% 92%);
}
.sobre__cara, .sobre__forro {
  position: absolute; inset: 0; backface-visibility: hidden;
  clip-path: polygon(0 0, 100% 0, 54% 92%, 50% 96%, 46% 92%);
}
.sobre__cara { inset: 0 1px 0; background: var(--cream) linear-gradient(180deg, transparent 20%, rgba(58, 36, 24, .08)); }
.sobre__forro {
  rotate: x 180deg;
  background: repeating-linear-gradient(135deg, var(--terracota-soft) 0 6px, var(--cream) 6px 12px);
}
.sobre__nota {
  position: relative; z-index: 0; margin: -8px 14px 0; padding: 18px 16px 12px;
  background: var(--cream-deep); border-radius: 0 0 2px 2px; box-shadow: 0 1px 0 var(--bone);
  font-size: var(--t-caption); line-height: 1.45; color: var(--graphite); rotate: calc(var(--giro) * -1.5);
}
/* Abierto: al pasar el cursor y con el foco del teclado */
.sobre__a:is(:hover, :focus-visible) .sobre__tapa { transform: rotateX(-180deg); z-index: 0; }
.sobre__a:is(:hover, :focus-visible) .sobre__carta { translate: 0 -38px; }
.sobre__a:is(:hover, :focus-visible) .sobre__motivo { color: var(--terracota-deep); }
.sobre:has(.sobre__a:is(:hover, :focus-visible)) { z-index: 5; }
@media (prefers-reduced-motion: no-preference) {
  .sobre__tapa { transition: transform 380ms var(--ease-suave), z-index 0s linear 190ms; }
  .sobre__carta { transition: translate 320ms var(--ease-suave) 60ms; }
  .sobre__a:is(:hover, :focus-visible) .sobre__carta { transition-delay: 140ms; }
  .sobre__motivo { transition: color var(--d-micro) var(--ease-suave); }
  .sobre { transition: rotate 320ms var(--ease-resorte); }
}
/* Escritorio: los sobres quedan regados, cada uno con su giro y su altura; uno se encima al de arriba */
@media (min-width: 768px) {
  .sobres { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: 88px; }
  .sobre:nth-child(1) { --giro: -2.4deg; }
  .sobre:nth-child(2) { --giro: 1.6deg; --dy: 18px; }
  .sobre:nth-child(3) { --giro: 1.2deg; --dy: -6px; }
  .sobre:nth-child(4) { --giro: -1.8deg; --dy: 12px; }
  .sobre:nth-child(5) { --giro: -1deg; }
  .sobre:nth-child(6) { --giro: 2.4deg; --dy: 10px; }
  .sobre:nth-child(7) { --giro: -2.2deg; }
}
@media (min-width: 1024px) {
  .sobres { grid-column: 3 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-7); row-gap: 88px; }
  .motivos__datos { grid-column: 3 / 13; }
  .sobre:nth-child(1) { --giro: -2.6deg; --dy: 0px; }
  .sobre:nth-child(2) { --giro: 1.4deg; --dy: 26px; }
  .sobre:nth-child(3) { --giro: -1.2deg; --dy: -10px; }
  .sobre:nth-child(4) { --giro: 2.2deg; --dy: -14px; }
  .sobre:nth-child(5) { --giro: -2deg; --dy: 18px; }
  .sobre:nth-child(6) { --giro: 1.6deg; --dy: -22px; }
  .sobre:nth-child(7) { --giro: -1deg; --dy: -6px; grid-column: 2; }
  .sobre:hover, .sobre:focus-within { rotate: calc(var(--giro) * .4); }
}
@media (forced-colors: active) { .sobre__a { border: 1px solid CanvasText; } .sobre__tapa { display: none; } .sobre__frente { padding-top: var(--s-5); } }
.motivos__datos { margin-top: var(--s-8); }