:root {
  --rojo: #c8102e; --azul: #0b4ea2; --verde: #2e7d4f;
  --fondo: #fff8ec; --tinta: #1d2433; --suave: #5a6377;
  --tarjeta: #ffffff; --reverso: #eef4fb; --borde: #c9cfdb; --error: #b00020;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { font-size: 20px; }
body { margin: 0; font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; background: var(--fondo); color: var(--tinta); line-height: 1.45; }
.franja { height: 14px; background: linear-gradient(90deg, var(--rojo) 0 33%, #fff 33% 66%, var(--azul) 66% 100%); }
.cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; max-width: 1100px; margin: 0 auto; padding: 0.8rem 1.2rem 0; }
.marca { font-weight: bold; font-size: 1.15rem; color: var(--azul); text-decoration: none; }
.cabecera nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.cabecera nav > a { color: var(--azul); font-weight: bold; text-decoration: none; }
.cabecera nav > a:hover { text-decoration: underline; }
#cuenta { display: flex; align-items: center; gap: 0.6rem; min-height: 2.2rem; }
.saludo { color: var(--suave); }
.pastilla-esqueleto { display: inline-block; width: 6rem; height: 2rem; border-radius: 999px; background: #e7e2d8; animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.5; } }
main { max-width: 1100px; margin: 0 auto; padding: 1rem 1.2rem 3rem; }
h1, h2 { line-height: 1.15; margin: 0 0 0.6rem; }
.titulo { text-align: center; margin: 1rem 0 0.3rem; font-size: 2.6rem; color: var(--azul); }
.subtitulo { text-align: center; font-size: 1.6rem; color: var(--rojo); margin: 0 0 1.6rem; }
.pasos { list-style: none; padding: 0; margin: 0 auto 1.6rem; display: grid; gap: 0.9rem; max-width: 820px; }
.pasos li { display: flex; align-items: center; gap: 1rem; background: var(--tarjeta); border-radius: 18px; padding: 1rem 1.2rem; font-size: 1.3rem; box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.num { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: bold; font-size: 1.4rem; }
.mensaje { max-width: 820px; margin: 0 auto 2.2rem; background: var(--verde); color: #fff; border-radius: 18px; padding: 1.1rem 1.4rem; font-size: 1.35rem; text-align: center; font-weight: bold; }
.escoja { text-align: center; font-size: 1.6rem; color: var(--azul); margin-bottom: 1rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; transition: opacity 0.2s; }
.rejilla[aria-busy="true"] { opacity: 0.6; }
.boton-tarjeta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; min-height: 170px; padding: 1rem; background: var(--tarjeta); border: 4px solid var(--azul); border-radius: 22px; text-decoration: none; color: var(--tinta); font-size: 1.25rem; font-weight: bold; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow-wrap: anywhere; }
.boton-tarjeta:hover, .boton-tarjeta:focus { border-color: var(--rojo); }
.boton-tarjeta .emoji { font-size: 3.4rem; line-height: 1; }
.boton-tarjeta .foto-img { width: 100%; max-height: 120px; object-fit: cover; border-radius: 12px; }
.esqueleto { min-height: 170px; border-radius: 22px; background: #ece6da; animation: latido 1.2s ease-in-out infinite; }
.aviso { text-align: center; font-size: 1.3rem; color: var(--suave); padding: 2rem 1rem; }
.aviso.error { color: var(--error); }
.tarjeta { display: grid; grid-template-columns: 1fr 1fr; background: var(--tarjeta); border-radius: 26px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.12); margin-top: 1rem; }
.frente, .reverso { padding: 2rem 1.8rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 440px; overflow-wrap: anywhere; }
.frente { border-right: 4px dashed var(--borde); }
.reverso { background: var(--reverso); }
.foto { margin-bottom: 1rem; max-width: 100%; }
.foto .emoji { font-size: 7rem; line-height: 1; }
.foto .foto-img { max-width: 100%; max-height: 260px; border-radius: 16px; object-fit: cover; }
.frente h1 { font-size: 2.4rem; color: var(--azul); }
.pregunta { font-size: 1.5rem; margin: 0.4rem 0 0; }
.reverso h2 { font-size: 2rem; color: var(--rojo); }
.dato { font-size: 1.55rem; margin: 0; }
.navegacion { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; }
.btn, .btn-peq { display: inline-block; border: 0; cursor: pointer; font-family: inherit; font-weight: bold; text-decoration: none; color: #fff; background: var(--azul); }
.btn { padding: 1rem 1.6rem; border-radius: 16px; font-size: 1.35rem; }
.btn-peq { padding: 0.45rem 1rem; border-radius: 999px; font-size: 1rem; }
.btn-peq.claro { background: transparent; color: var(--azul); border: 2px solid var(--azul); }
.btn.verde { background: var(--verde); }
.btn.rojo { background: var(--rojo); }
.btn:hover, .btn:focus, .btn-peq:hover { filter: brightness(1.12); }
.btn[disabled] { opacity: 0.6; cursor: default; }
.panel { max-width: 640px; margin: 1rem auto; background: var(--tarjeta); border-radius: 22px; padding: 1.6rem; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.panel h1 { color: var(--azul); font-size: 2rem; }
.campo { margin-bottom: 1rem; }
.campo label, .campo legend { display: block; font-weight: bold; margin-bottom: 0.3rem; }
.campo input[type=text], .campo input[type=email], .campo input[type=password], .campo input[type=url], .campo input[type=tel], .campo input[type=number], .campo input[type=date], .campo input[type=time], .campo input[type=datetime-local], .campo textarea, .campo select { width: 100%; font: inherit; font-size: 1.1rem; padding: 0.7rem 0.8rem; border: 2px solid var(--borde); border-radius: 12px; background: #fff; color: var(--tinta); }
.campo textarea { min-height: 7rem; resize: vertical; }
.campo fieldset { border: 0; padding: 0; margin: 0; }
.opcion { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; font-size: 1.15rem; }
.opcion input { width: 1.4rem; height: 1.4rem; }
.ayuda { color: var(--suave); font-size: 0.95rem; margin: 0.3rem 0 0; }
.err { color: var(--error); font-size: 1rem; margin: 0.3rem 0 0; min-height: 0; }
.err-form { color: var(--error); font-weight: bold; margin-bottom: 1rem; }
.cambiar { background: none; border: 0; color: var(--azul); font: inherit; font-weight: bold; text-decoration: underline; cursor: pointer; padding: 0; }
.gracias { font-size: 1.4rem; text-align: center; }
.lista-mia { display: grid; gap: 1.6rem; margin-top: 1.4rem; }
.lista-mia .acciones { display: flex; justify-content: flex-end; margin-top: 0.6rem; }
@media (max-width: 760px) {
  html { font-size: 18px; }
  .tarjeta { grid-template-columns: 1fr; }
  .frente { border-right: none; border-bottom: 4px dashed var(--borde); }
  .frente, .reverso { min-height: 0; }
  .navegacion .btn { flex: 1; text-align: center; }
}

/* Fondo: cielo, montes y mar de la isla */
:root { --cielo: #d4eeec; --brisa: #eaf5ef; --arena: #f5ecd6; }
html { background: var(--arena); }
body {
  min-height: 100vh;
  padding-bottom: 230px;
  background-color: var(--brisa);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='xMidYMax slice'><path fill='%2386b89a' d='M0 150 C120 90 220 110 320 80 C430 50 520 120 640 95 C760 70 860 40 980 85 C1090 125 1200 70 1300 90 C1370 105 1410 100 1440 95 V240 H0Z'/><path fill='%233f7d55' d='M0 175 C150 140 260 165 380 140 C520 112 600 170 760 150 C900 132 1010 110 1150 145 C1270 172 1360 150 1440 140 V240 H0Z'/><path fill='none' stroke='%23284f37' stroke-width='9' stroke-linecap='round' d='M1252 204 C1248 160 1238 125 1226 98'/><g fill='none' stroke='%23284f37' stroke-width='7' stroke-linecap='round'><path d='M1226 98 Q1190 70 1150 92'/><path d='M1226 98 Q1200 55 1165 50'/><path d='M1226 98 Q1240 55 1280 52'/><path d='M1226 98 Q1265 78 1300 100'/><path d='M1226 98 Q1255 100 1272 130'/><path d='M1226 98 Q1195 100 1178 128'/></g><path fill='%233a9aa6' d='M0 200 C80 190 160 210 240 200 C320 190 400 210 480 200 C560 190 640 210 720 200 C800 190 880 210 960 200 C1040 190 1120 210 1200 200 C1280 190 1360 210 1440 200 V240 H0Z'/><path fill='%2378c4cb' d='M0 218 C90 210 180 226 270 218 C360 210 450 226 540 218 C630 210 720 226 810 218 C900 210 990 226 1080 218 C1170 210 1260 226 1350 218 C1390 214 1420 216 1440 218 V240 H0Z'/></svg>"), linear-gradient(180deg, var(--cielo) 0%, var(--brisa) 40%, var(--arena) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, 0 0;
  background-size: 100% 240px, 100% 100%;
}
.pasos li, .boton-tarjeta, .tarjeta, .panel { box-shadow: 0 6px 18px rgba(31, 74, 80, 0.14); }
@media (max-width: 760px) { body { padding-bottom: 150px; background-size: 100% 160px, 100% 100%; } }
@media print { body { background: #fff; padding-bottom: 0; } }

/* Número de cada tarjeta en la rejilla */
.boton-tarjeta { position: relative; }
.boton-tarjeta .numero { position: absolute; top: 0.6rem; left: 0.6rem; min-width: 2.2rem; height: 2.2rem; padding: 0 0.45rem; border-radius: 999px; background: var(--azul); color: #fff; font-size: 1.15rem; font-weight: bold; line-height: 2.2rem; text-align: center; }
.boton-tarjeta:hover .numero, .boton-tarjeta:focus .numero { background: var(--rojo); }

/* Enlace del paso 1 a la sección de tarjetas */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#tarjetas { scroll-margin-top: 1rem; }
.ir-tarjetas { color: var(--azul); font-weight: bold; text-decoration: underline; text-underline-offset: 0.2em; }
.ir-tarjetas:hover, .ir-tarjetas:focus { color: var(--rojo); }

/* Mensaje en dos líneas centradas */
.mensaje .linea { display: block; text-align: center; }
.mensaje .linea + .linea { margin-top: 0.3rem; }

/* Bandera de Puerto Rico en la esquina izquierda del pie */ (toca el coquí)
body { position: relative; }
.bandera { position: absolute; left: 1.4rem; bottom: 1.2rem; width: 96px; height: 64px; padding: 0; border: 0; cursor: pointer; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 1000'><rect width='1500' height='1000' fill='%23fff'/><rect y='0' width='1500' height='200' fill='%23ed0000'/><rect y='400' width='1500' height='200' fill='%23ed0000'/><rect y='800' width='1500' height='200' fill='%23ed0000'/><polygon points='0,0 866,500 0,1000' fill='%230050f0'/><polygon fill='%23fff' points='289,340 324.9,450.6 441.2,450.6 347.1,518.9 383,629.4 289,561.1 195,629.4 230.9,518.9 136.8,450.6 253.1,450.6'/></svg>") center / 100% 100% no-repeat; border-radius: 4px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); outline: 2px solid rgba(255, 255, 255, 0.85); transition: transform 0.15s; }
.bandera:hover { transform: scale(1.06); }
.bandera:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.bandera-son { position: absolute; right: -10px; top: -10px; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 15px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.bandera.sonando { animation: ondea 0.9s ease-in-out infinite; }
@keyframes ondea { 50% { transform: rotate(-3deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .bandera.sonando { animation: none; } }
.bandera.error { opacity: 0.6; }
@media (max-width: 760px) { .bandera { left: 0.9rem; bottom: 0.8rem; width: 66px; height: 44px; } .bandera-son { width: 24px; height: 24px; font-size: 13px; right: -8px; top: -8px; } }
@media print { .bandera { display: none; } }

/* La bandera se queda fija en la esquina inferior izquierda de la pantalla */
.bandera { position: fixed; z-index: 50; left: calc(1.2rem + env(safe-area-inset-left, 0px)); bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 760px) { .bandera { left: calc(0.8rem + env(safe-area-inset-left, 0px)); bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px)); } }

/* Compartir el sitio */
.compartir { max-width: 820px; margin: 2.4rem auto 0; background: var(--tarjeta); border-radius: 22px; padding: 1.4rem 1.4rem 1.2rem; text-align: center; box-shadow: 0 6px 18px rgba(31, 74, 80, 0.14); }
.compartir h2 { color: var(--azul); font-size: 1.6rem; margin: 0 0 0.3rem; }
.compartir > p { margin: 0 0 1rem; color: var(--suave); font-size: 1.15rem; }
.compartir-redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.9rem; }
.compartir .red { display: inline-block; padding: 0.6rem 1.15rem; border-radius: 999px; border: 2px solid var(--azul); color: var(--azul); background: #fff; font: inherit; font-weight: bold; font-size: 1.05rem; text-decoration: none; cursor: pointer; }
.compartir .red:hover, .compartir .red:focus-visible { background: var(--azul); color: #fff; }
.compartir .copiado { min-height: 1.4em; margin: 0.7rem 0 0; color: var(--verde); font-weight: bold; font-size: 1.05rem; overflow-wrap: anywhere; }
@media print { .compartir { display: none; } }