/* ============================================================
   DataTrust Widgets · Cards Foto
   Grid de tarjetas foto + panel (2/3/4 col). 4 variantes de panel.
   Namespaced .dtw-cards-foto.
   ============================================================ */
.dtw-cards-foto{
  --dtw-ink:#0D0C10;--dtw-ink-2:#17161A;--dtw-purple:#413C58;--dtw-pink:#F54576;
  --dtw-yellow:#FBD87F;--dtw-paper:#FAFAF8;--dtw-lilac:#D4D0E4;
  --dtw-txt-dark:#211F26;--dtw-txt-dark-muted:#6B6775;--dtw-txt-light-muted:#A7A3B2;
  --dtw-ease:cubic-bezier(.22,.61,.36,1);
  padding:80px 0;font-family:'Poppins',sans-serif;
}
.dtw-cards-foto--light{background:var(--dtw-paper)}
.dtw-cards-foto--dark{background:var(--dtw-ink)}
.dtw-cards-foto__wrap{max-width:1200px;margin:0 auto;padding:0 32px}

.dtw-cards-foto__head{margin-bottom:44px;max-width:640px}
.dtw-cards-foto__eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.dtw-cards-foto__eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dtw-pink)}
.dtw-cards-foto--light .dtw-cards-foto__eyebrow{color:var(--dtw-txt-dark-muted)}
.dtw-cards-foto--dark .dtw-cards-foto__eyebrow{color:var(--dtw-txt-light-muted)}
.dtw-cards-foto__title{font-family:'Playfair Display',serif;font-weight:700;font-size:34px;line-height:1.12;letter-spacing:-.01em}
.dtw-cards-foto--light .dtw-cards-foto__title{color:var(--dtw-txt-dark)}
.dtw-cards-foto--dark .dtw-cards-foto__title{color:var(--dtw-paper)}

.dtw-cards-foto__grid{display:grid;gap:24px}
.dtw-cards-foto__grid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.dtw-cards-foto__grid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.dtw-cards-foto__grid[data-cols="4"]{grid-template-columns:repeat(4,1fr)}

.dtw-cards-foto__card{border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--dtw-ease),box-shadow .3s}
.dtw-cards-foto__card:hover{transform:translateY(-6px)}
.dtw-cards-foto__photo{aspect-ratio:4/5;background-size:cover;background-position:center;background-color:var(--dtw-purple)}
.dtw-cards-foto__panel{padding:26px 24px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.dtw-cards-foto__t{font-family:'Playfair Display',serif;font-weight:700;font-size:23px;margin-bottom:12px}
.dtw-cards-foto__p{font-size:15.5px;line-height:1.6;font-weight:300;margin-bottom:20px;flex:1}
.dtw-cards-foto__btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;padding:13px 24px;border-radius:100px;text-decoration:none;transition:transform .2s var(--dtw-ease),box-shadow .2s,background .2s}
.dtw-cards-foto__btn svg{width:1em;height:1em}

/* Variante · oscuro + botón rosa */
.dtw-cards-foto__panel--dark{background:var(--dtw-ink-2)}
.dtw-cards-foto__panel--dark .dtw-cards-foto__t{color:var(--dtw-paper)}
.dtw-cards-foto__panel--dark .dtw-cards-foto__p{color:var(--dtw-txt-light-muted)}
.dtw-cards-foto__panel--dark .dtw-cards-foto__btn{background:var(--dtw-pink);color:#fff}
.dtw-cards-foto__panel--dark .dtw-cards-foto__btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(245,69,118,.4)}

/* Variante · morado + botón amarillo */
.dtw-cards-foto__panel--purple{background:var(--dtw-purple)}
.dtw-cards-foto__panel--purple .dtw-cards-foto__t{color:var(--dtw-paper)}
.dtw-cards-foto__panel--purple .dtw-cards-foto__p{color:var(--dtw-lilac)}
.dtw-cards-foto__panel--purple .dtw-cards-foto__btn{background:var(--dtw-yellow);color:#5a4a12}
.dtw-cards-foto__panel--purple .dtw-cards-foto__btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(251,216,127,.35)}

/* Variante · claro + botón rosa */
.dtw-cards-foto__panel--light{background:#fff;border:1px solid rgba(17,16,20,.08);border-top:none}
.dtw-cards-foto__panel--light .dtw-cards-foto__t{color:var(--dtw-txt-dark)}
.dtw-cards-foto__panel--light .dtw-cards-foto__p{color:#3a3742}
.dtw-cards-foto__panel--light .dtw-cards-foto__btn{background:var(--dtw-pink);color:#fff}
.dtw-cards-foto__panel--light .dtw-cards-foto__btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(245,69,118,.4)}

/* Variante · rosa + botón oscuro */
.dtw-cards-foto__panel--pink{background:var(--dtw-pink)}
.dtw-cards-foto__panel--pink .dtw-cards-foto__t{color:#fff}
.dtw-cards-foto__panel--pink .dtw-cards-foto__p{color:rgba(255,255,255,.9)}
.dtw-cards-foto__panel--pink .dtw-cards-foto__btn{background:#17161A;color:#fff}
.dtw-cards-foto__panel--pink .dtw-cards-foto__btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3)}

@media(max-width:960px){
  .dtw-cards-foto__grid[data-cols="4"]{grid-template-columns:repeat(2,1fr)}
  .dtw-cards-foto__grid[data-cols="3"]{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .dtw-cards-foto__grid{grid-template-columns:1fr!important;max-width:400px;margin:0 auto}
}

/* Padding lateral reducido en móvil (unificado a 20px) */
@media(max-width:600px){
  .dtw-cards-foto__wrap{padding-left:20px;padding-right:20px}
}

/* Tarjeta clickeable (sin botón): el enlace va en el título y ::after
   estira el área de clic sobre toda la tarjeta. El ancla SEO es el título. */
.dtw-cards-foto__card--clickable{position:relative}
.dtw-cards-foto__t-link{color:inherit;text-decoration:none}
.dtw-cards-foto__t-link::after{content:"";position:absolute;inset:0;z-index:1}
.dtw-cards-foto__card--clickable:hover .dtw-cards-foto__t-link{text-decoration:underline;text-underline-offset:3px}