/* ====== Base ====== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    font-family: Verdana, Arial, sans-serif; /* corregido 'san-serif' */
    font-size: 11px;
    color: #ffffff;
    background: #4b4743;
}

a:link, a:visited { color: #e6e154; text-decoration: none; font-weight: bold; } 
a:active, a:hover { color: #e6e154; text-decoration: underline; }

p { margin: 0; padding: 0; }

img {
    margin: 0;
    padding: 0;
    border: none;
    max-width: 100%;   /* ✅ imágenes fluidas */
    height: auto;      /* ✅ mantienen proporción */
}

/* Utilidades conservadas */
.cleaner { clear: both; width: 100%; height: 1px; font-size: 1px; }
.cleaner_with_height { clear: both; width: 100%; height: 30px; font-size: 1px; }
.cleaner_with_width { float: left; width: 20px; height: 30px; font-size: 1px; }

/* Botones (sin cambios visuales) */
.buy_now_button a{
    clear: both;
    text-align: center;
    display: block;
    width: 100px;
    padding: 4px 0 5px 0;
    margin-bottom: 10px; 
    background: url(images/templatemo_btn_02.jpg) no-repeat;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}
.detail_button a{
    clear: both;
    text-align: center;
    display: block;
    width: 100px;
    padding: 4px 0 5px 0;
    margin-bottom: 10px; 
    background: url(images/templatemo_btn_01.jpg) no-repeat;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

/* ====== Layout responsive ====== */

/* Contenedor: antes 960px fijos */
#o_container {
    max-width: 960px;     /* ✅ adapta a pantallas pequeñas */
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    background: #1c1c1b url(images/templatemo_bg.jpg) repeat-y;
}

/* Menú */
#o_menu {
    width: 100%;          /* ✅ antes 960px */
    min-height: 45px;
    background: url(images/templatemo_menu_bg.jpg) no-repeat center/cover;
}

/* Menú: de floats a Flex */
#o_menu ul {
    margin: 0;
    padding: 8px 10px;    /* antes 13px 0 0 0 y margin-left:250px */
    list-style: none;
    display: flex;        /* ✅ flex para responsividad */
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: center;
    align-items: center;
}

#o_menu ul li { display: inline-flex; }

#o_menu ul li a {
    display: inline-block;
    padding: 8px 16px;     /* ✅ táctil */
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #969547;
}

#o_menu li a:hover,
#o_menu li .current {
    color: #fcf88e;
}

/* Header */
#o_header {
    width: 100%;
    height: 285px; /* valor original para escritorio */
    padding: 0;
    margin: 0;
    background: url(images/ayame.png) no-repeat center top;
    background-size: contain; /* ✅ se adapta sin deformar */
}

/* Intermedio / Final */
#intermedio,
#final {
    width: 100%;  /* ✅ antes 960px */
    height: 20px;
}

/* Contenido */
#o_content {
    margin-left: 0;
}

/* Footer */
#o_footer {
    width: 100%;  /* ✅ antes 960px */
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #25211e;
    color: #999;
    background-color: #111110;
}

#o_footer a {
    color: #fff;
    font-weight: normal;
}

/* ====== Breakpoints ====== */

/* Tablet y abajo */
@media (max-width: 992px) {
    #o_header {
        height: 220px;            /* 🔧 Reducimos altura para tablets */
        background-position: center;
    }
}

/* Móviles */
@media (max-width: 768px) {
    body { font-size: 12px; }     /* ✅ un pelín más legible en móvil */

    #o_header {
        height: 180px;            /* 🔧 Compacto en móvil */
        background-size: contain;
        background-position: center;
    }

    #o_menu ul {
        padding: 10px 0;
        gap: 4px 8px;
        flex-direction: column;   /* ✅ menú en columna en móvil */
    }

    #o_menu ul li a {
        width: 100%;
        max-width: 420px;         /* botones anchos pero controlados */
        padding: 10px 18px;
    }

    #o_container {
        padding: 0 12px;          /* margen respirable en móvil */
    }

    #o_footer {
        padding: 16px 8px;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    #o_header { height: 150px; }  /* 🔧 aún más compacto */
}

/* Evitar que el título se sobreponga */
.card .title{
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* máx. 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  hyphens: auto;
  margin: 6px 0 4px;
}

/* Autor y precio en una sola línea con ellipsis si se pasan */
.card .meta, .card .price{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card .meta .autor{ text-decoration: none; }
.card .meta .autor:hover{ text-decoration: underline; }

/* ===== Forzar títulos de tarjetas a 2 líneas con corte ===== */
.grid-libros .card .title,
.card .title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;     /* máx. 2 líneas */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  margin: 6px 0 4px !important;
  max-height: calc(1.25em * 2 + 2px) !important; /* fallback si no soporta clamp */
  position: static !important;  /* por si algún estilo lo pone absoluto */
}

/* Evitar que el título se suba encima de otros elementos */
.grid-libros .card .body,
.card .body {
  display: flex !important;
  flex-direction: column !important;
}

.grid-libros .card .actions,
.card .actions {
  margin-top: auto !important;  /* empuja acciones hacia abajo */
}

/* Si algún h3 global tenía posición/transform raro, neutralízalo solo dentro de la tarjeta */
.grid-libros .card h3.title {
  position: static !important;
  transform: none !important;
}

/* Autor y precio en una sola línea con elipsis si se pasan */
.grid-libros .card .meta,
.grid-libros .card .price,
.card .meta,
.card .price {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Tema claro dentro del modal */
.o-box{
  background:#fff !important;
  color:#222 !important;
}
.o-box h1, .o-box h2, .o-box h3,
.o-box p, .o-box div, .o-box a, .o-box span{
  color:inherit !important;
}

/* Botones del modal con contraste */
.o-box .btn{
  background:#222;
  color:#fff !important;
  border:0;
}
.o-box .btn.o-ghost{
  background:transparent;
  border:1px solid #ccc;
  color:#333 !important;
}
.o-box .btn.o-sec{
  background:#f8f8f8;
  border:1px solid #aa9;
  color:#333 !important;
}
/* ===== Ajustes solo dentro del modal ===== */
.o-box .o-actions{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}

.o-box .btn{
  display:inline-block !important;
  width:auto !important;
  padding:8px 14px !important;
  font-size:14px !important;
  line-height:1.2 !important;
  border-radius:10px !important;
  box-shadow:none !important;
}

/* Por si hay una regla global que hace los botones 100% ancho */
.o-box .o-actions .btn{ width:auto !important; }

/* Un poco de orden general en el modal */
#modal .o-grid{ grid-template-columns:140px 1fr; gap:16px; }
#modal #m-portada{ max-height:180px; object-fit:cover; border-radius:8px; }
#modal .o-meta h2{ margin:0 0 8px; font-size:20px; line-height:1.25; }

/* ocultar cualquier cosa con o-hide */
.o-hide { display: none !important; }

/* Solo dentro del modal */
#modal .o-actions{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}

/* Anular reglas globales que hacen los botones 100% ancho */
#modal .btn,
#modal .o-actions .btn,
#modal .btn.primary,
#modal a.btn,
#modal button.btn{
  display:inline-block !important;
  width:auto !important;
  padding:8px 14px !important;
  font-size:14px !important;
  line-height:1.2 !important;
  border-radius:10px !important;
}

/* Acciones en la tarjeta */
.card .actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Botón blanco tipo “ghost” en la tarjeta */
.card .btn.o-ghost{
  background:#fff !important;
  color:#222 !important;
  border:1px solid #ccc !important;
  display:inline-block !important;
  width:auto !important;
  padding:8px 14px !important;
  font-size:14px !important;
  line-height:1.2 !important;
  border-radius:10px !important;
  cursor:pointer;
}

/* Centrar el único botón "Ver más" en las tarjetas */
.card .actions{
  display:flex !important;
  justify-content:center !important;
}

/* Estilo del botón blanco en la tarjeta */
.card .btn.o-ghost{
  background:#fff !important;
  color:#222 !important;
  border:1px solid #ccc !important;
  padding:8px 14px !important;
  border-radius:10px !important;
  width:auto !important;
  display:inline-block !important;
}

.o-price{ margin:6px 0 10px; font-weight:600; }

/* Orden de venta */
.o-actions-bottom{
  margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.o-actions-bottom .o-price{ font-weight:700; font-size:16px; }
.o-actions-bottom .o-buttons{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
#modal .o-buttons .btn{ display:inline-block !important; width:auto !important; padding:8px 14px !important; border-radius:10px !important; }

/* Tráiler: poster click-to-play */
.o-trailer-poster{
  width:100%; height:360px; border:0; border-radius:8px; cursor:pointer;
  background-size:cover; background-position:center; position:relative;
}
.o-trailer-poster::after{
  content:"?"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:56px; line-height:1; background:rgba(0,0,0,.35); color:#fff; border-radius:8px;
}
#modal #m-trailer{ border-radius:8px; }
@media (max-width:720px){ .o-trailer-poster{ height:220px; } }

/* ==== Modal 3 columnas (desktop) ==== */
#modal .o-grid-3{
  display:grid; grid-template-columns: 210px 1fr 420px; gap:16px; align-items:start;
}

/* Portada sin recortes */
#modal .col.portada{ background:#fff; padding:8px; border-radius:10px; box-shadow:0 0 0 1px rgba(0,0,0,.06) inset; }
#modal #m-portada{ width:100%; height:100%; max-height:340px; object-fit:contain; display:block; }

/* Trailer */
#modal .col.trailer{ min-width:0; }
#modal .o-trailer-poster{
  width:100%; height:320px; border-radius:8px; background-size:cover; background-position:center;
  border:0; cursor:pointer; position:relative;
}
#modal .o-trailer-poster::after{
  content:"?"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:56px; background:rgba(0,0,0,.35); color:#fff; border-radius:8px;
}
#modal #m-trailer{ border-radius:8px; }

/* CTA final */
.o-actions-bottom{ margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.o-actions-bottom .o-price{ font-weight:700; font-size:16px; }
.o-actions-bottom .o-buttons{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
#modal .o-buttons .btn{ display:inline-block !important; width:auto !important; padding:8px 14px !important; border-radius:10px !important; }
#modal .o-small{ padding:6px 10px !important; font-size:12px !important; }

/* Expandir tráiler a lo ancho */
#modal.o-wide .o-grid-3{ grid-template-columns: 1fr; }
#modal.o-wide .col.trailer{ grid-column: 1 / -1; }
#modal.o-wide #m-trailer-embed iframe{ height:60vh; }
#modal.o-wide .col.portada{ display:none; } /* opcional: ocultar portada al ampliar */

/* Responsivo */
@media (max-width: 1100px){
  #modal .o-grid-3{ grid-template-columns: 180px 1fr; }
  #modal .col.trailer{ grid-column: 1 / -1; }
}
@media (max-width: 700px){
  #modal .o-grid-3{ grid-template-columns: 1fr; }
  #modal #m-portada{ max-height:240px; }
}