/* Quinta Copa · estética nueva (espresso, crema y luz difusa).
   Se carga después de styles.css y define las secciones nuevas. */

:root {
  --espresso: #1C1511; --cafe: #3B2D23; --topo: #8A7562; --arena: #D8CAB6; --crema: #EFE9DF; --luz: #F5E3C6;
  --texto-suave: #6E5F53;
  --linea: rgba(28, 21, 17, 0.1);
  --linea-osc: rgba(239, 233, 223, 0.14);
}

/* ---------- Comunes ---------- */
.sec { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 12vw, 136px) 24px; }
.sec-clara { background: var(--crema); color: var(--espresso); }
.sec-oscura { background: linear-gradient(180deg, #241B16 0%, var(--espresso) 100%); color: var(--crema); }
.sec-cabecera { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.sec-titulo { margin: 0; font-weight: 500; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.035em; }
.sec-sub { margin: 16px 0 0; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; color: var(--texto-suave); }
.sec-oscura .sec-sub { color: rgba(239, 233, 223, 0.7); }

/* Luces: manchas difusas detrás del contenido, como en las referencias */
.luces { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.luces i { position: absolute; border-radius: 50%; filter: blur(70px); }
.sec-clara { background: linear-gradient(180deg, #F3EEE6 0%, var(--crema) 45%, #E9E1D5 100%); }
.l1 { width: 70vw; height: 44vw; left: -18vw; top: -16vw; background: radial-gradient(closest-side, #FFFFFF, rgba(255, 255, 255, 0)); }
.l2 { width: 80vw; height: 46vw; right: -24vw; bottom: -14vw; background: radial-gradient(closest-side, rgba(205, 185, 158, 0.9), rgba(216, 202, 182, 0)); }
.l3 { width: 90vw; height: 34vw; left: 5vw; bottom: -18vw; background: radial-gradient(closest-side, rgba(245, 227, 198, 0.34), rgba(184, 152, 122, 0.14) 55%, rgba(184, 152, 122, 0)); }
.l4 { width: 74vw; height: 44vw; right: -20vw; top: -18vw; background: radial-gradient(closest-side, #FFFFFF, rgba(255, 255, 255, 0)); }
.l5 { width: 70vw; height: 42vw; left: -22vw; bottom: -14vw; background: radial-gradient(closest-side, rgba(205, 185, 158, 0.85), rgba(216, 202, 182, 0)); }
.luces::after { content: ""; position: absolute; left: 30%; top: 38%; width: 46vw; height: 10vw; border-radius: 50%; filter: blur(50px);
  background: radial-gradient(closest-side, rgba(245, 227, 198, 0.7), rgba(245, 227, 198, 0)); transform: rotate(-8deg); }
.sec-oscura .luces::after, .pie .luces::after { background: radial-gradient(closest-side, rgba(245, 227, 198, 0.08), rgba(245, 227, 198, 0)); }
.l6 { width: 100vw; height: 30vw; left: 0; top: -14vw; background: radial-gradient(closest-side, rgba(245, 227, 198, 0.22), rgba(245, 227, 198, 0)); }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 12px;
  font-weight: 500; font-size: 16px; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s; }
.boton svg { width: 18px; height: 18px; }
.boton-claro { background: var(--crema); color: var(--espresso); }
.boton-claro:hover { background: #fff; }
.boton-borde { border-color: rgba(239, 233, 223, 0.3); color: var(--crema); }
.boton-borde:hover { border-color: var(--crema); }
.boton-ancho { width: 100%; }
.boton[disabled] { opacity: 0.6; cursor: progress; }
:is(.boton, .tarjeta, .enlace-wa, .pie a):focus-visible { outline: 2px solid var(--topo); outline-offset: 3px; }
.sec-oscura :focus-visible, .pie :focus-visible { outline-color: var(--luz); }


/* ---------- Tarjetas oscuras con luz ---------- */
.rejilla { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; gap: 14px; }
.rejilla + .rejilla { margin-top: 14px; }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
.rejilla-2 { grid-template-columns: repeat(2, 1fr); }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }
.tarjeta { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 188px; padding: 26px 26px 24px; border-radius: 22px; text-decoration: none; color: var(--crema);
  background: linear-gradient(160deg, #2E231C 0%, #1C1511 55%, #17110E 100%);
  border: 0;
  box-shadow: 0 30px 60px -40px rgba(28, 21, 17, 0.45);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s; }
.tarjeta::before { content: ""; position: absolute; z-index: -1; inset: -30%; filter: blur(48px); opacity: 0.85; transition: opacity 0.4s, transform 0.6s;
  background: radial-gradient(42% 38% at var(--lx, 22%) var(--ly, 82%), rgba(245, 227, 198, 0.55), transparent 75%),
              radial-gradient(60% 50% at var(--lx2, 78%) var(--ly2, 90%), rgba(184, 152, 122, 0.45), transparent 78%); }
.t-b::before { --lx: 72%; --ly: 86%; --lx2: 22%; }
.t-c::before { --lx: 50%; --ly: 94%; --lx2: 92%; --ly2: 72%; }
.t-d::before { --lx: 14%; --ly: 82%; --lx2: 62%; }
.t-e::before { --lx: 86%; --ly: 86%; --lx2: 36%; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 36px 70px -40px rgba(28, 21, 17, 0.6); }
.tarjeta:hover::before { opacity: 1; transform: translateY(-4%); }
.tarjeta h3 { margin: 0; font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.025em; line-height: 1.05; }
.tarjeta p { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: rgba(239, 233, 223, 0.62); }
.tarjeta-flecha { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: rgba(239, 233, 223, 0.1); border: 1px solid rgba(239, 233, 223, 0.12); transition: background 0.3s, transform 0.3s; }
.tarjeta-flecha svg { width: 16px; height: 16px; fill: none; stroke: var(--crema); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-45deg); }
.tarjeta:hover .tarjeta-flecha { background: var(--crema); }
.tarjeta:hover .tarjeta-flecha svg { stroke: var(--espresso); }
.tarjeta-extra { min-height: 150px; }
.tarjeta-etiqueta { position: absolute; top: 22px; left: 26px; font-size: 12px; color: rgba(239, 233, 223, 0.5); }
.tarjeta-extra.marcada { border-color: rgba(245, 227, 198, 0.5); }

/* ---------- Presupuesto ---------- */
.presupuesto { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.formulario, .hecho { width: 100%; padding: 28px; border-radius: 22px; background: rgba(239, 233, 223, 0.05); border: 1px solid var(--linea-osc);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.paso { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pasos-form { display: flex; gap: 6px; justify-content: center; margin-bottom: 20px; }
.pasos-form span { width: 22px; height: 3px; border-radius: 3px; background: rgba(239, 233, 223, 0.18); transition: background 0.3s, width 0.3s; }
.pasos-form span.activo { width: 36px; background: var(--crema); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campos-1 { grid-template-columns: 1fr; }
.campo { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: rgba(239, 233, 223, 0.72); min-width: 0; }
.campo[hidden] { display: none; }
.campo :is(input, select) { height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(239, 233, 223, 0.16); background: rgba(239, 233, 223, 0.06);
  color: var(--crema); font: 400 16px/1 "Instrument Sans", system-ui, sans-serif; color-scheme: dark; appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; }
.campo input[type="number"] { -moz-appearance: textfield; }
.campo input::-webkit-outer-spin-button, .campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EFE9DF' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 40px; }
.campo select option { color: var(--espresso); }
.campo :is(input, select):focus { outline: none; border-color: var(--luz); background-color: rgba(239, 233, 223, 0.1); }
.campo [aria-invalid="true"] { border-color: #E2A08A; }
.campo select.resalta { animation: resalta 1.6s ease-out; }
@keyframes resalta { 0%, 40% { border-color: var(--luz); box-shadow: 0 0 0 4px rgba(245, 227, 198, 0.18); } 100% { box-shadow: none; } }
.extras { display: flex; gap: 8px; flex-wrap: wrap; }
.extra { position: relative; display: inline-flex; cursor: pointer; }
.extra input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.extra span { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(239, 233, 223, 0.16); font-size: 14px; color: rgba(239, 233, 223, 0.8); transition: background 0.2s, border-color 0.2s; }
.extra span::before { content: "+"; opacity: 0.7; }
.extra input:checked + span { background: var(--crema); color: var(--espresso); border-color: var(--crema); }
.extra input:checked + span::before { content: "✓"; }
.extra input:focus-visible + span { outline: 2px solid var(--luz); outline-offset: 2px; }
.casilla { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(239, 233, 223, 0.72); cursor: pointer; }
.casilla input { width: 18px; height: 18px; accent-color: var(--crema); }
.resumen { margin: 0 0 4px; text-align: center; font-size: 15px; color: rgba(239, 233, 223, 0.8); }
.volver { align-self: center; background: none; border: 0; color: rgba(239, 233, 223, 0.6); font: inherit; font-size: 14px; cursor: pointer; padding: 4px 8px; }
.volver:hover { color: var(--crema); }
.aviso { margin: 0; font-size: 14px; color: #F0B8A4; }
.aviso a { color: var(--crema); }
.letra-pequena { margin: 0; text-align: center; font-size: 12px; line-height: 1.5; color: rgba(239, 233, 223, 0.45); }
.letra-pequena a { color: inherit; }
.enlace-wa { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 15px; color: rgba(239, 233, 223, 0.8); text-decoration: none; border-bottom: 1px solid rgba(239, 233, 223, 0.25); padding-bottom: 4px; }
.enlace-wa:hover { color: var(--crema); border-bottom-color: var(--crema); }
.enlace-wa svg { width: 18px; height: 18px; }
.hecho { text-align: center; padding: 40px 28px; }
.hecho h3 { margin: 16px 0 8px; font-weight: 500; font-size: 28px; letter-spacing: -0.02em; }
.hecho p { margin: 0; color: rgba(239, 233, 223, 0.72); }
.hecho a { color: var(--crema); }
.hecho-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--crema); }
.hecho-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--espresso); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Cómo trabajamos ---------- */
.pasos .tarjeta { min-height: 200px; justify-content: space-between; }
.paso-num { font-size: 13px; color: rgba(239, 233, 223, 0.5); }
.pasos .tarjeta h3 { font-size: 21px; letter-spacing: -0.015em; }
.incluido { max-width: 1040px; margin: 14px auto 0; padding: 22px 26px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.75);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.incluido h3 { margin: 0; font-weight: 400; font-size: 14px; color: var(--topo); }
.incluido ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; flex-wrap: wrap; }
.incluido li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.incluido svg { width: 20px; height: 20px; fill: none; stroke: var(--espresso); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- Pie ---------- */
.pie { position: relative; isolation: isolate; overflow: hidden; background: var(--espresso); color: var(--crema); padding: clamp(72px, 10vw, 112px) 24px 0; }
.pie-arriba { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.pie-frase { margin: 0; font-weight: 500; font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.03em; line-height: 1.05; }
.pie-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.pie-datos { max-width: 1040px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid var(--linea-osc); display: flex; gap: 32px; flex-wrap: wrap; font-size: 15px; }
.pie-datos a, .pie-legal a { color: rgba(239, 233, 223, 0.72); text-decoration: none; }
.pie-datos a:hover, .pie-legal a:hover { color: var(--crema); }
.pie-legal { max-width: 1040px; margin: 16px auto 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(239, 233, 223, 0.45); }
.pie-legal nav { display: flex; gap: 20px; }
.pie-marca { margin: clamp(40px, 6vw, 72px) auto 0; max-width: 1240px; height: clamp(70px, 14vw, 200px); overflow: hidden; display: flex; justify-content: center; }
.pie-marca svg { width: 100%; height: auto; color: rgba(239, 233, 223, 0.09); align-self: flex-start; }

/* WhatsApp flotante, monocromo */
.wa-flotante { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: var(--crema); color: var(--espresso); box-shadow: 0 12px 30px -10px rgba(28, 21, 17, 0.5);
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
.wa-flotante.visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-flotante svg { width: 26px; height: 26px; }
.wa-float { display: none !important; }

/* Iconos de línea */
.ic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Móvil: misma composición, en una columna ---------- */
@media (max-width: 860px) {
  .sec { padding: 88px 20px; }
  .sec-cabecera { margin-bottom: 40px; }
  .rejilla-3, .rejilla-2, .rejilla-4 { grid-template-columns: 1fr; }
  .rejilla, .rejilla + .rejilla { gap: 12px; margin-top: 0; }
  .rejilla + .rejilla { margin-top: 12px; }
  .tarjeta { min-height: 150px; padding: 22px; }
  .tarjeta-extra { min-height: 128px; }
  .pasos .tarjeta { min-height: 150px; }
  .formulario, .hecho { padding: 22px; }
  .incluido { flex-direction: column; align-items: flex-start; }
  .incluido ul { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .pie-arriba { flex-direction: column; align-items: stretch; text-align: center; }
  .pie-acciones { flex-direction: column; }
  .pie-acciones .boton { width: 100%; }
  .pie-datos { flex-direction: column; gap: 12px; align-items: center; }
  .pie-legal { flex-direction: column; align-items: center; }
  .wa-flotante { right: 16px; bottom: 16px; }
}
@media (max-width: 420px) { .campos { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tarjeta, .tarjeta::before, .wa-flotante, .destellos { transition: none; animation: none; } }
.site-header .nav .nav-wa, .site-header .nav-mobile-cta { border-radius: 12px; }
.extra span.resalta { animation: resalta 1.6s ease-out; }

/* Dorado: solo en detalles pequeños */
:root { --oro: linear-gradient(135deg, #B8893A 0%, #E9C77B 38%, #FFF0C2 50%, #D9B061 62%, #A87C34 100%); --oro-1: #D9B061; }
.tarjeta-flecha { background: rgba(217, 176, 97, 0.1); border-color: rgba(217, 176, 97, 0.35); }
.tarjeta-flecha svg { stroke: var(--oro-1); }
.tarjeta:hover .tarjeta-flecha { background: var(--oro); border-color: transparent; }
.tarjeta:hover .tarjeta-flecha svg { stroke: var(--espresso); }

/* Pie más corto, contacto con iconos */
.pie { padding-top: clamp(56px, 7vw, 80px) !important; }
.pie-datos { margin-top: 36px !important; gap: 12px !important; }
.pie-datos a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linea-osc); color: rgba(239, 233, 223, 0.8); transition: border-color 0.2s, color 0.2s; }
.pie-datos a:hover { border-color: rgba(217, 176, 97, 0.6); color: var(--oro-1); }
.pie-datos svg { width: 20px; height: 20px; }
.pie-marca { margin-top: 28px !important; height: clamp(48px, 9vw, 120px) !important; }

/* Opcionales: informativas, sin aspecto de botón */
.tarjeta-extra { cursor: default; }

/* Móvil */
@media (max-width: 860px) {
  /* Carrusel: una barra en el centro y una a cada lado, siempre (da la vuelta) */
  .puntos-carr { display: flex; justify-content: center; gap: 6px; margin: 14px 0 0; }
  .puntos-carr span { width: 6px; height: 6px; border-radius: 3px; background: rgba(28, 21, 17, 0.2); transition: width 0.3s, background 0.3s; }
  .puntos-carr span.activo { width: 18px; background: var(--espresso); }

  /* Opcionales: cortas, claras y discretas, una al lado de la otra */
  .rejilla-2 { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px !important; }
  .tarjeta-extra { min-height: 0; padding: 14px 14px 16px; border-radius: 16px; color: var(--espresso); box-shadow: none;
    background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.7); }
  .tarjeta-extra::before { display: none; }
  .tarjeta-extra .tarjeta-etiqueta { position: static; display: block; margin-bottom: 6px; font-size: 11px; color: var(--topo); }
  .tarjeta-extra h3 { font-size: 16px; letter-spacing: -0.01em; }
  .tarjeta-extra p { margin-top: 4px; font-size: 12.5px; color: var(--texto-suave); }

  .pie-datos { flex-direction: row !important; justify-content: center; }
}
@media (min-width: 861px) { .puntos-carr { display: none; } }


/* ---------- Ajustes finales ---------- */
/* Espaciado entre filas de tarjetas (el carrusel inserta los puntos entre ellas) */
.rejilla { gap: 18px; }
.rejilla-2 { margin-top: 18px !important; }
/* Luz de las tarjetas algo más arriba: sin franja en el borde inferior */
.tarjeta::before { inset: -20% -20% 0 -20%; }

/* WhatsApp: solo una línea dorada */
.oro-linea { border: 1px solid transparent !important; color: var(--crema) !important;
  background: linear-gradient(rgba(28, 21, 17, 0.88), rgba(28, 21, 17, 0.88)) padding-box, var(--oro) border-box !important; }
.oro-linea svg { stroke: var(--oro-1) !important; }
.oro-linea:hover { background: linear-gradient(rgba(59, 45, 35, 0.9), rgba(59, 45, 35, 0.9)) padding-box, var(--oro) border-box !important; }
.wa-flotante.oro-linea { box-shadow: 0 12px 30px -12px rgba(28, 21, 17, 0.6); }

/* Pie: el logo grande entero, sin recorte ni hueco */
.pie { padding-bottom: 28px !important; }
.pie-marca { height: auto !important; overflow: visible !important; margin: 32px auto 0 !important; }
.pie-marca svg { display: block; }

@media (max-width: 860px) {
  .rejilla-2 { margin-top: 22px !important; gap: 10px; }
  /* Carrusel: laterales más separadas y translúcidas; arrastre que sigue al dedo */
  .pie { padding-bottom: 20px !important; }
}
.pie-marca { max-width: 620px !important; }
@media (max-width: 860px) { .pie-marca { max-width: 86% !important; margin-top: 28px !important; } }
@media (max-width: 860px) {
}

/* Solo la flecha es botón */
.tarjeta-flecha { z-index: 2; text-decoration: none; }
.tarjeta-flecha:focus-visible { outline: 2px solid var(--oro-1); outline-offset: 3px; }
.tarjeta-extra:hover { transform: none; }
@media (max-width: 860px) {
  /* Opcionales: una encima de otra, largas, oscuras y compactas */
  .rejilla-2 { grid-template-columns: 1fr !important; gap: 10px !important; }
  .tarjeta-extra { min-height: 0 !important; padding: 18px 22px 20px !important; border-radius: 18px !important; color: var(--crema) !important;
    background: linear-gradient(160deg, #2E231C 0%, #1C1511 55%, #17110E 100%) !important; border: 0 !important; box-shadow: 0 20px 40px -30px rgba(28, 21, 17, 0.5) !important; }
  .tarjeta-extra::before { display: block !important; }
  .tarjeta-extra .tarjeta-etiqueta { position: static; display: block; margin-bottom: 6px; font-size: 11px; color: rgba(239, 233, 223, 0.5) !important; }
  .tarjeta-extra h3 { font-size: 19px !important; }
  .tarjeta-extra p { margin-top: 4px; font-size: 13px !important; color: rgba(239, 233, 223, 0.62) !important; }
}

/* Carrusel móvil: lo coloca el JS de forma continua (sigue al dedo) */
@media (max-width: 860px) {
  .rejilla-3 { position: relative; display: block; height: 200px; margin: 0 -20px; touch-action: pan-y; }
  .rejilla-3 .tarjeta { position: absolute; top: 0; left: 50%; width: 64%; height: 190px; min-height: 0; transform: translateX(-50%);
    will-change: transform, opacity; touch-action: pan-y; -webkit-user-select: none; user-select: none; transition: none; }
  .rejilla-3 .tarjeta:hover { transform: none; }
  .rejilla-3 .tarjeta .tarjeta-flecha { transition: opacity 0.3s; }
  .rejilla-3 .tarjeta:not(.centro) .tarjeta-flecha { opacity: 0; pointer-events: none; }
}

/* Pie en ordenador: todo centrado, como en el móvil */
@media (min-width: 861px) {
  .pie-arriba { flex-direction: column; justify-content: center; text-align: center; gap: 24px; }
  .pie-datos { justify-content: center; }
  .pie-legal { flex-direction: column; align-items: center; gap: 10px; }
  .pie-marca { margin-top: 36px !important; }
}

/* Flecha de las tarjetas: igual que el botón de WhatsApp (solo línea dorada) */
.tarjeta-flecha, .tarjeta:hover .tarjeta-flecha {
  border: 1px solid transparent;
  background: linear-gradient(rgba(28, 21, 17, 0.88), rgba(28, 21, 17, 0.88)) padding-box, var(--oro) border-box; }
.tarjeta-flecha svg, .tarjeta:hover .tarjeta-flecha svg { stroke: var(--oro-1); }
.tarjeta-flecha:hover { background: linear-gradient(rgba(59, 45, 35, 0.9), rgba(59, 45, 35, 0.9)) padding-box, var(--oro) border-box; }

/* ---------- Revisión móvil: zonas táctiles, contraste y detalles ---------- */
.extra span { height: 44px; }
.casilla, .volver { min-height: 44px; }
.tarjeta-flecha::after { content: ""; position: absolute; inset: -8px; }
.enlace-wa, .pie-legal nav a { position: relative; }
.enlace-wa::after, .pie-legal nav a::after { content: ""; position: absolute; inset: -10px -6px; }
.site-header .nav-mobile-cta { min-height: 44px; }
.tarjeta p { color: rgba(239, 233, 223, 0.8); }
.letra-pequena { color: rgba(239, 233, 223, 0.62); }
.incluido h3 { color: var(--texto-suave); }
.campo :is(input, select) { border-color: rgba(239, 233, 223, 0.3); }
.campo input[type="date"]::-webkit-date-and-time-value { text-align: left; }
@media (hover: none) { .tarjeta:hover { transform: none; } }