/*----------------------------------------------------------------ESTILO DETAILS HOME*--------------------------------------------------------/

/* CONTENEDOR */
.faq-right {
  max-width: 820px;
  margin: auto;
  font-family: Arial, Helvetica, sans-serif;
}

/* TARJETA FAQ */
.faq-right details {
  margin-bottom: 18px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 6px 15px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* EFECTO HOVER */
.faq-right details:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 25px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

/* PREGUNTA */
.faq-right summary {
  background: linear-gradient(135deg, #FFD966, #FFC107);
  padding: 18px 22px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  color: #000;
}

/* QUITAR ICONO NATIVO */
.faq-right summary::-webkit-details-marker {
  display: none;
}

/* RESPUESTA */
.faq-right details p {
  padding: 18px 22px;
  margin: 0;
  background: #fff;
  color: #222;
  line-height: 1.7;
  border-top: 1px solid rgba(0,0,0,0.08);
  animation: faqDepthFade 0.35s ease;
}

/* ANIMACIÓN SUAVE */
@keyframes faqDepthFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*-----------------------------------------------------------------ESTILO DETAILS PAGINAS LEGALES*---------------------------------------/
/* CONTENEDOR DETAILS */
details.details_legal {
  margin-bottom: 18px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 6px 15px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* HOVER */
details.details_legal:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 25px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

/* SUMMARY */
details.details_legal > summary {
  background: linear-gradient(135deg, #FFD966, #FFC107);
  padding: 18px 22px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  color: #000;
}

/* QUITAR ICONO */
details.details_legal > summary::-webkit-details-marker {
  display: none;
}

/* CONTENIDO (TODOS LOS BLOQUES INTERNOS) */
details.details_legal > :not(summary) {
  padding: 18px 22px;
  background: #fff;
  color: #222;
  line-height: 1.7;
  border-top: 1px solid rgba(0,0,0,0.08);
  animation: faqDepthFade 0.35s ease;
}

/* CORREGIR MÁRGENES INTERNOS */
details.details_legal > :not(summary) p {
  margin: 0 0 12px;
}

details.details_legal > :not(summary) p:last-child {
  margin-bottom: 0;
}

/*-----------------------------------------------------------------------------ESTILO DETAIL FAQ´S EN PAGINAS DE ENVIO Y ENTREGA EN TIENDA---------------------------------------------------*/

/* ===========================
   VARIABLES (convertidas a CSS)
   =========================== */
:root {
  --border-radius: 15px;
  --base: #f9f9f9;
  --primary: #828282;
  --accent: #0077aa;
  --shadow-dark: rgba(0, 119, 170, 0.07);
  --shadow-light: rgba(255,255,255,0.9);
  --transition: all 0.6s ease;
}


/* ===========================
   BLOQUE DETAILS - ESTILO PRINCIPAL
   =========================== */
.Dtls-envio {
  font-size: 18px;
  padding: 20px;
  margin: 12px 0;

  background: var(--base);
  border-radius: var(--border-radius);

  box-shadow:
    4px 4px 4px 0px var(--shadow-dark) inset,
    -4px -4px 4px 0px var(--shadow-light) inset;

  cursor: pointer;
  transition: var(--transition);
  overflow: hidden;
}


/* ===========================
   ALTURAS (modo acordeón simple)
   =========================== */
.Dtls-envio:not([open]) {
  height: 55px; /* altura del FAQ cerrado (ajústala si quieres) */
}

.Dtls-envio[open] {
  height: auto;
}


/* ===========================
   SUMMARY
   =========================== */
.Dtls-envio summary {
  padding: 5px 0;
  outline: none;
  font-weight: bold;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
}

/* Ocultar flecha nativa del details */
.Dtls-envio summary::-webkit-details-marker {
  display: none;
}


/* ===========================
   PÁRRAFO INTERNO (contenido FAQ)
   ANIMACIÓN SE REPITE SIEMPRE
   =========================== */
.Dtls-envio p {
  font-size: 16px;
  line-height: 1.3em;
  opacity: 0;
  margin: 10px 0 0 0;

  /* transición de salida ("fade out") */
  transition: opacity 0.3s ease;
}

/* Cuando se abre → animación aparece */
.Dtls-envio[open] p {
  animation: Dtls-envio-appear 0.6s ease forwards;
  opacity: 1;
}

/* Cuando se cierra → reset de animación */
.Dtls-envio:not([open]) p {
  animation: none;
  opacity: 0;
}


/* ===========================
   KEYFRAME DE APARICIÓN
   =========================== */
@keyframes Dtls-envio-appear {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}