/* =========================================================
   explorar.css — estilos de la página web-explorar
   Ir a: assets/css/explorar.css
   ========================================================= */

.ad-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#A79E95;margin-bottom:8px}
main.explorar-main{max-width:1280px;margin:0 auto}

/* barra de búsqueda superior */
.top-search{background:#fff;border-bottom:1px solid #EDE3D8;padding:16px 34px}
/* Sin max-width: la barra ocupa todo el ancho disponible y el
   selector de orden se va a la esquina derecha con margin-left:auto.
   Antes se quedaba en 820px y dejaba media pantalla vacía. */
.top-search-row{display:flex;gap:10px;align-items:stretch;max-width:none;width:100%}
@media (max-width:600px){.top-search-row{flex-direction:column}}
.top-search-field{flex:1.6;display:flex;align-items:center;gap:10px;padding:0 14px;height:48px;background:#FAF7F2;border:1px solid #E7DDD1;border-radius:10px}
.top-search-field.where{flex:1}
.top-search-field span{font-size:15px;color:#2C2A28}
.top-search-btn{cursor:pointer;border:none;background:#C15F3C;color:#fff;font-weight:700;font-size:15px;padding:0 26px;border-radius:10px;height:48px}
.top-search-btn:hover{background:#A34A2C}

/* header de resultados */
.results-head-wrap{padding:26px 34px 0}
.breadcrumb{font-size:13px;color:#9a9089;display:flex;gap:7px}
.breadcrumb a{color:#9a9089;text-decoration:none}
.breadcrumb a:hover{color:#C15F3C}
.results-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:12px;flex-wrap:wrap}
.results-head h1{font-size:32px;font-weight:800}
.results-count{font-size:15px;color:#6E6862;margin-top:6px}
.sort-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E7DDD1;border-radius:8px;padding:10px 14px;font-size:14px;font-weight:600;color:#4A453F;cursor:pointer}
.sort-btn:hover{border-color:#C15F3C}

/* layout body */
.explorar-body{display:flex;gap:28px;padding:24px 34px 40px;align-items:flex-start}
@media (max-width:1024px){.explorar-body{flex-direction:column}}

/* sidebar filtros */
.filters-aside{flex:none;width:262px}
@media (max-width:1024px){.filters-aside{width:100%}}
.filters-card{background:#fff;border:1px solid #E7DDD1;border-radius:12px;padding:20px;position:sticky;top:88px}
@media (max-width:1024px){.filters-card{position:static}}
.filters-head{display:flex;align-items:center;justify-content:space-between}
.filters-head-title{font-family:'Schibsted Grotesk';font-weight:800;font-size:17px}
.filters-clear{font-size:13px;font-weight:700;color:#C15F3C;cursor:pointer;background:none;border:none}
.active-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.active-chip{display:inline-flex;align-items:center;gap:6px;background:#F4E3DA;color:#A34A2C;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;border:none;cursor:pointer}
.filters-divider{height:1px;background:#F0E7DD;margin:18px 0}
.filters-group-title{font-family:'Schibsted Grotesk';font-weight:700;font-size:14px;margin-bottom:9px}

.check-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;color:#4A453F;cursor:pointer;width:100%;background:none;border:none;text-align:left}
.check-box{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid #D8CABB;display:flex;align-items:center;justify-content:center}
.check-box.on{background:#C15F3C;border-color:#C15F3C;color:#fff}
.check-count{margin-left:auto;color:#9a9089;font-size:12.5px}

.radio-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;color:#4A453F;cursor:pointer;width:100%;background:none;border:none;text-align:left}
.radio-dot{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid #D8CABB}
.radio-dot.on{border:5px solid #C15F3C}

.modality-row{display:flex;gap:8px}
.modality-pill{flex:1;text-align:center;font-size:13.5px;padding:9px;border-radius:8px;cursor:pointer;background:#fff;border:1px solid #E7DDD1;color:#4A453F;font-weight:600}
.modality-pill.on{background:#F4E3DA;border:1.5px solid #C15F3C;color:#A34A2C;font-weight:700}

.pay-row{display:flex;flex-wrap:wrap;gap:7px}
.pay-pill{font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer;background:#fff;border:1px solid #E7DDD1;color:#4A453F;font-weight:600}
.pay-pill.on-fijo{background:#F4E3DA;border:1px solid #E7C9B6;color:#A34A2C;font-weight:700}
.pay-pill.on-grat{background:#1C6B75;border:1px solid #1C6B75;color:#fff;font-weight:700}
.pay-pill.on-bajo{background:#F5E7DC;border:1px solid #EAD3C0;color:#A34A2C;font-weight:700}

.lgbt-row{display:flex;align-items:center;gap:10px;font-size:14px;color:#4A453F;cursor:pointer;background:none;border:none;width:100%;text-align:left}
.lgbt-box{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid #D8CABB;display:flex;align-items:center;justify-content:center}
.lgbt-box.on{background:#C15F3C;border-color:#C15F3C}

/* resultados */
.results-col{flex:1;min-width:0}
.sidebar-ad-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#A79E95;margin-bottom:6px}
.sidebar-ad{position:relative;height:150px;border-radius:12px;overflow:hidden;border:1px solid #E2D8CC;margin-bottom:18px}
.sidebar-ad-bg{width:100%;height:100%;background:linear-gradient(150deg,#EFE7DD,#E4ECE3);display:flex;align-items:center;justify-content:center;color:#B4A695}
.sidebar-ad-badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.78);backdrop-filter:blur(9px);color:#4A453F;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px}
.sidebar-ad-logo{width:20px;height:20px;border-radius:5px;background:#fff;border:1px solid #E7DDD1;display:flex;align-items:center;justify-content:center;color:#B7ADA3;font-size:8px}
.sidebar-ad-cta{position:absolute;bottom:12px;right:12px;display:inline-flex;align-items:center;gap:6px;background:#C15F3C;color:#fff;font-size:13px;font-weight:700;padding:9px 15px;border-radius:8px;text-decoration:none}
.sidebar-ad-cta:hover{background:#A34A2C}

.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1024px){.results-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.results-grid{grid-template-columns:1fr}}

.r-card{background:#fff;border:1px solid #E7DDD1;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.r-card.featured{border:2px solid #E0A43B;box-shadow:0 14px 34px rgba(224,164,59,.28)}
.r-card-ribbon{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#E0A43B;color:#3A2A12;padding:6px 12px}
.r-card-ribbon .tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.04em;color:#fff}
.r-card-ribbon .sponsored{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.r-card-photo{overflow:hidden;position:relative;height:250px;background:linear-gradient(150deg,#F4E3DA,#E4ECE3);color:#C79B86;display:flex;align-items:center;justify-content:center}

/* Igual que .r-card-photo pero SIN altura fija: crece con flex:1
   para llenar todo el alto que le sobre a la tarjeta de anuncio, que
   a su vez ya se estira al alto de la fila (comportamiento por
   defecto de CSS Grid). Así la imagen del anunciante ocupa el mismo
   tamaño total que una ficha real, en vez de quedar recortada a los
   250px de la franja de foto. */
/* Contenedor de la imagen del anuncio: llena TODO el alto de la
   tarjeta (flex:1). Estilos completos al final del archivo, en
   "Tarjeta de anuncio en Explorar". */
.r-card-ad-img{overflow:hidden;position:relative;flex:1;display:flex;flex-direction:column;background:linear-gradient(150deg,#F4E3DA,#E4ECE3);text-decoration:none}
.r-card-role{position:absolute;top:0;left:0;color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px}
.r-card-verified{position:absolute;top:11px;right:11px;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.55);backdrop-filter:blur(9px);color:#2F7D57;font-size:11px;font-weight:700;padding:5px 9px;border-radius:999px}
.r-card-badges{position:absolute;left:11px;bottom:11px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.r-card-free-badge{display:inline-flex;align-items:center;gap:5px;background:#1C6B75;color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:6px}
.r-card-lowcost-badge{display:inline-flex;align-items:center;gap:5px;background:#C15F3C;color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:6px}
.r-card-save{position:absolute;bottom:11px;right:11px;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.62);backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(60,40,30,.16)}
.r-card-body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
.r-card-name{font-size:17.5px;font-weight:700;color:#2C2A28;font-family:'Schibsted Grotesk';text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-card-name:hover{color:#C15F3C}
.r-card-title{font-size:13px;color:#6E6862;margin-top:3px}
.r-card-rating{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:13px;color:#6E6862}
.r-card-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.r-spec-pill{background:#E4ECE3;color:#3F5A42;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:4px}
.r-card-offers{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.r-offer-free{display:inline-flex;align-items:center;gap:5px;background:#E1EDEF;color:#1C6B75;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px}
.r-offer-lowcost{display:inline-flex;align-items:center;gap:5px;background:#F5E7DC;color:#A34A2C;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px}
.r-card-bottom{margin-top:24px;padding-top:18px;border-top:1px solid #F0E7DD;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.r-price-row{display:flex;align-items:baseline;gap:6px}
.r-price-prefix{font-size:12px;color:#9a9089;font-weight:600}
.r-price-main{font-family:'Schibsted Grotesk';font-weight:800;font-size:19px}
.r-price-main.free{color:#1C6B75}
.r-price-unit{font-size:12px;color:#9a9089}
.r-card-actions{display:flex;gap:8px;margin-top:12px}
.r-btn-whatsapp{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#12965A;color:#fff;font-weight:700;font-size:13.5px;padding:10px;border-radius:8px;border:none;cursor:pointer}
.r-btn-whatsapp:hover{background:#0E7D4B}
.r-btn-reveal{cursor:pointer;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;font-family:inherit;font-weight:700;font-size:13.5px;padding:9px;border-radius:8px;border:1.5px solid}
.r-btn-phone{display:none;flex:1;align-items:center;justify-content:center;font-weight:800;font-size:13.5px;padding:9px;border-radius:8px;border:1.5px solid;text-decoration:none}
.r-card.revealed .r-btn-reveal{display:none}
.r-card.revealed .r-btn-phone{display:inline-flex}

/* tarjeta de anuncio dentro del grid */
.r-card-ad-label{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#EFE7DD;color:#8A7C6B;padding:6px 12px;border-bottom:1px solid #E2D8CC}
.r-card-ad-label span:first-child{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.r-card-ad-label span:last-child{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.r-card-ad-body{position:relative;flex:1;min-height:420px}
.r-card-ad-bg{width:100%;height:100%;background:linear-gradient(150deg,#EFE7DD,#E4ECE3);display:flex;align-items:center;justify-content:center;color:#B4A695}
.r-card-ad-badge{position:absolute;top:11px;left:11px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.72);backdrop-filter:blur(9px);color:#4A453F;font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px}
.r-card-ad-cta{position:absolute;left:15px;right:15px;bottom:15px;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#C15F3C;color:#fff;font-weight:700;font-size:14px;padding:12px;border-radius:8px;box-shadow:0 8px 22px rgba(60,40,30,.28);text-decoration:none}
.r-card-ad-cta:hover{background:#A34A2C}

/* paginación */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:32px}
.page-btn{width:38px;height:38px;border-radius:8px;background:#fff;border:1px solid #E7DDD1;display:flex;align-items:center;justify-content:center;color:#4A453F;cursor:pointer;font-weight:700;font-size:14.5px}
.page-btn:hover{border-color:#C15F3C}
.page-btn.current{background:#C15F3C;color:#fff;border:none}
.page-btn.arrow{color:#9a9089}
.page-dots{color:#9a9089;padding:0 4px}

/* -----------------------------------------------------------
   Selector "Ordenar:" junto al título de resultados.
   Hecho con <details>/<summary>, sin JavaScript. Se le quita el
   triangulito nativo del navegador y se usa el caret propio.
   ----------------------------------------------------------- */
/* El selector vive dentro de .top-search-row, que es flex: se le
   quita el crecimiento para que no empuje al campo de búsqueda, y se
   alinea a la altura del botón Buscar (48px). */
.orden-select { position: relative; flex: none; display: flex; align-items: center; margin-left: auto; }
.orden-select > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #E0A08A; border-radius: 999px;
  padding: 0 16px; height: 48px; white-space: nowrap;
  font-size: 14px; color: #4A453F;
}
.orden-select > summary::-webkit-details-marker { display: none; }
.orden-select > summary::marker { content: ''; }
.orden-select > summary b { font-weight: 700; color: #2C2A28; }
.orden-select > summary svg { color: #9a9089; transition: transform .18s ease; }
.orden-select[open] > summary { border-color: #C15F3C; }
.orden-select[open] > summary svg { transform: rotate(180deg); }

.orden-lista {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 200px;
  background: #fff; border: 1px solid #E7DDD1; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(60,40,30,.18);
  padding: 6px;
}
.orden-opcion,
.orden-opcion:visited {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; color: #2C2A28; text-decoration: none;
}
.orden-opcion:hover { background: #F6EEE5; color: #2C2A28; }
.orden-opcion.is-on { background: #FBF3EC; color: #C15F3C; font-weight: 700; }

@media (max-width: 600px) {
  .orden-lista { right: auto; left: 0; }
}

/* Estrella dorada del rating y fila de ubicación/modalidad de la
   tarjeta de resultados, para que coincida con la del Inicio. */
.r-card-star { display: inline-flex; color: #E0A43B; }
.r-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; color: #6E6862; }
.r-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.r-card-meta svg { flex: none; color: #9a9089; }

/* El texto de los botones de contacto, en todos los estados: sin
   esto, la regla de enlaces de style.css los pintaba de terracota
   (y sobre el verde de WhatsApp quedaba ilegible). */
.r-btn-whatsapp, .r-btn-whatsapp:visited, .r-btn-whatsapp:hover { color: #fff; }
.r-btn-phone, .r-btn-phone:visited { color: #A34A2C; }

@media (max-width: 600px) {
  /* La barra se apila en móvil: el selector ocupa el ancho completo
     y el margin-left:auto sobra (empujaría hacia un lado). */
  .orden-select { margin-left: 0; }
  .orden-select, .orden-select > summary { width: 100%; }
  .orden-select > summary { justify-content: center; }
}

/* ---------------------------------------------------------------
   Fotos de perfil: se ven completas, sin recortar.

   object-fit:contain muestra la imagen ENTERA. Antes era cover y
   recortaba: con una foto vertical dentro de una caja apaisada, lo
   que se comia era la cabeza.

   EL HUECO VA EN COLOR SOLIDO, no con la foto desenfocada detras.
   El desenfoque llenaba el espacio pero ensuciaba la tarjeta y
   dejaba las insignias ("PSICOLOGO/A", "Verificado") flotando sobre
   una mancha borrosa distinta en cada perfil. Un color plano se lee
   mejor y no compite con la imagen.

   Y LAS INSIGNIAS VAN POR ENCIMA DE LA FOTO: la imagen lleva
   position:relative para poder apilarse, y eso por si solo la
   ponia delante de las etiquetas y las tapaba. Con z-index
   explicito en cada capa queda claro quien va delante y no depende
   del orden en que esten escritas en el HTML.
   --------------------------------------------------------------- */
/* object-fit: COVER, no contain.
   Con "contain" la foto se metia entera dentro de la caja sin
   recortar nada, y cuando sus proporciones no coincidian con las
   del hueco quedaban franjas de color vacias: arriba y abajo en
   la ficha, a los lados en las tarjetas. Media tarjeta era fondo.

   Con "cover" la foto llena el hueco y se recorta lo que sobra.
   El recorte se hace desde el 20% de la altura y no desde el
   centro, porque en un retrato la cara esta en la parte alta:
   centrado le cortaria la frente. */
.foto-real{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}

.r-card-photo{background:#F3EAE1}
.r-card-role,.r-card-verified{z-index:2}

/* ---------------------------------------------------------------
   Franja publicitaria de arriba (banner-explorar-top).

   La altura la fija el ancho de la columna con aspect-ratio 4/1, no
   la imagen. Asi da igual que medida suba el anunciante: el hueco es
   siempre el mismo, la pagina no da saltos cuando entra o caduca un
   anuncio, y ningun banner puede comerse la pantalla antes del
   primer psicologo.

   El tope de 300px evita que en monitores muy anchos la franja
   crezca hasta convertirse otra vez en un bloque enorme.
   --------------------------------------------------------------- */
/* Aviso de "Publicidad" del banner de arriba. Mismo aspecto que
   .ad-label, pero con un nombre que las listas de los
   bloqueadores no reconocen: si el bloqueador tumba la imagen
   (.ad-franja) el aviso se queda solo, que no molesta; al reves
   quedaria un anuncio sin identificar. */
.etq-patrocinio{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#A79E95;margin-bottom:8px}
.franja-patrocinada{display:block}
.ad-franja{display:block;width:100%;aspect-ratio:4/1;max-height:300px;border:1px solid #E7DDD1;border-radius:14px;overflow:hidden;box-sizing:border-box}
.ad-franja img{width:100%;height:100%;object-fit:cover;display:block}

/* El hueco vacio comparte proporcion con el anuncio, para que la
   maqueta sea identica haya publicidad o no. */
.ad-franja-vacia{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:linear-gradient(120deg,#FBF3EC,#F6F1EA);border:1px dashed #E0D6C9}

@media(max-width:700px){
  /* En movil la columna es estrecha y 4:1 dejaria una tira de 90px
     donde no se lee nada. Se abre a 2:1. */
  .ad-franja{aspect-ratio:2/1;max-height:220px}
}

/* Version en formato tarjeta del mismo hueco vacio de arriba
   (.ad-franja-vacia), para el espacio 'tarjeta-explorar' que va
   mezclado dentro de la cuadricula de resultados en vez de en una
   franja horizontal. */
.r-card-ad-vacia{align-items:center;justify-content:center;text-align:center;padding:28px 22px;gap:10px;min-height:460px;background:linear-gradient(150deg,#FBF3EC,#F6F1EA);border:1px dashed #E0D6C9}
.r-card-ad-vacia-icon{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid #E7DDD1;display:flex;align-items:center;justify-content:center;color:#C15F3C;flex:none}
.r-card-ad-vacia-eyebrow{font-family:'Schibsted Grotesk';font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#C15F3C}
.r-card-ad-vacia-title{font-family:'Schibsted Grotesk';font-weight:700;font-size:16px;color:#2C2A28}
.r-card-ad-vacia-text{font-size:13px;color:#6E6862;line-height:1.45;max-width:220px}
.r-card-ad-vacia-cta{display:inline-flex;align-items:center;justify-content:center;background:#C15F3C;color:#fff;font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:9px;text-decoration:none;margin-top:6px}
.r-card-ad-vacia-cta:hover{background:#A34A2C}

/* =========================================================
   Tarjeta de anuncio en Explorar (rediseño 2026-10-02, v2)
   La imagen llena la tarjeta completa sin recortar el anuncio:
   fondo = misma imagen desenfocada (cover), encima = imagen entera
   (contain), y el botón abajo sobre el fondo, alineado con los
   botones de las fichas vecinas.
   ========================================================= */
.r-card-ad{border-color:#E2D8CC}
.r-card-ad-ribbon{background:#3E3A35;position:relative;z-index:2}
.r-card-ad-ribbon .tag{color:#fff;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.r-card-ad-ribbon .sponsored{color:#E9DCCB;opacity:1}

.r-card-ad-fondo{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(22px) saturate(1.1);transform:scale(1.08)}
.r-card-ad-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(30,22,16,.18) 100%)}

/* El marco crece para llenar el alto; en móvil (1 columna, sin
   fichas vecinas que marquen el alto) nunca baja de 4:5. */
.r-card-ad-marco{position:relative;z-index:1;flex:1 1 auto;min-height:0;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:14px 14px 0}
.r-card-ad-marco img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px;filter:drop-shadow(0 12px 26px rgba(40,28,20,.28));transition:transform .5s ease}
.r-card-ad:hover .r-card-ad-marco img{transform:scale(1.02)}

.r-card-ad-pie{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;gap:4px;padding:14px 15px 16px;text-align:center}
.r-card-ad-nombre{font-family:'Schibsted Grotesk';font-size:16.5px;font-weight:700;color:#fff;line-height:1.25;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.r-card-ad-texto{font-size:13px;line-height:1.45;color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(0,0,0,.35);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.r-card-ad-boton{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:#A34A2C;border:1.5px solid #C15F3C;font-weight:700;font-size:13.5px;padding:10px;border-radius:8px;transition:background .2s,color .2s}
.r-card-ad:hover .r-card-ad-boton{background:#C15F3C;color:#fff}
.r-card-ad-boton svg{transition:transform .2s}
.r-card-ad:hover .r-card-ad-boton svg{transform:translateX(3px)}