/* =============================================================================
   BASE360 · Tarjeta de producto · componente único
   -----------------------------------------------------------------------------
   Antes había seis tarjetas distintas: cinco tamaños de título, dos de precio y
   tres maneras de marcar el recomendado (halo azul, borde dorado y una píldora
   roja flotante). Este archivo las unifica en la que mejor vendía: la de
   nombre.html — fondo blanco, precio azul grande, viñetas azules y botón dorado.

   Se carga DESPUÉS del <style> de cada página, así que gana sin tener que
   editar los estilos que ya estaban. Si algo no gusta, se quita el <link> y
   cada página vuelve exactamente a como estaba.
   ============================================================================= */

/* ---- La caja ---- */
.pack, .plan{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 26px 26px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; position:relative; overflow:visible;
  transition:.18s;
}
.pack:hover, .plan:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }

/* ---- La etiqueta de arriba · una sola forma, nunca flotante ---- */
.pack .et, .plan .et, .plan .pn, .plan .badge{
  position:static; transform:none; display:inline-block;
  background:none; border:0; padding:0; margin:0 0 8px;
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-mute); line-height:1.2; align-self:flex-start;
}

/* ---- Título ---- */
.pack h3, .plan h3{
  font-family:var(--serif); font-size:23px; font-weight:600; line-height:1.15;
  color:var(--tx); margin:0 0 6px; letter-spacing:-.01em;
}

/* ---- Bajada ---- */
.pack .desc, .plan .desc, .plan .pd, .pack .pd{
  color:var(--tx-dim); font-size:14.5px; line-height:1.55; margin:0 0 14px; min-height:0;
}

/* ---- Precio ---- */
.pack .pr, .plan .pr, .plan .amt{
  display:block; font-family:var(--serif); font-size:38px; font-weight:700;
  color:var(--navy); line-height:1.05; letter-spacing:-.02em; margin:10px 0 2px;
}
.pack .ant, .plan .por, .plan .per, .plan .eq{
  display:block; font-size:13px; color:var(--tx-mute); line-height:1.5; margin:0 0 2px;
}
.plan .eq{ margin-bottom:14px; }

/* ---- Viñetas azules ---- */
.pack ul, .plan ul{ list-style:none; padding:0; margin:16px 0 20px; flex:1 1 auto; }
.pack ul li, .plan ul li{
  position:relative; padding-left:24px; margin:0 0 10px;
  color:var(--tx-dim); font-size:14.5px; line-height:1.55;
}
.pack ul li::before, .plan ul li::before{
  content:""; position:absolute; left:0; top:8px; width:9px; height:9px;
  border-radius:50%; background:var(--navy);
}
.pack ul li b, .plan ul li b{ color:var(--tx); }

/* ---- Botón · dorado, letras blancas, ancho completo ---- */
.pack > a.btn, .plan > a.btn,
.pack > a.btn-ghost, .plan > a.btn-ghost{
  margin-top:auto; width:100%; justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-d));
  color:#fff; border:0; box-shadow:0 8px 20px rgba(168,128,31,.26);
}
.pack > a.btn:hover, .plan > a.btn:hover{ filter:brightness(1.07); color:#fff; }

/* ---- El recomendado · una sola forma para las tres páginas ---- */
.pack.top, .pack.destaca, .plan.top, .plan.dest{
  border:2px solid var(--navy); box-shadow:0 0 0 3px rgba(26,74,168,.12), var(--shadow);
  padding:29px 25px 25px;
}
.pack.top .et, .pack.destaca .et,
.plan.top .et, .plan.top .pn, .plan.top .badge,
.plan.dest .et, .plan.dest .pn{ color:var(--navy); }

/* ---- Móvil ---- */
@media(max-width:620px){
  .pack, .plan{ padding:24px 20px 22px; }
  .pack .pr, .plan .pr, .plan .amt{ font-size:32px; }
}

/* El destacado traía dos etiquetas seguidas ("MÁS CONTRATADO" y "PLAN").
   Con la píldora ya no hace falta la segunda. */
.plan .badge + .pn{ display:none; }


/* =============================================================================
   v2 · lo que pidió Carlos el 8 de septiembre
   -----------------------------------------------------------------------------
   1. "cuando me acerco debe iluminarse la parte inferior de cada recuadro"
   2. "los cuadros deben ser dorados con letras blancas, para que llame la
       atención dónde debe hacer click el cliente"
   3. las tarjetas de servicios.html (las de "Cotizar") quedaron fuera de la
      unificación anterior; aquí entran.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1 · LA BARRA INFERIOR QUE SE ENCIENDE
   Una franja dorada pegada al borde de abajo. En reposo está apagada y
   encogida; al acercar el mouse se enciende y se estira de lado a lado.
   También se enciende con el teclado (:focus-within), para quien navega con
   Tab y para el lector de pantalla.
   --------------------------------------------------------------------------- */
.pack, .plan, .svc, .card, .pais, .g-card, .opt{ position:relative; }

.pack::after, .plan::after, .svc::after, .card::after, .pais::after,
.g-card::after, .opt::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  border-radius:0 0 14px 14px;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold),var(--gold-d));
  box-shadow:0 0 14px rgba(168,128,31,.55);
  opacity:0; transform:scaleX(.35); transform-origin:50% 100%;
  transition:opacity .22s ease, transform .26s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
.pack:hover::after,  .plan:hover::after,  .svc:hover::after,
.card:hover::after,  .pais:hover::after,  .g-card:hover::after, .opt:hover::after,
.pack:focus-within::after, .plan:focus-within::after, .svc:focus-within::after,
.card:focus-within::after, .pais:focus-within::after,
.g-card:focus-within::after, .opt:focus-within::after,
.g-card:focus-visible::after, .opt:focus-visible::after{
  opacity:1; transform:scaleX(1);
}

/* Quien tiene el sistema en "menos animación" recibe el encendido sin el
   estiramiento. Se ve igual de claro y no marea. */
@media(prefers-reduced-motion:reduce){
  .pack::after,.plan::after,.svc::after,.card::after,.pais::after,.g-card::after,.opt::after{
    transition:opacity .15s; transform:scaleX(1);
  }
}

/* ---------------------------------------------------------------------------
   2 · LAS TARJETAS DE "COTIZAR" (servicios.html)
   Eran una caja gris con un enlace azul chico abajo a la derecha, muy fácil de
   no ver. Ahora tienen la misma forma que las demás y terminan en un botón
   dorado de ancho completo.
   --------------------------------------------------------------------------- */
.svc{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:22px 20px 20px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.svc:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--gold-lt); }

.svc > b{ font-family:var(--serif); font-size:17px; font-weight:600; color:var(--tx); line-height:1.2; }
.svc > span{ color:var(--tx-dim); font-size:13.5px; line-height:1.55; flex:1 1 auto; }
.svc .precio{ font-family:var(--serif); font-size:26px; font-weight:700; color:var(--navy); margin-top:8px; }
.svc .precio.gratis{ color:var(--gold-d); }
.svc .tasa{ font-size:11.5px; color:var(--tx-mute); border-top:1px dashed var(--line); padding-top:7px; margin-top:4px; }

/* La fila de abajo deja de estar alineada a la derecha: el botón ocupa todo. */
.svc .row{ display:block; margin-top:14px; }

.svc a.cotizar{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; box-sizing:border-box;
  padding:12px 16px; border-radius:12px; border:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-d));
  color:#fff; font-family:inherit; font-weight:700; font-size:14.5px;
  letter-spacing:.01em; text-decoration:none; white-space:nowrap;
  box-shadow:0 6px 16px rgba(168,128,31,.24);
  transition:filter .16s, transform .16s, box-shadow .16s;
}
.svc a.cotizar:hover, .svc a.cotizar:focus-visible{
  filter:brightness(1.08); color:#fff; transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(168,128,31,.34);
}

/* ---------------------------------------------------------------------------
   3 · BOTÓN DORADO CON LETRAS BLANCAS EN TODAS LAS TARJETAS
   Antes convivían tres botones: azul, blanco con borde y dorado. El dorado es
   el que Carlos eligió porque destaca sobre el fondo crema. Se aplica al botón
   que cierra cada tarjeta, sea cual sea la clase que traía.
   El !important es a propósito: i18n.js inyecta sus estilos DESPUÉS de este
   archivo, y sin él el azul de .btn-primary volvería a ganar.
   --------------------------------------------------------------------------- */
.pack > a.btn, .plan > a.btn, .pack > a.btn-ghost, .plan > a.btn-ghost,
.pack > a.btn-primary, .plan > a.btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--gold-d)) !important;
  color:#fff !important; border:0 !important;
  box-shadow:0 8px 20px rgba(168,128,31,.26) !important;
}
.pack > a.btn:hover, .plan > a.btn:hover,
.pack > a.btn-ghost:hover, .plan > a.btn-ghost:hover,
.pack > a.btn-primary:hover, .plan > a.btn-primary:hover{
  filter:brightness(1.08); color:#fff !important; transform:translateY(-1px);
}

/* El borde azul del recomendado tiene que sobrevivir al hover. i18n.js pinta
   .plan:hover con borde dorado; aquí se le devuelve el azul al destacado. */
.pack.top:hover, .pack.destaca:hover, .plan.top:hover, .plan.dest:hover{
  border-color:var(--navy) !important;
}

/* ---------------------------------------------------------------------------
   4 · MÓVIL
   --------------------------------------------------------------------------- */
@media(max-width:620px){
  .svc{ padding:20px 18px 18px; }
  .svc .precio{ font-size:23px; }
}


/* ---------------------------------------------------------------------------
   5 · GUÍAS · el "Leer guía" también pasa a botón dorado
   Era una línea de texto azul chica al pie de la tarjeta. Ahora es el mismo
   botón que en el resto del sitio, para que el cliente vea de una dónde tocar.
   --------------------------------------------------------------------------- */
.g-card{ box-shadow:var(--shadow-sm); }
.g-card:hover{ border-color:var(--gold-lt); box-shadow:var(--shadow); }
.g-card .read{
  display:flex; align-items:center; justify-content:center;
  width:100%; box-sizing:border-box; margin-top:14px;
  padding:11px 16px; border-radius:12px;
  background:linear-gradient(135deg,var(--gold),var(--gold-d));
  color:#fff !important; font-weight:700; font-size:14px;
  box-shadow:0 6px 16px rgba(168,128,31,.24);
  transition:filter .16s, transform .16s;
}
.g-card:hover .read{ filter:brightness(1.08); transform:translateY(-1px); }

/* ---------------------------------------------------------------------------
   6 · SELLO DE AUTORÍA (sello.base360.pro)
   Esa página vive en otro subdominio y carga este mismo archivo desde
   base360.pro/assets/, así que se arregla desde acá: un solo archivo manda
   sobre las tarjetas de los dos sitios.
   Sus tarjetas usan otros nombres para las mismas partes (.tag en vez de .et,
   .precio en vez de .pr, .porobra en vez de .por, .destaca en vez de .top);
   aquí se emparejan.
   --------------------------------------------------------------------------- */
.plan > .tag{
  position:static; transform:none; display:inline-block;
  background:none; border:0; padding:0; margin:0 0 8px;
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-mute); line-height:1.2; align-self:flex-start;
}
.plan .precio{
  display:block; font-family:var(--serif); font-size:38px; font-weight:700;
  color:var(--navy); line-height:1.05; letter-spacing:-.02em; margin:10px 0 2px;
}
.plan .porobra{
  display:block; font-size:13px; color:var(--tx-mute); line-height:1.5; margin:0 0 2px;
}
.plan.destaca{
  border:2px solid var(--navy); box-shadow:0 0 0 3px rgba(26,74,168,.12), var(--shadow);
  padding:29px 25px 25px;
}
.plan.destaca > .tag{ color:var(--navy); }
.plan.destaca:hover{ border-color:var(--navy) !important; }
/* En el sello el botón es <a class="btn btn-o"> o <a class="btn btn-p">. */
.plan > a.btn-o, .plan > a.btn-p{
  margin-top:auto; width:100%; justify-content:center; display:flex;
  align-items:center; box-sizing:border-box; cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold-d)) !important;
  color:#fff !important; border:0 !important;
  box-shadow:0 8px 20px rgba(168,128,31,.26) !important;
}
.plan > a.btn-o:hover, .plan > a.btn-p:hover{
  filter:brightness(1.08); color:#fff !important; transform:translateY(-1px);
}
@media(max-width:620px){ .plan .precio{ font-size:32px; } }