/* extra.css — complementos del sitio chileno.
   brand.css NO se modifica: es el sistema de diseño del sitio australiano. */

/* Imagen dentro de una tarjeta */
.card__pic {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-2, 10px);
  margin-bottom: var(--s-4, 16px);
  display: block;
}

/* Grillas de fotos: recorte cuadrado parejo */
.photo-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-2, 10px);
  display: block;
}

/* Foto del hero */
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--r-3, 16px);
}
/* el marco del hero es 4:5, asi la foto siempre lo llena */
.hero__image { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-3, 16px); }

/* Antes y despues del cambio de fondo */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--r-3, 16px);
  overflow: hidden;
  border: 1px solid var(--line, #e6e2d6);
}
.compare img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.compare figure { margin: 0; position: relative; }
.compare figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
}

/* Preguntas frecuentes */
.faq details {
  border-bottom: 1px solid var(--line, #e6e2d6);
  padding: 18px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.08rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--mp-magenta, #d70c8c);
  flex: none;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p {
  margin: 12px 0 0;
  color: var(--ink-soft, #4a5560);
}

@media (max-width: 640px) {
  .compare { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Telefono
   El sitio australiano lleva UN boton en la cabecera; el chileno
   lleva dos ("Soy apoderado" + "Agenda tu dia de fotos"), y en una
   pantalla de 375 px esos dos mas el boton de menu dejaban el
   logotipo en cero pixeles de ancho. Bajo 560 px el boton de
   apoderados se va al menu desplegable.
   --------------------------------------------------------- */
.nav__links .solo-telefono { display: none; }

@media (max-width: 560px) {
  .nav__cta.btn--secondary { display: none; }
  .nav__links .solo-telefono { display: block; }
  .nav__brand img { height: 40px; }
  .nav__cta { padding: 7px 12px; font-size: 0.8rem; }
}

/* Area de toque comoda en los enlaces del pie */
@media (max-width: 760px) {
  .site-footer ul a { display: inline-block; padding: 6px 0; }
}