/* El layout de tibia.com, con sus medidas: las del basic.css de MyAAC y de la version
   actualizada de OTServBR (opentibiabr/myaac). Columna de menu de 180 px, cajas de
   pergamino con cabecera verde y titulo en Martel, barra de "Players Online" arriba del
   contenido y themeboxes de piedra a la derecha. Los textos son HTML, no imagenes, para
   que se traduzcan; no hay logo de Tibia ni cinta de CipSoft. Va ultima en index.php. */

/* La Martel del tema trae vacios los digitos y la puntuacion de U+0021 a U+0040: esos
   caracteres salen de Georgia, que es la siguiente en cada font-family. */
@font-face{font-family:'Martel';src:url(fonts/martel.ttf) format('truetype');font-display:swap;unicode-range:U+0020,U+0041-007E,U+00A0-00AC,U+00AE-017F,U+2013-2026,U+2192}

html{background:#051122}
body.oc-body{margin:0;background:linear-gradient(to bottom,#05112200 0,#05112200 420px,#051122e6 760px,#051122 900px),url(images/brand/otera-adventure.webp) top center/1600px auto no-repeat,#051122;color:#5a2800;font:9pt/1.35 Verdana,Arial,'Times New Roman',sans-serif}
#otera.oc{max-width:1200px;min-height:0;margin:0 auto;padding:0;background:none;color:#5a2800;font:9pt/1.35 Verdana,Arial,'Times New Roman',sans-serif;container-type:normal;color-scheme:light}
#otera.oc *{box-sizing:border-box}
#otera.oc [hidden]{display:none!important}

/* Las tres columnas, a 155 px del borde como el ContentRow de tibia.com. */
#otera .oc-frame{display:grid;grid-template-columns:180px minmax(0,1fr) 180px;column-gap:10px;align-items:start;padding:155px 15px 0}
#otera .oc-left{position:relative;min-width:0;font:bold 10pt/12pt Arial,sans-serif}
#otera .oc-center{position:relative;min-width:0;container-type:inline-size;outline:0}
#otera .oc-right{position:relative;min-width:0;margin-left:15px;text-align:center}
#otera .oc-menu-toggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
#otera .oc-menu-button{display:none}

/* Arriba de las columnas: el logo, el lema y la criatura de la semana en su pedestal. */
#otera .oc-logo{position:absolute;top:-128px;left:-6px;display:block;line-height:0;z-index:5}
#otera .oc-logo img{width:192px;height:auto;filter:drop-shadow(0 3px 3px #000)}
#otera .oc-motto{position:absolute;top:-62px;left:0;right:0;margin:0;text-align:center;font:24px/1.15 'Martel',Georgia,serif;color:#f0d1a4;text-shadow:0 0 4px #000,0 2px 2px #000,0 0 10px #000}
/* El pedestal de tibia.com con la caja de jugadores en linea (pedestal-and-online.gif):
   el numero va en la placa negra, en el dorado y la Verdana 7pt del original. */
#otera .oc-pedestal{position:absolute;top:-121px;left:24px;width:132px;height:111px;z-index:10}
#otera .oc-pedestal-base{position:absolute;left:0;top:0}
#otera a.oc-pedestal-monster{position:absolute;left:28px;top:-24px;z-index:2;display:block}
/* La placa interior del sprite: x 15-117, y 73-91. Dos lineas de 9 px entran justas. */
#otera a.oc-pedestal-online{position:absolute;left:17px;top:73px;width:98px;height:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;color:#cfa600!important;font:8px/9px Verdana,Arial,sans-serif;text-align:center;text-decoration:none}
#otera a.oc-pedestal-online b{font-weight:bold}
#otera a.oc-pedestal-online:hover{color:#ffd18c!important}
#otera a.oc-pedestal-online.is-off{color:#e03a24!important;font-weight:bold}

/* Caja de cuenta y caja de descarga: piedra con cadenas y el boton mediano. */
#otera .oc-smallbox{position:relative;width:180px;margin:12px 0 24px;padding:0 10px;background:url(images/general/chain.gif) 5px 0 repeat-y,url(images/general/chain.gif) 168px 0 repeat-y}
#otera .oc-smallbox:before,#otera .oc-smallbox:after{content:'';position:absolute;left:0;width:180px;height:12px;z-index:2}
#otera .oc-smallbox:before{top:-12px;background:url(images/general/box-top.gif) no-repeat}
#otera .oc-smallbox:after{bottom:-12px;background:url(images/general/box-bottom.gif) no-repeat}
#otera .oc-smallbox-row{width:160px;background:url(images/loginbox/loginbox-textfield-background.gif) repeat-y;text-align:center}
#otera .oc-smallbox-button{height:39px;padding:1px 5px}
#otera .oc-login-row{min-height:13px;padding:0 0 1px;line-height:13px}
#otera a.oc-mbutton{display:flex;align-items:center;justify-content:center;width:150px;height:37px;background:url(images/global/buttons/mediumbutton.gif) no-repeat;color:#ffd18c!important;font:bold 13px/1 Verdana,Arial,sans-serif;text-decoration:none;text-shadow:-1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,1px 0 0 #000,1px 1px 0 #000,0 1px 0 #000,-1px 1px 0 #000,-1px 0 0 #000;white-space:nowrap}
#otera a.oc-mbutton:hover{background-image:url(images/global/buttons/mediumbutton-over.gif)}
#otera a.oc-login-link{color:#d5c3af!important;font:10px/13px Verdana,Arial,sans-serif;text-decoration:none;letter-spacing:.3px}
#otera a.oc-login-link:hover{color:#fff!important}

/* El menu: botones de piedra con icono animado, luces verdes y submenus verde oscuro. */
#otera .oc-menu{position:relative;width:180px;margin-top:24px;padding:0 5px}
#otera .oc-menu:before,#otera .oc-menu:after{content:'';position:absolute;left:0;width:180px;height:12px;z-index:2}
#otera .oc-menu:before{top:-12px;background:url(images/general/box-top.gif) no-repeat}
#otera .oc-menu:after{bottom:-12px;background:url(images/general/box-bottom.gif) no-repeat}
#otera .oc-cat{margin:0}
#otera .oc-cat summary{position:relative;display:block;width:170px;height:32px;background:url(images/menu/button-background.gif) no-repeat;cursor:pointer;list-style:none;user-select:none}
#otera .oc-cat summary::-webkit-details-marker{display:none}
#otera .oc-cat summary:hover{background-image:url(images/menu/button-background-over.gif)}
#otera .oc-cat summary:after{content:'';position:absolute;top:20px;right:-2px;width:12px;height:12px;background:url(images/general/plus.gif) no-repeat}
#otera .oc-cat[open] summary:after{background-image:url(images/general/minus.gif)}
#otera .oc-cat-lights{position:absolute;inset:0;background:url(images/menu/green-light.gif) 3px 2px no-repeat,url(images/menu/green-light.gif) right 3px top 2px no-repeat,url(images/menu/green-light.gif) 3px 28px no-repeat}
#otera .oc-cat[open] .oc-cat-lights{display:none}
#otera .oc-cat-icon{position:absolute;top:0;left:8px;width:32px;height:32px;background:center no-repeat}
#otera .oc-cat-label{position:absolute;top:5px;left:42px;width:116px;height:22px;overflow:hidden;font:18px/22px 'Martel',Georgia,serif;color:#e3d6c1;text-shadow:1px 1px 0 #000,-1px 0 0 #000,0 -1px 0 #000;white-space:nowrap}
#otera .oc-cat summary:hover .oc-cat-label{color:#fff}
#otera .oc-submenu{position:relative;width:160px;margin:0 5px;background:#0d2e2b}
#otera .oc-submenu:before,#otera .oc-submenu:after{content:'';position:absolute;top:0;bottom:0;width:7px;background:url(images/general/chain.gif) repeat-y}
#otera .oc-submenu:before{left:-5px}
#otera .oc-submenu:after{right:-4px}
#otera .oc-submenu a{display:block;padding:2px 2px 2px 22px;border-bottom:1px solid #4b7874;color:#d7d7d7!important;font:bold 10pt/12pt Arial,sans-serif;text-decoration:none;overflow:hidden}
#otera .oc-submenu a:hover{background:#14433f;color:#fff!important}
#otera .oc-submenu a[aria-current=page]{background:url(images/menu/icon-activesubmenu.gif) 7px center no-repeat;color:#fff!important}
#otera .oc-submenu a[aria-current=page]:hover{background-color:#14433f}
#otera .oc-submenu a.oc-store-link{color:#ffd18c!important}

/* Cajas de contenido: la Box de tibia.com, pieza por pieza. */
#otera .oc-box{position:relative;margin:5px 5px 18px;padding:6px 0;border-left:2px solid #3a3738;border-right:2px solid #3a3738;background:url(images/content/border-1.gif) left top repeat-x,url(images/content/border-1.gif) left bottom repeat-x,#debb9d}
#otera .oc-box:before,#otera .oc-box:after{content:'';position:absolute;height:17px;z-index:5;pointer-events:none}
#otera .oc-box:before{top:-4px;left:-7px;right:-7px;background:url(images/content/corner-tl.gif) left top no-repeat,url(images/content/corner-tr.gif) right top no-repeat}
#otera .oc-box:after{bottom:-4px;left:-8px;right:-8px;background:url(images/content/corner-bl.gif) left bottom no-repeat,url(images/content/corner-br.gif) right bottom no-repeat}
#otera .oc-box-head{position:relative;height:24px;padding:0 9px;background:url(images/content/title-background-green.gif) repeat-x}
#otera .oc-box-head h1,#otera .oc-box-head h2{margin:0!important;padding:0;font:18px/27px 'Martel',Georgia,serif!important;color:#f0d1a4!important;letter-spacing:0;text-shadow:none;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#otera .oc-box-body{margin:4px;padding:10px;border:solid #793d03;border-width:2px 1px;background:#fff2db url(images/content/scroll.gif);color:#5a2800;font:9pt/1.45 Verdana,Arial,'Times New Roman',sans-serif}
#otera .oc-box-body .ot-page-content{padding:0}
#otera .oc-box-body .ot-page-content.ot-page-landing{padding:0}
#otera .oc-box-body p{margin:0 0 9px}
#otera .oc-box-body a:not([class]),#otera .oc-box-body a.oc-link{color:#004294;font-weight:bold;text-decoration:none}
#otera .oc-box-body a:not([class]):hover,#otera .oc-box-body a.oc-link:hover{color:#0063dc;text-decoration:underline}

/* La barra de arriba del contenido: descarga, idiomas y jugadores en linea. */
#otera .oc-infobar{margin-bottom:14px}
#otera .oc-infobar-row{display:flex;align-items:center;gap:6px 14px;min-height:28px;padding:2px 10px;background:url(images/global/content/newsheadline_background.gif) repeat-x;background-size:auto 100%;border-left:1px solid #000;border-right:1px solid #000;font:10px/1.3 Verdana,Arial,sans-serif;color:#fff}
#otera a.oc-infobar-item{display:inline-flex;align-items:center;gap:5px;color:#fff!important;font:10px/1 Verdana,Arial,sans-serif;text-decoration:none;white-space:nowrap}
#otera a.oc-infobar-item:hover{text-decoration:underline}
#otera a.oc-infobar-item b{color:#fff;font-weight:bold}
#otera .oc-infobar-online{margin-left:auto}
/* En escritorio el numero vive en el pedestal; en pantallas sin pedestal, en la barra. */
@media(min-width:1100px){#otera a.oc-infobar-online{display:none}}
#otera .oc-infobar .ot-langs{display:flex;gap:2px;padding:0;background:none;border:0}
#otera .oc-infobar .ot-lang{gap:4px;padding:1px 4px;border:1px solid transparent;color:#fff!important;font-size:10px;opacity:.75;text-decoration:none}
#otera .oc-infobar .ot-lang:hover{opacity:1;text-decoration:underline}
#otera .oc-infobar .ot-lang.is-current{opacity:1;border-color:#ffffff40;background:#00000033}

/* Themeboxes: las cajas de piedra de la columna derecha de tibia.com. */
#otera .oc-theme{width:180px;margin:0 0 10px;text-align:center}
#otera .oc-theme h2{height:45px;margin:0;padding:21px 14px 0;background:url(images/themeboxes/stone/box_top.png) no-repeat;font:16px/22px 'Martel',Georgia,serif;color:#e3d6c1;text-shadow:1px 1px 0 #000,-1px 0 0 #000,0 -1px 0 #000;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#otera .oc-theme-body{position:relative;padding:6px 14px 4px;background:url(images/themeboxes/stone/box_bg.png) repeat-y;color:#d5c3af;font:11px/1.45 Verdana,Arial,sans-serif}
#otera .oc-theme-body:after{content:'';display:block;height:35px;margin:4px -14px -24px;background:url(images/themeboxes/stone/box_bottom.png) no-repeat}
#otera .oc-theme{padding-bottom:20px}
#otera .oc-theme-body p{margin:0 0 8px}
#otera .oc-theme-body a{color:#ffd18c;font-weight:bold;text-decoration:none}
#otera .oc-theme-body a:hover{color:#fff;text-decoration:underline}
#otera a.oc-tbutton{display:flex;align-items:center;justify-content:center;width:148px;height:30px;margin:4px auto 6px;background:url(images/themeboxes/stone/button.png) no-repeat;color:#ffd18c!important;font:bold 12px/1 Verdana,Arial,sans-serif;text-decoration:none!important;text-shadow:-1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,1px 0 0 #000,1px 1px 0 #000,0 1px 0 #000,-1px 1px 0 #000,-1px 0 0 #000;white-space:nowrap}
#otera a.oc-tbutton:hover{background-image:url(images/themeboxes/stone/button_over.png)}
#otera a.oc-theme-link{display:inline-block;font:10px/1.4 Verdana,Arial,sans-serif;color:#d5c3af!important;font-weight:normal}
#otera a.oc-theme-link:hover{color:#fff!important}
#otera .oc-state{margin:0 0 6px!important;font-weight:bold;color:#fff}
#otera .oc-state:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#38b52a;box-shadow:0 0 5px #4ee23b}
#otera .oc-state.is-off:before{background:#b3261a;box-shadow:none}
#otera .oc-facts{margin:0;text-align:left}
#otera .oc-facts div{display:flex;justify-content:space-between;gap:8px;padding:2px 0;border-bottom:1px solid #ffffff1a}
#otera .oc-facts div:last-child{border-bottom:0}
#otera .oc-facts dt{margin:0}
#otera .oc-facts dd{margin:0;color:#fff;font-weight:bold;text-align:right}
#otera .oc-top5{margin:0 0 4px;padding:0;list-style:none;text-align:left}
#otera .oc-top5 li{display:flex;align-items:center;gap:8px;min-height:40px}
#otera .oc-top5 li img{flex:0 0 19px}
#otera .oc-top5 span{min-width:0;display:flex;flex-direction:column}
#otera .oc-top5 a{color:#fff!important;font:bold 11px/1.3 Verdana,Arial,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#otera .oc-top5 a.is-online{color:#5fe04f!important}
#otera .oc-top5 small{color:#a8977e;font-size:10px}
#otera a.oc-weekshot{display:block;line-height:0;border:1px solid #000;margin-bottom:6px}
#otera a.oc-weekshot img{width:100%;height:auto}
#otera .oc-small{font-size:10px;font-style:italic;margin:0!important}
#otera .oc-coin{display:block;width:56px;height:56px;margin:0 auto 6px}

/* Pie, como el de tibia.com: chico y blanco. */
#otera .oc-footer{max-width:none;margin:0;padding:4px 0 20px;background:none;border:0;color:#fff;font:7pt/1.8 Verdana,Arial,sans-serif;text-align:center}
#otera .oc-footer a{display:inline;padding:0;color:#fff;text-decoration:none}
#otera .oc-footer a:hover{text-decoration:underline}

/* Botones dentro del contenido: el mediano y el chico, con el texto de tibia.com. */
#otera a.oc-bigbutton,#otera a.oc-button{display:inline-flex;align-items:center;justify-content:center;color:#ffd18c!important;font:bold 12px/1 Verdana,Arial,sans-serif;text-decoration:none!important;text-shadow:-1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,1px 0 0 #000,1px 1px 0 #000,0 1px 0 #000,-1px 1px 0 #000,-1px 0 0 #000;white-space:nowrap}
#otera a.oc-bigbutton{width:150px;height:37px;background:url(images/global/buttons/mediumbutton.gif) no-repeat}
#otera a.oc-bigbutton:hover{background-image:url(images/global/buttons/mediumbutton-over.gif)}
#otera a.oc-button{width:135px;height:25px;font-size:11px;background:url(images/global/buttons/sbutton.gif) no-repeat}
#otera a.oc-button:hover{background-image:url(images/global/buttons/sbutton_over.gif)}

/* La portada sobre el pergamino. */
#otera .oc-more{text-align:right;margin:4px 0 0!important}
#otera .oc-intro,#otera .oc-lead{font-size:9pt;line-height:1.55;margin:10px 0!important}
#otera .oc-lead{font-weight:bold}
#otera .oh-home h3{font:bold 10pt/1.35 Verdana,Arial,sans-serif;color:#5a2800;margin:0 0 5px;letter-spacing:0}
#otera .oh-heading{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid #c5ab84}
#otera .oh-heading h2{font:22px/1.2 'Martel',Georgia,serif;color:#5a2800;margin:0 0 3px;letter-spacing:0}
#otera .oh-heading h2 em{font-style:normal;color:#8b4a00}
#otera .oh-heading p{margin:0!important}

#otera .oh-hero{position:relative;overflow:hidden;aspect-ratio:16/7;min-height:240px;border:1px solid #000;background:#000 url(images/video/otera-hero.jpg) center/cover}
#otera .oh-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#otera .oh-hero-copy{position:absolute;left:0;right:0;bottom:0;padding:56px 16px 14px;background:linear-gradient(transparent,#000000b8 45%,#000000e0)}
#otera .oh-eyebrow{margin:0 0 4px!important;font:bold 10px/1.4 Verdana,Arial,sans-serif;letter-spacing:1.5px;color:#ffd18c}
#otera .oh-hero h1{margin:0 0 8px;font:clamp(24px,4.6cqw,40px)/1.05 'Martel',Georgia,serif!important;color:#f0d1a4!important;letter-spacing:0;text-shadow:0 2px 3px #000}
#otera .oh-hero h1 em{font-style:normal;color:#fff!important}
#otera .oh-pillars{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
#otera .oh-pillars li{padding:3px 10px;border:1px solid #e7c454;background:#00000080;color:#ffd18c;font:bold 11px/1.3 Verdana,Arial,sans-serif;text-transform:uppercase;letter-spacing:.6px}
#otera .oh-art-label{position:absolute;top:7px;right:9px;font:9px/1 Verdana,Arial,sans-serif;letter-spacing:1px;color:#ffffffb0;text-shadow:0 1px 2px #000}
/* El lanzamiento (otera_launch_phase): lo de antes y lo de despues de abrir. otera.js pone
   is-open a la hora justa. */
#otera .ot-launch:not(.is-open) [data-when=open],#otera .ot-launch.is-open [data-when=before]{display:none!important}
#otera .oh-countdown{display:flex;gap:6px;margin:0 0 6px}
#otera .oh-countdown div{min-width:52px;padding:5px 6px 4px;border:1px solid #e7c454;background:#000000b0;text-align:center}
#otera .oh-countdown b{display:block;font:bold 22px/1 Verdana,Arial,sans-serif;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}
#otera .oh-countdown span{display:block;margin-top:3px;font:bold 9px/1.2 Verdana,Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:#ffd18c}
#otera .oh-launch-local{margin:0!important;font:11px/1.3 Verdana,Arial,sans-serif;color:#f0d1a4;text-shadow:0 1px 2px #000}
#otera .oh-launch-note{margin:10px 0!important;padding:7px 10px;border:1px solid #c9a35a;border-left-width:4px;background:#f6e7c4;font-size:9pt;line-height:1.5}
#otera a.oc-launchbar{display:block;margin:0 0 14px;padding:6px 10px;border:1px solid #000;outline:1px solid #e7c454;outline-offset:-3px;background:#1c130b;color:#f0d1a4!important;font:11px/1.45 Verdana,Arial,sans-serif;text-align:center;text-decoration:none}
#otera a.oc-launchbar b{color:#ffd18c}
#otera a.oc-launchbar:hover{background:#2a1c10;text-decoration:underline}
#otera a.oc-launchbar [data-cd-short]{color:#fff;font-weight:bold;font-variant-numeric:tabular-nums;white-space:nowrap}
#otera .oh-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 12px}
#otera .oh-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #000}
#otera .oh-facts>div{padding:6px 8px;background:#f1e0c6}
#otera .oh-facts>div:nth-child(even){background:#d5c0a1}
#otera .oh-facts>div+div{border-left:1px solid #faf0d7}
#otera .oh-facts strong{display:block;font:bold 10pt/1.3 Verdana,Arial,sans-serif;color:#5a2800}
#otera .oh-facts span{display:block;font-size:10px;line-height:1.4}

/* Noticias: el NewsHeadline de tibia.com. */
#otera .oc-news{margin:0 0 12px}
#otera .oc-news-head{position:relative;height:28px;margin:0 0 6px;background:url(images/global/content/newsheadline_background.gif) repeat-x;border-left:1px solid #000;border-right:1px solid #000}
#otera .oc-news-head img{position:absolute;top:-1px;left:5px}
#otera .oc-news-head time{position:absolute;top:10px;left:50px;width:80px;font:7pt/1 Verdana,Arial,sans-serif;color:#fff}
#otera .oc-news-head h3{position:absolute;top:7px;left:135px;right:8px;margin:0!important;font:bold 10pt/1.3 Verdana,Arial,sans-serif!important;color:#fff!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#otera .oc-news-head h3 a{color:#fff!important;text-decoration:none}
#otera .oc-news-head h3 a:hover{text-decoration:underline}
#otera .oc-news p{margin:0!important}

#otera .oh-capture{position:relative;display:block;line-height:0;border:1px solid #000;background:#000}
#otera .oh-capture img{display:block;width:100%;height:auto}
#otera .oh-enlarge{position:absolute;right:6px;bottom:6px;padding:3px 6px;background:#000000c0;border:1px solid #e7c454;color:#ffd18c;font:bold 10px/1 Verdana,Arial,sans-serif;opacity:0;transition:opacity .15s}
#otera .oh-capture:hover .oh-enlarge,#otera .oh-capture:focus-visible .oh-enlarge{opacity:1}
#otera .oh-figure{margin:0}
#otera .oh-proof{margin:3px 0 0!important;font-size:7pt;font-style:italic;color:#7a5a36}

#otera .oh-zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px}
#otera .oh-zones h3{margin:6px 0 3px}
#otera .oh-zones p{font-size:8pt;margin:0!important}

/* Las tablas: el TableContainer de tibia.com. */
#otera .oc-table{width:100%;border-collapse:collapse;border:1px solid #000;margin:0;font:9pt/1.4 Verdana,Arial,sans-serif}
#otera .oc-table caption{padding:3px 10px 4px;background:url(images/content/table-headline-border.gif) left top repeat-x,url(images/content/table-headline-border.gif) left bottom repeat-x,#5f4d41;border:1px solid #000;border-bottom:0;color:#fff;font:bold 10pt/1.4 Verdana,Arial,sans-serif;text-align:left}
#otera .oc-table th,#otera .oc-table td{padding:3px 6px;border:1px solid #faf0d7;text-align:left;vertical-align:top;color:#5a2800;font-size:9pt}
#otera .oc-table th{background:#d5c0a1;font-weight:bold;white-space:nowrap}
#otera .oc-table td{background:#f1e0c6}
#otera .oc-table tr:nth-child(even) th,#otera .oc-table tr:nth-child(even) td{background:#d5c0a1}
#otera .oc-table tr:nth-child(even) th{background:#c9b190}

#otera .oh-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid #000}
#otera .oh-rules article{padding:8px;background:#f1e0c6;border:1px solid #faf0d7}
#otera .oh-rules article:nth-child(even){background:#d5c0a1}
#otera .oh-rules span{display:inline-block;margin-bottom:5px;padding:1px 6px;background:#5f4d41;color:#fff;font:bold 8pt/1.4 Verdana,Arial,sans-serif;letter-spacing:.5px}
#otera .oh-rules p{margin:0!important;font-size:8pt}

#otera .oh-tabs{display:flex;flex-wrap:wrap;gap:0;margin:0 0 10px;border-bottom:2px solid #5f4d41}
#otera .oh-tabs button{flex:1 1 auto;margin:0 2px 0 0;padding:5px 10px;background:#d5c0a1;border:1px solid #000;border-bottom:0;color:#5a2800;font:bold 9pt/1.3 Verdana,Arial,sans-serif;min-height:28px}
#otera .oh-tabs button:hover{background:#f1e0c6}
#otera .oh-tabs button[aria-selected=true]{background:#5f4d41;color:#fff}
#otera .oh-panel{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:12px;align-items:start}
#otera .oh-tag{margin:0 0 3px!important;font:bold 8pt/1.4 Verdana,Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:#8b4a00}
#otera .oh-panel-copy h3{font:20px/1.2 'Martel',Georgia,serif!important}
#otera .oh-list{margin:0 0 8px;padding:0;list-style:none}
#otera .oh-list li{position:relative;padding:2px 0 2px 18px;font-size:8pt;line-height:1.5}
#otera .oh-list li:before{content:'';position:absolute;left:0;top:2px;width:12px;height:15px;background:url(images/global/content/bullet.gif) no-repeat}
#otera .oh-list-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:10px}
#otera .oh-words{display:flex;flex-wrap:wrap;gap:4px;margin:0!important}
#otera .oh-home code{background:#d5c0a1;color:#5a2800;padding:1px 5px;font:8pt/1.4 Consolas,Menlo,monospace}
#otera .oh-home .oh-words code{background:#5f4d41;color:#fff}

#otera .oh-split{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:12px;align-items:start}
#otera .oh-split-even{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
#otera .oh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 8px;border:1px solid #000}
#otera .oh-stats div{padding:5px 6px;background:#f1e0c6;text-align:center}
#otera .oh-stats div:nth-child(even){background:#d5c0a1}
#otera .oh-stats dt{font:22px/1.1 'Martel',Georgia,serif;color:#5a2800}
#otera .oh-stats dd{margin:2px 0 0;font-size:7pt;line-height:1.35}
#otera .oh-inset{margin:0 0 8px;padding:4px;background:#000;border:1px solid #000}
#otera .oh-inset span{display:block;padding:1px 2px 4px;font:bold 8px/1 Verdana,Arial,sans-serif;letter-spacing:1px;color:#ffd18c}
#otera .oh-inset video{display:block;width:100%;height:auto;background:#111}
#otera .oh-big{font:36px/1 'Martel',Georgia,serif!important;color:#2a6d1d}
#otera .oh-big small{font-size:14px;color:#5a2800}

#otera .oh-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#otera .oh-more article{display:grid;grid-template-columns:140px minmax(0,1fr);gap:8px;align-items:start;padding:6px;background:#f1e0c6;border:1px solid #000}
#otera .oh-more article p{margin:0!important;font-size:8pt}
#otera .oh-premium{display:inline-block;padding:1px 4px;background:#8b5a00;color:#fff3c6;font:bold 7px/1.4 Verdana,Arial,sans-serif;letter-spacing:1px;vertical-align:middle}
#otera .oh-more .oh-items{grid-template-columns:1fr}
#otera .oh-item-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px}
#otera .oh-item-row figure{margin:0;width:60px;text-align:center}
#otera .oh-item-row img{width:44px;height:44px;image-rendering:pixelated;background:#3e3326;border:1px solid #000;box-shadow:inset 0 0 0 1px #8a7656}
#otera .oh-item-row figcaption{font-size:7pt;line-height:1.25;margin-top:2px}

#otera .oh-start-art{margin:0;line-height:0;border:1px solid #000}
#otera .oh-start-art img{width:100%;height:auto}
#otera .oh-steps{margin:0;padding:0;list-style:none}
#otera .oh-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;padding:6px 0;border-bottom:1px solid #c5ab84}
#otera .oh-steps li:last-child{border-bottom:0}
#otera .oh-steps span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:#5f4d41;border:1px solid #000;color:#fff;font:18px/1 'Martel',Georgia,serif}
#otera .oh-steps p{margin:0 0 2px!important;font-size:8pt}

#otera .oh-faq{border:1px solid #000}
#otera .oh-faq details{background:#f1e0c6;border-bottom:1px solid #faf0d7}
#otera .oh-faq details:nth-child(even){background:#d5c0a1}
#otera .oh-faq summary{position:relative;padding:5px 28px 5px 8px;font-weight:bold;cursor:pointer;list-style:none}
#otera .oh-faq summary::-webkit-details-marker{display:none}
#otera .oh-faq summary:after{content:'';position:absolute;right:8px;top:6px;width:12px;height:12px;background:url(images/general/plus.gif) no-repeat}
#otera .oh-faq details[open] summary:after{background-image:url(images/general/minus.gif)}
#otera .oh-faq details p{margin:0!important;padding:0 8px 7px;font-size:8pt}

/* El celular: las capturas van dentro de un telefono acostado, con su marco negro. */
#otera .oh-phone{padding:6px;background:#0b0a09;border-radius:20px;box-shadow:inset 0 0 0 1px #2f2a24,0 0 0 1px #000,0 0 0 3px #4a3f33,0 6px 14px #00000059}
#otera .oh-phone .oh-capture{border:0;border-radius:14px;overflow:hidden}
#otera .oh-mobile-hero{margin:0 0 12px}
#otera .oh-mobile-hero .oh-proof{margin-top:6px!important;text-align:center}
#otera .oh-mobile-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px}
#otera .oh-mobile-pair .oh-phone{padding:4px;border-radius:14px}
#otera .oh-mobile-pair .oh-capture{border-radius:10px}
#otera .oh-mobile-pair figcaption{margin-top:8px}
#otera .oh-mobile-pair figcaption p{margin:0!important;font-size:8pt}
#otera .oh-mobile-how{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);padding-top:10px;border-top:1px solid #c5ab84}
#otera .oh-mobile-note{font-size:8pt;color:#6b4a24}
#otera .oh-install{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 12px;align-items:start;padding:10px;background:#f1e0c6;border:1px solid #000}
#otera .oh-phone-tall{grid-row:span 3;padding:4px;border-radius:16px}
#otera .oh-phone-tall img{display:block;width:100%;height:auto;border-radius:12px}
#otera .oh-install-steps{margin:0;padding:0 0 0 16px;font-size:8pt;line-height:1.5}
#otera .oh-install-steps li{margin:0 0 4px}
#otera .oh-install .oc-bigbutton{margin-top:2px}
#otera .oh-qr{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:6px;padding-top:8px;border-top:1px solid #c5ab84}
#otera .oh-qr img{flex:none;width:72px;height:72px;image-rendering:pixelated;border:1px solid #5f4d41}
#otera .oh-qr p{margin:0!important;font-size:8pt}
#otera a.oc-infobar-play svg{color:#ffd18c}
@media(pointer:coarse){#otera .oh-qr{display:none}}

/* Dialogos: captura ampliada y trailer. */
#otera .oc-dialog{max-width:min(1120px,94vw);max-height:94vh;padding:6px;background:#051122;border:2px solid #3a3738;outline:1px solid #793d03;box-shadow:0 10px 40px #000;color:#d5c3af}
#otera .oc-dialog::backdrop{background:#000000d0}
#otera .oc-dialog img,#otera .oc-dialog video{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;background:#000}
#otera .oc-dialog p{margin:6px 4px 2px;font-size:10px;color:#d5c3af}
#otera .oc-dialog .ow-close{position:absolute;top:8px;right:8px;z-index:2;width:32px;height:32px;padding:0;background:#000000c0;border:1px solid #793d03;color:#ffd18c;font:bold 20px/28px Verdana,Arial,sans-serif}
#otera .oc-dialog .ow-close:hover{background:#3a3738}

/* Pantallas medianas: las themeboxes bajan debajo del contenido. */
@media(max-width:1099px){
#otera .oc-frame{grid-template-columns:180px minmax(0,1fr)}
#otera .oc-right{grid-column:2;margin-left:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 12px;padding-top:10px}
#otera .oc-pedestal{display:none}
}
@container(max-width:640px){
#otera .oh-facts,#otera .oh-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
#otera .oh-facts>div:nth-child(3){border-left:0}
#otera .oh-zones{grid-template-columns:1fr}
#otera .oh-panel,#otera .oh-split,#otera .oh-split-even,#otera .oh-more{grid-template-columns:1fr}
#otera .oh-list-cols{grid-template-columns:1fr}
#otera .oh-mobile-how{grid-template-columns:1fr}
}
@container(max-width:420px){
#otera .oh-rules{grid-template-columns:1fr}
#otera .oh-more article{grid-template-columns:1fr}
#otera .oh-mobile-pair{grid-template-columns:1fr}
#otera .oh-phone{padding:4px;border-radius:14px}
#otera .oh-phone .oh-capture{border-radius:10px}
#otera .oh-tabs button{flex-basis:45%}
#otera .oh-hero{aspect-ratio:auto;min-height:290px}
#otera .oh-hero-copy{padding:48px 12px 12px}
#otera .oh-art-label{display:none}
#otera .oh-countdown div{min-width:0;flex:1}
#otera .oh-countdown b{font-size:19px}
#otera .oc-table th{white-space:normal}
#otera .oc-news-head time{display:none}
#otera .oc-news-head h3{left:45px}
}

/* Telefono: una columna; el menu se abre con un boton. */
@media(max-width:760px){
body.oc-body{background-size:auto,1100px auto,auto}
#otera .oc-frame{grid-template-columns:minmax(0,1fr);padding:16px 16px 0}
#otera .oc-left{display:flex;flex-direction:column;align-items:center}
#otera .oc-logo{position:static;margin:0 auto 10px}
#otera .oc-logo img{width:210px}
#otera .oc-motto{position:static;margin:0 0 14px;font-size:19px}
#otera .oc-menu-button{display:flex;align-items:center;justify-content:center;gap:8px;width:170px;height:32px;margin:0 auto 6px;background:url(images/menu/button-background.gif) no-repeat;color:#e3d6c1;font:18px/1 'Martel',Georgia,serif;text-shadow:1px 1px 0 #000;cursor:pointer}
#otera .oc-menu-toggle:focus-visible~.oc-frame .oc-menu-button{outline:3px solid #e7c454;outline-offset:2px}
#otera .oc-smallbox,#otera .oc-menu{display:none}
#otera .oc-menu-toggle:checked~.oc-frame .oc-smallbox,#otera .oc-menu-toggle:checked~.oc-frame .oc-menu{display:block}
#otera .oc-menu{margin-bottom:24px}
#otera .oc-submenu a{padding-top:6px;padding-bottom:6px}
#otera .oc-center{margin-top:6px}
#otera .oc-box{margin-left:0;margin-right:0}
#otera .oc-infobar-row{flex-wrap:wrap;justify-content:center;padding:4px 8px}
#otera .oc-infobar-online{margin-left:0}
#otera .oc-right{grid-column:1;justify-content:center}
#otera .oc-box-body{padding:8px}
}