/* COAMUN r10 · p3: Dudas = sobres lacrados y Registro = gafete de papel. Va después de r8/w3.css; solo lo nuevo de r10.
   Las dos piezas son del mismo mundo (papel, lacre, línea, Italiana). Sin JS no se carga nada de esto: la lista de
   <details> y el botón de r9 siguen como estaban (app.js pone .dudas-lista--sobres y arma el gafete). */

:root {
  --sobre-dorso: #e7dfcf;      /* el dorso del sobre: crema un tono más oscuro que el frente */
  --sobre-frente: #f3ede2;     /* la crema de la casa (estilos.css, --crema) */
  --sobre-solapa: #f7f2e8;
  --sobre-carta: #fffdf8;
  --sobre-filo: rgba(110, 90, 60, .22);
  --tinta-2: #45474d;          /* gris de texto sobre papel crema: 8.4:1 sobre #f3ede2 */
  --ease-sobre: cubic-bezier(.23, 1, .32, 1);
  --ease-giro: cubic-bezier(.77, 0, .175, 1);
}

/* --- DUDAS · cada pregunta es un sobre ---
   Caja de alto fijo (abrir no mueve nada: CLS 0). Capas, de atrás hacia delante: el dorso (el <details>), la carta con
   la respuesta (sale del bolsillo al abrir), el frente del bolsillo con la pregunta, la solapa y el lacre. El <summary>
   cubre todo el sobre: tocar cualquier parte lo abre o lo cierra; Tab, Enter y el lector de pantalla siguen siendo los
   de <details>. Al abrir: el lacre se parte en dos, la solapa se voltea hacia arriba y la carta sube. */
.dudas-lista--sobres {
  --sobre-h: 160px;
  --bolsillo: 66px;            /* alto del frente del bolsillo, donde va la pregunta */
  display: grid;
  gap: 34px;                   /* deja aire a la solapa abierta (sube ~32 px sobre el sobre) */
  padding-top: 34px;
}
.dudas-lista--sobres .dudas-item {
  position: relative;
  isolation: isolate;
  height: var(--sobre-h);
  border: 0;
  border-radius: 4px;
  background: var(--papel-fibra), var(--sobre-dorso);
  box-shadow: 0 1px 0 var(--sobre-filo), 0 18px 28px -22px rgba(80, 62, 36, .55);
  perspective: none;
}
.dudas-lista--sobres .dudas-item:last-child { margin-bottom: 0; }

.dudas-lista--sobres .dudas-pregunta {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  font-weight: 400;
  animation: none !important;
  transform: none !important;
  border-radius: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Las piezas de r7–r9 (punto, filete, halo) no van en el sobre. */
.dudas-lista--sobres .dudas-pregunta::after { content: none; }
.dudas-lista--sobres .dudas-pregunta,
.dudas-lista--sobres .dudas-respuesta { text-shadow: none; }

/* El frente del bolsillo: crema, con los dos pliegues en diagonal que dicen «sobre». */
.dudas-lista--sobres .dudas-pregunta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: var(--bolsillo);
  transform: none !important;
  translate: none !important;
  transition: none;
  border-radius: 0 0 4px 4px;
  background:
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--sobre-filo) 50%, transparent calc(50% + .5px)) left top / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - .5px), var(--sobre-filo) 50%, transparent calc(50% + .5px)) right top / 50% 100% no-repeat,
    var(--papel-fibra),
    var(--sobre-frente);
  box-shadow: 0 -1px 0 var(--sobre-filo), 0 -6px 10px -8px rgba(80, 62, 36, .35);
}
.dudas-sobre-texto {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: var(--bolsillo);
  display: flex;
  align-items: flex-end;
  padding-bottom: 13px;
  font-family: var(--titulo);
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--texto);
  text-wrap: balance;
}

/* La solapa: un triángulo que baja hasta el centro del bolsillo, con su sombra (otro triángulo, 2 px abajo).
   Abierta, se voltea hacia arriba sobre su orilla (scaleY 1 → −0.32: pasa por 0 como un giro y queda corta, de canto). */
.dudas-sobre-solapa {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--sobre-h) - var(--bolsillo));
  transform-origin: 50% 0;
  transform: scaleY(1);
  transition: transform 300ms var(--ease-giro) 120ms;
  pointer-events: none;
}
.dudas-sobre-solapa::before,
.dudas-sobre-solapa::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.dudas-sobre-solapa::before {
  translate: 0 2px;
  background: rgba(90, 70, 40, .2);
}
.dudas-sobre-solapa::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .35), transparent 70%), var(--papel-fibra), var(--sobre-solapa);
}

/* El lacre en la punta de la solapa: el sello de la casa en dos mitades que se separan al romperse. */
.dudas-sobre-lacre {
  position: absolute;
  left: 50%;
  top: calc(var(--sobre-h) - var(--bolsillo) - 21px);
  width: 40px;
  height: 40px;
  margin-left: -20px;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(90, 20, 20, .28));
}
.dudas-sobre-lacre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 260ms var(--ease-sobre) 260ms, opacity 200ms ease-out 260ms;
}
/* r10b: la grieta es casi recta y las mitades apenas se separan (3 px) antes de apagarse en 170 ms: con el giro de
   r10 (±20°) y 9 px de aire, las dos mitades rojas se leían como unas comillas. */
.dudas-sobre-lacre img:first-child { clip-path: polygon(0 0, 52% 0, 44% 38%, 56% 62%, 48% 100%, 0 100%); }
.dudas-sobre-lacre img:last-child { clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%, 56% 62%, 44% 38%); }

/* La carta: papel blanco que sale del bolsillo con la respuesta. Solo existe con el <details> abierto. */
.dudas-lista--sobres .dudas-respuesta {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  top: 12px;
  height: calc(var(--sobre-h) - 22px);
  padding: 14px 16px 0;
  border-radius: 2px;
  background: var(--papel-fibra), var(--sobre-carta);
  box-shadow: 0 1px 0 var(--sobre-filo), 0 6px 14px -10px rgba(80, 62, 36, .5);
  font-size: 15px;
  line-height: 1.42;
  font-weight: 500;
  color: var(--tinta-2);
  animation: none;
  transform: translateY(calc(var(--sobre-h) - var(--bolsillo) - 12px));
  opacity: 0;
  transition: transform 240ms var(--ease-sobre), opacity 160ms ease-out 80ms, color 80ms linear;
}
/* v10 ronda 2 (revisor: la respuesta se leía con la solapa todavía encima y el lacre partido sobre el texto): el papel
   sube con la solapa, pero la tinta sale cuando la solapa ya pasó de canto (~340 ms; 380 con margen) y el lacre ya se apagó (220 ms). */
.dudas-lista--sobres .dudas-item:not(.sobre--abierto) .dudas-respuesta { color: transparent; }

/* Abierto (app.js pone .sobre--abierto un cuadro después de abrir el <details>, para que todo transicione). */
.sobre--abierto .dudas-sobre-lacre img {
  transition: transform 220ms var(--ease-sobre), opacity 170ms ease-in 50ms;
  opacity: 0;
}
.sobre--abierto .dudas-sobre-lacre img:first-child { transform: translate(-3px, 4px) rotate(-3deg) scale(.96); }
.sobre--abierto .dudas-sobre-lacre img:last-child { transform: translate(3px, 5px) rotate(3deg) scale(.96); }
.sobre--abierto .dudas-sobre-solapa {
  transform: scaleY(-.32);
  transition: transform 420ms var(--ease-giro) 90ms;
}
.sobre--abierto .dudas-sobre-solapa::after {
  background: linear-gradient(to top, rgba(110, 90, 60, .14), transparent 80%), var(--papel-fibra), var(--sobre-dorso);
}
.sobre--abierto .dudas-respuesta {
  transform: translateY(0) rotate(-.6deg);
  opacity: 1;
  /* r10b: la carta sube junto con la solapa (antes esperaba 300 ms y el sobre se veía vacío ~0.17 s). Mientras la
     solapa no se quita, la tapa; el bolsillo la tapa por abajo. No necesita fundido. */
  transition: transform 560ms var(--ease-sobre) 120ms, opacity 0ms linear 0ms, color 160ms ease-out 380ms;
}

/* Foco: un anillo lacre alrededor del sobre entero. Con ratón, el sobre se asoma 3 px. */
.dudas-lista--sobres .dudas-pregunta:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .dudas-lista--sobres .dudas-item { transition: translate 200ms var(--ease-sobre); }
  .dudas-lista--sobres .dudas-item:hover { translate: 0 -3px; }
}

@media (min-width: 768px) {
  .dudas-lista--sobres {
    --sobre-h: 150px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dudas-sobre-solapa,
  .dudas-sobre-lacre img,
  .dudas-lista--sobres .dudas-respuesta,
  .dudas-lista--sobres .dudas-item,
  .sobre-carta .carta { transition: none !important; animation: none !important; }
}

/* --- r10b · REGISTRO EMPIEZA EN DUDAS: la carta de delegación ---
   El último sobre de Dudas, tamaño carta (la solapa en el lado corto), con su lacre. Capas, de atrás hacia delante: el
   dorso, la carta (form), el frente del sobre (el <button> que lo abre, con la boca en V), la solapa y el lacre. Al
   abrir, la carta sale por la boca, sube 34 px y se acuesta encima del sobre; el sobre se asoma 24 px abajo. El alto de
   la caja lo pone app.js (alto de la carta + 24 px): abrir no mueve nada (CLS 0). Mismo papel, misma Italiana y mismo
   lacre que los sobres de las dudas. */
.sobre-carta {
  --solapa-h: 120px;
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 620px;
  justify-self: center;
  height: var(--carta-h, 620px);
  margin-top: 10px;
}
.sobre-carta-dorso,
.sobre-carta-frente {
  position: absolute;
  inset: 0;
  border-radius: 5px;
}
.sobre-carta-dorso {
  z-index: 0;
  background: var(--papel-fibra), var(--sobre-dorso);
  box-shadow: 0 1px 0 var(--sobre-filo), 0 24px 36px -26px rgba(80, 62, 36, .6);
}
/* El frente con la boca en V: la solapa la tapa cerrada; abierta, por ahí sale la carta. */
.sobre-carta-frente {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: calc(var(--solapa-h) + 10px) 24px 24px;
  border: 0;
  margin: 0;
  color: var(--texto);
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  clip-path: polygon(0 0, 50% var(--solapa-h), 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--sobre-filo) 50%, transparent calc(50% + .5px)) left bottom / 50% 46% no-repeat,
    linear-gradient(to top left, transparent calc(50% - .5px), var(--sobre-filo) 50%, transparent calc(50% + .5px)) right bottom / 50% 46% no-repeat,
    var(--papel-fibra),
    var(--sobre-frente);
}
.sobre-carta-para,
.sobre-carta-pista {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.sobre-carta-pista { letter-spacing: .08em; text-transform: none; font-size: 14px; font-weight: 600; }
.sobre-carta-nombre {
  font-family: var(--titulo);
  font-size: 34px;
  line-height: 1.1;
  text-wrap: balance;
}
/* Foco del frente: el anillo va en la caja (el clip-path de la boca recortaría el del botón). */
.sobre-carta:has(.sobre-carta-frente:focus-visible) { outline: 2px solid var(--rojo); outline-offset: 4px; border-radius: 5px; }
.sobre-carta-frente:focus { outline: none; }

.sobre-carta .dudas-sobre-solapa { z-index: 3; height: var(--solapa-h); }
.sobre-carta .dudas-sobre-lacre {
  z-index: 3;
  top: calc(var(--solapa-h) - 28px);
  width: 56px;
  height: 56px;
  margin-left: -28px;
}

/* La carta: el mismo papel blanco de las respuestas. Cerrada es invisible (e `inert`); abierta sale por la boca. */
.carta {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 8px;
  right: 8px;
  padding: 22px 22px 18px;
  border-radius: 3px;
  background: var(--papel-fibra), var(--sobre-carta);
  box-shadow: 0 1px 0 var(--sobre-filo), 0 10px 22px -14px rgba(80, 62, 36, .55);
  color: var(--texto);
  text-align: left;
  visibility: hidden;
  transform: translateY(80px);
}
.sobre--abierto .carta {
  visibility: visible;
  z-index: 4;
  transform: none;
  animation: carta-sale 980ms both;
}
.sobre--cerrando .carta {
  visibility: visible;
  animation: carta-entra 520ms both;
}
/* v10 D5 (la carta asomaba texto sobre la solapa ~0.2 s): mientras sale o entra, la carta se recorta en la orilla de
   arriba del sobre. El recorte de arriba sigue a −translateY (misma curva en cada tramo, así que coincide en todos
   los cuadros): lo que sube más allá de la boca no se ve, ni detrás ni encima de la solapa abierta. Los lados y abajo
   dejan aire para la sombra. Arriba recorta 8 px de más: el giro de −0.8° levanta una esquina ~4 px a 1440 (y el borde suavizado, 1 px más). */
/* v10 ronda 2 (revisor: el membrete se veía cortado en diagonal dentro de la boca del sobre, ~0.3 s): mientras la carta va
   por detrás del frente (z 1) solo se ve su papel; la tinta (--tinta, la opacidad de todo lo de adentro) sale cuando ya
   está encima, y al guardarla se apaga antes de pasar por detrás. */
@property --tinta { syntax: "<number>"; inherits: true; initial-value: 1; }
.carta > * { opacity: var(--tinta); }
@keyframes carta-sale {
  0% { transform: translateY(80px); clip-path: inset(-80px -30px -40px -30px); z-index: 1; --tinta: 0; animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  52% { transform: translateY(-34px) rotate(-.8deg); clip-path: inset(42px -30px -40px -30px); z-index: 1; --tinta: 0; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  53% { z-index: 4; }
  54% { --tinta: 0; }
  68% { --tinta: 1; }   /* v10c E5 (REVISION r2, N3): 80 → 68 %, menos cuadros de papel en blanco antes de la tinta */
  100% { transform: none; clip-path: inset(0 -30px -40px -30px); z-index: 4; --tinta: 1; }
}
@keyframes carta-entra {
  0% { transform: none; clip-path: inset(0 -30px -40px -30px); z-index: 4; --tinta: 1; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  30% { --tinta: 0; }
  45% { transform: translateY(-34px); clip-path: inset(42px -30px -40px -30px); z-index: 4; }
  46% { z-index: 1; animation-timing-function: cubic-bezier(.32, 0, .67, 0); }
  100% { transform: translateY(80px); clip-path: inset(-80px -30px -40px -30px); z-index: 1; --tinta: 0; }
}
/* El frente se queda abajo de la carta; la solapa abierta asoma arriba. */
.sobre--abierto .sobre-carta-frente { cursor: default; }

.carta-membrete {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sobre-filo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.carta-membrete img { width: 26px; height: 26px; }
.carta-titulo {
  margin: 0 0 10px;
  font-family: var(--titulo);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
}
.carta-texto {
  margin: 0 0 16px;
  font-family: var(--titulo);
  font-size: 21px;
  line-height: 1.38;
  color: var(--texto);
  text-wrap: pretty;
}
/* Los huecos de la frase: en gris mientras están vacíos; con lo escrito, en tinta y subrayados de lacre. */
.carta-hueco {
  padding: 0 2px;
  color: #55575d;
  font-style: italic;
  box-shadow: inset 0 -1px 0 #a9a193;
}
.carta-hueco--lleno {
  color: var(--texto);
  font-style: normal;
  box-shadow: inset 0 -1px 0 var(--rojo);
  animation: gafete-tinta 260ms var(--ease-sobre) both;
}
@keyframes gafete-tinta {
  from { opacity: .35; }
  to { opacity: 1; }
}
/* La firma y el lugar del lacre (un aro punteado mientras espera). */
.carta-firma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 14px;
}
.carta-firma-nombre {
  flex: 1;
  padding-top: 6px;
  border-top: 1px solid var(--sobre-filo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.carta-lacre {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(200, 16, 46, .45);
  background: radial-gradient(circle, transparent 60%, rgba(200, 16, 46, .06));
}
.carta-lacre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.5) rotate(-26deg);
  filter: drop-shadow(0 3px 3px rgba(90, 20, 20, .3));
  transition: opacity 120ms ease-out, transform 200ms var(--ease-sobre);
}
.carta-lacre .estampa-onda {
  position: absolute;
  inset: -6px;
  border: 2px solid var(--rojo);
  border-radius: 50%;
  opacity: 0;
}
.carta--sellada .carta-lacre img {
  opacity: 1;
  transform: rotate(-8deg);
  transition: opacity 90ms ease-out, transform 380ms cubic-bezier(.3, 1.4, .5, 1);
}
.carta--sellada .carta-lacre .estampa-onda { animation: carta-onda 620ms var(--ease-sobre) 140ms; }
@keyframes carta-onda {
  from { opacity: .55; transform: scale(.7); }
  to { opacity: 0; transform: scale(1.7); }
}
.carta-accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.carta-accion .registro-gratis { text-shadow: none; }
/* v10d F6: la carta es de muestra. El rótulo «Ejemplo» va como sello de goma junto al título; el aviso de cómo funciona
   va entre la firma y el botón. El botón es de lacre (v11 D1.1, r11/d1.css). */
.carta-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.carta-ejemplo {
  padding: 3px 8px 2px;
  border: 2px solid var(--rojo);
  border-radius: 3px;
  color: #a40d26;
  font-family: var(--cuerpo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
  transform: rotate(-4deg);
}
.carta-como {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta-2);
  text-wrap: pretty;
}
.carta:focus { outline: none; }
.carta:focus-visible { outline: 2px solid var(--rojo); outline-offset: 4px; }

@media (min-width: 768px) {
  .sobre-carta { --solapa-h: 130px; margin-top: 16px; }
  .carta { padding: 28px 34px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .carta--sellada .carta-lacre .estampa-onda,
  .carta-hueco--lleno { animation: none; }
  .carta-lacre img,
  .carta--sellada .carta-lacre img { transition: opacity 120ms ease-out; }
  .carta--sellada .carta-lacre img { transform: rotate(-8deg); }
}

/* v10 D4: con scrollIntoView (táctil, sin Lenis) la carta quedaba en top 0, con el membrete bajo la barra. */
.sobre-carta { scroll-margin-top: 88px; }

/* v10 · contraste (tools/contraste.py): sin la sección de r9 el pie queda bajo la luz final y la sombra del globo
   (fondo medido #b6b2b0); el gris #45484e daba 4.41:1 en «COAMUN IV». Más oscuro: ≥ 6:1 sobre ese fondo. */
.pie-cont { color: #2f3136; }